/* ******************************************************************************
*********************************************************************************
This file contains all the neccessary variables that control standard elements
in the pages. This is also the file that loads all of the other themed CSS
styleshets into just this one in each of themed templates.
*********************************************************************************
****************************************************************************** */











































/* ******************************************************************************
*********************************************************************************
The intention of this file is to reset most of the different browser, built-in
CSS styles, so that it is an empty canvas for the themed specific stylesheets.
*********************************************************************************
****************************************************************************** */

*, *:before, *:after {
  box-sizing: border-box;
}
/* ******************************************************************************
*********************************************************************************
The intention of this file is to makes browsers render all elements more
consistently and in line with modern standards.
It precisely targets only the styles that need normalizing.
*********************************************************************************
****************************************************************************** */


/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {

}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
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.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 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.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[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.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
/* ******************************************************************************
*********************************************************************************
This file contains all the neccessary styles to control how your
Drag and Drop (DND) sections look when editing content in the page editor.
*********************************************************************************
****************************************************************************** */

dnd-section {
  padding: 80px 20px;
}
.banner-area .dnd-section {
  padding: 0;
}

.dnd-section > .row-fluid {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
}

.dnd-section .widget-type-cell {
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 767px) {
  .dnd-section .widget-type-cell {
    padding-left: 0px;
    padding-right: 0px;
  }
  .footer_menu ul li a {
    padding: 0 8px;
    font-size: 14px;
}
}
/* ******************************************************************************
*********************************************************************************
This file contains all the neccessary styles to control how your
fonts apppear throughout your site.
*********************************************************************************
****************************************************************************** */



html {

}

body {
  line-height: 1.7;
  background: #ffffff;
}

p {
  margin: 0;
  margin-top: 8px;

}

/* Anchor Links */
a {

  text-decoration: none;
}
a:hover, a:focus {
  text-decoration: underline;
}
a:visited {
  color: #9900cc;
  text-decoration: none;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 16px;
  margin-bottom: 0;
  line-height: 1.4;
}

h1 {
  margin-top: 0;
}

h2 {

}

h3 {

}

h4 {

}

h5 {

}

h6 {

}

strong {
  font-weight: 700;
}

code {
  vertical-align: bottom;
}

ul,
ol {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

ul li,
ol li {

}

ul ul,
ol ul,
ul ol,
ol ol {
  margin-top: 0;
  margin-bottom: 0;
}

blockquote {
  margin: 0;
  margin-left: 40px;

}

/* Horizontal Rules */
hr {
  color: #ccc;
  background-color: #ccc;
  height: 1px;
  border: none;
}

/* TODO */
small {

}

/* TODO */
mark {

}

sup,
sub {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

:focus {

}

.disable-focus-styles :focus {
  outline: none;
}
/* ******************************************************************************
*********************************************************************************
This file contains all the neccessary styles to control how your forms looks
throughout your site. Styles for form fields, buttons, inputs, etc.
*********************************************************************************
****************************************************************************** */

form {
  max-width: 767px;
  font-family: Lato, sans-serif;
}

.hs-button {
  margin: 0;
  cursor: pointer;
  display: inline-block;
  font-weight: normal;
  line-height: 1.1;
  position: relative;
  text-align: center;
  transition: all 0.15s linear;
  background-color: #494A52;
  border-color: #494A52;
  color: #fff;
  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
  font-size: .92rem;
  padding: 15px 53px;
  text-decoration: none;
  white-space: normal;
  margin: 10px 0;
}

.hs-button:hover, .hs-button:focus {
  background-color: #21222a;
  border-color: #21222a;
  color: #fff;
  text-decoration: none;
}

.hs-button:active {

}


.hs-form label {
  font-size: 14px;
  display: block;
  float: none;
  width: auto;
  font-weight: normal;
  text-align: left;
  line-height: 1.2;
  padding-top: 0;
  margin-bottom: 4px;
}

.hs-error-msgs label {
  margin-top: .5rem;
  color: #f2545b !important;
}

.hs-input,
input[type="password"] {
  display: inline-block;
  width: 100% !important;
  padding: 9px 10px;
  font-size: 16px;
  height: auto !important;
  font-weight: normal;
  line-height: 1.4;
  color: #33475b;
  background-color: #ffffff;
  border: 2px solid #D1D6DC;
  box-sizing: border-box;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
}
input:focus{
  outline: none;
}
input[type="password"]:focus {
    outline: none;
}

.hs-input[type=checkbox],
.hs-input[type=radio] {
  cursor: pointer;
  width: auto !important;
  height: auto;
  padding: 0;
  margin: 3px 5px 3px 0px;
  line-height: normal;
  border: none;
}

.hs-input[type=file] {
  background-color: #fff;
  padding: initial;
  border: initial;
  line-height: initial;
  box-shadow: none;
}

.hs-input:-moz-placeholder {
  color: #bfbfbf;
}

.hs-input::-webkit-input-placeholder {
  color: #bfbfbf;
}

.hs-input input,
.hs-input textarea {
  transition: border 0.2s linear;
}
.hs-input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
}

textarea.hs-input {
  height: auto;
}

select[multiple].hs-input {
  height: inherit;
}

/* Force single column fields to full width inside of fieldsets */
fieldset.form-columns-1 .hs-input:not([type=radio]):not([type=checkbox]) {
  width: 100% !important;
}

input.hs-input.error,
div.field.error input,
div.field.error textarea,
div.field.error .chzn-choices,
textarea.hs-input.error,
select.hs-input.error {
  border-color: #c87872;
}
input.hs-input.error:focus,
div.field.error input:focus,
div.field.error textarea:focus,
div.field.error .chzn-choices:focus,
textarea.hs-input.error:focus,
select.hs-input.error:focus {
  border-color: #b9554d;
}

.actions {
  padding: 0;
}

.inputs-list {
  margin: 0 0 5px;
  width: 100%;
  padding-left: 0;
}
.inputs-list > li {
  display: block;
  padding: 0;
  width: 100%;
  padding-top: 0;
}
.inputs-list label {
  display: block;
  float: none;
  width: auto;
  padding: 0;
  line-height: 18px;
  text-align: left;
  white-space: normal;
  font-weight: normal;
}
.inputs-list:first-child {
  padding-top: 6px;
}
.inputs-list > li + li {
  padding-top: 2px;
}
.inputs-list label > input,
.inputs-list label > span {
  vertical-align: middle;
}

ul.no-list {
  list-style: none;
}

.field {
  margin-bottom: 18px;
}

.hs-field-desc {
  color: #7c98b6;
  margin: 0px 0px 6px;
  font-size: 14px;
}

.hs-form-required {
  color: red;
}

.hs-richtext {
  margin-bottom: 3px;
  line-height: 1.2;
  font-size: 1rem;
  color: #494a52;
}
.hs-richtext hr {
  text-align: left;
  margin-left: 0;
  width: 91%;
}

.grecaptcha-badge {
  margin: 0 auto;
}

.email-correction, .email-validation {
  padding-top: 3px;
  font-size: 12px;
}
.email-correction a,
.email-validation a {
  cursor: pointer;
}
@media (max-width: 400px),
(min-device-width: 320px) and (max-device-width: 480px) {
  .email-correction form .form-columns-2 .hs-form-field,
  .email-correction form .form-columns-3 .hs-form-field,
  .email-validation form .form-columns-2 .hs-form-field,
  .email-validation form .form-columns-3 .hs-form-field {
    float: none;
    width: 100%;
  }
  .email-correction form .form-columns-2 .hs-form-field .hs-input,
  .email-correction form .form-columns-3 .hs-form-field .hs-input,
  .email-validation form .form-columns-2 .hs-form-field .hs-input,
  .email-validation form .form-columns-3 .hs-form-field .hs-input {
    width: 90%;
  }
  .email-correction form .form-columns-2 .hs-form-field input[type=checkbox],
  .email-correction form .form-columns-2 .hs-form-field input[type=radio],
  .email-correction form .form-columns-3 .hs-form-field input[type=checkbox],
  .email-correction form .form-columns-3 .hs-form-field input[type=radio],
  .email-validation form .form-columns-2 .hs-form-field input[type=checkbox],
  .email-validation form .form-columns-2 .hs-form-field input[type=radio],
  .email-validation form .form-columns-3 .hs-form-field input[type=checkbox],
  .email-validation form .form-columns-3 .hs-form-field input[type=radio] {
    width: 24px;
  }
}

.hs-button,
.hs-form-field input[type=text],
.hs-form-field input[type=email],
.hs-form-field input[type=phone],
.hs-form-field input[type=number],
.hs-form-field input[type=tel],
.hs-form-field input[type=date],
.hs-form-field textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
}

.hs-default-font-element,
.hs-main-font-element {
  font-family: Lato, serif;
}
/* ******************************************************************************
*********************************************************************************
This file contains all the neccessary styles to control how your
menu items appear, including the link and hover effects.
*********************************************************************************
****************************************************************************** */

.hs-menu-wrapper ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.hs-menu-item a {
  text-decoration: none;
}

.hs-menu-item:hover a,
.hs-menu-item:focus a {
  text-decoration: none;
}


@media (min-width: 641px){
  
  
  .mobile_menu{
    display: none;
  }
  .menu_container {
    max-width: 1024px;
    margin: 0 auto;
  }

  .menu_container {
    margin-top: -16px;
    visibility: hidden;
    opacity: 0;
  }
  .submenu.level-1 > li.has-submenu.child-open .submenu.level-2{
    visibility: visible;
    opacity: 1;
  }
  .submenu.level-1 > li.has-submenu.child-open .submenu.level-2 >.menu_container {
    visibility: visible;
    opacity: 1;
    margin-top: 0;
    transition: all .5s;
  }
  
  .submenu.level-1 > li.has-submenu.child-open .submenu.level-2{
    height: auto;
    transition: height .9s ease-in;
  }
  
  .menu_container a:hover {
    text-decoration: underline !important;
}
.submenu.level-1 > li > a:hover:after,
.submenu.level-1 > li.child-open > a:after {
  content: url("https://7400186.fs1.hubspotusercontent-na1.net/hubfs/7400186/raw_assets/public/%E2%BD%87%E6%B8%85%E7%B4%A1%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_2022/images/hd_gl_nv_arr_02.png");
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  line-height: 0;
  z-index: 3;
}
  .submenu.level-2>.menu_container>li:first-child:before{
    content: "";
    display: table;
  }
  .submenu.level-2>.menu_container>li:first-child:after {
    content: "";
    clear: both;
    display: table;
}
  .submenu.level-2 > .menu_container > li:first-child {
    border-top: 1px solid #dedede;
    background: #f3f3f3;
    padding: 16px;
  }
  .submenu.level-2 > .menu_container > li:last-child {
    padding: 16px 0;
    background: #fff;
  }
  .submenu.level-2 > .menu_container > li:first-child ul.submenu.level-3:before {
    content: "";
    display: table;
  }

  .submenu.level-2 > .menu_container > li:first-child ul.submenu.level-3:after {
    clear: both;
  }
  .submenu.level-2 > .menu_container > li:first-child .submenu.level-3 > li:first-child {
    float: left;
  }
  
  .submenu.level-2 > .menu_container > li:first-child .submenu.level-3 > li:last-child {
    float: right;
  }
  .submenu.level-2 > .menu_container > li:first-child .submenu.level-3 > li:first-child > a {
    display: inline-block;
    padding-left: 24px;
    background-position: 0 -0.15em;
    background-repeat: no-repeat;
    background-image: url("https://7400186.fs1.hubspotusercontent-na1.net/hubfs/7400186/raw_assets/public/%E2%BD%87%E6%B8%85%E7%B4%A1%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_2022/images/icon_s_right_01.png");
  }
  .submenu.level-2>.menu_container>li:first-child .submenu.level-3>li:last-child > a {
    padding-right: 24px;
    background-position: 100% -0.15em;
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url("https://7400186.fs1.hubspotusercontent-na1.net/hubfs/7400186/raw_assets/public/%E2%BD%87%E6%B8%85%E7%B4%A1%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_2022/images/icon_s_close_01.png");
}
.submenu.level-1 > li:first-child > .submenu.level-2>.menu_container>li:last-child ul.submenu.level-3 ul.submenu.level-4:before {
  content: "";
  display: table;
}

.submenu.level-1 > li:first-child > .submenu.level-2>.menu_container>li:last-child ul.submenu.level-3 ul.submenu.level-4:after {
  content: "";
  display: table;
  clear: both;
}

.submenu.level-1 > li:first-child > .submenu.level-2>.menu_container>li:last-child ul.submenu.level-3 ul.submenu.level-4 > li {
  width: 50%;
  float: left;
  padding: 0 16px;
}

.submenu.level-1>li:first-child>.submenu.level-2>.menu_container>li:last-child ul.submenu.level-3 > li:first-child ul.submenu.level-4>li>a {
  padding-left: 24px;
  background-position: 0 -0.15em;
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url("https://7400186.fs1.hubspotusercontent-na1.net/hubfs/7400186/raw_assets/public/%E2%BD%87%E6%B8%85%E7%B4%A1%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_2022/images/icon_s_right_01.png");
}
.menu_divider {
  margin-bottom: 16px;
  margin-top: 16px;
}
.menu_divider .divider_inner {
  padding: 0 16px;
}
.submenu.level-1 > li:first-child > .submenu.level-2>.menu_container>li:last-child > .submenu.level-3 > li:last-child > .submenu.level-4 > li {
  padding: 0 16px;
  width: 35%;
}

.submenu.level-1 > li:first-child > .submenu.level-2>.menu_container>li:last-child > .submenu.level-3 > li:last-child > .submenu.level-4 > li:nth-child(2) {
  width: 30%;
}
.submenu.level-1>li:first-child>.submenu.level-2>.menu_container>li:last-child ul.submenu.level-3 > li:last-child > ul.submenu.level-4 > li > a {
  font-weight: bold;
  color: #333333;
  line-height: 1.4;
  cursor: auto;
}
.submenu.level-1>li:first-child>.submenu.level-2>.menu_container>li:last-child ul.submenu.level-3 > li:last-child > ul.submenu.level-4 > li > a:hover{
  text-decoration: none !important;
}
.submenu.level-1>li:first-child>.submenu.level-2>.menu_container>li:last-child ul.submenu.level-3 > li:last-child > ul.submenu.level-4 > li ul.submenu.level-5{
  padding-top: 8px;
}
.submenu.level-1>li:first-child>.submenu.level-2>.menu_container>li:last-child ul.submenu.level-3 > li:last-child > ul.submenu.level-4 > li ul.submenu.level-5 > li{
  margin-top: 8px;
}
.submenu.level-1>li:first-child>.submenu.level-2>.menu_container>li:last-child ul.submenu.level-3 > li:last-child > ul.submenu.level-4 > li ul.submenu.level-5 > li > a {
  padding-left: 24px;
  background-position: 0 -0.15em;
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url("https://7400186.fs1.hubspotusercontent-na1.net/hubfs/7400186/raw_assets/public/%E2%BD%87%E6%B8%85%E7%B4%A1%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_2022/images/icon_s_right_01.png");
}
.submenu.level-1 > li:nth-child(2) .submenu.level-2>.menu_container>li:last-child > ul.submenu.level-3:before,
.submenu.level-1 > li:nth-child(4) .submenu.level-2>.menu_container>li:last-child > ul.submenu.level-3:before,
.submenu.level-1 > li:nth-child(5) > .submenu.level-2>.menu_container>li:last-child > ul.submenu.level-3:before {content: "";display: table;}

.submenu.level-1 > li:nth-child(2) .submenu.level-2>.menu_container>li:last-child > ul.submenu.level-3:after,
.submenu.level-1 > li:nth-child(4) .submenu.level-2>.menu_container>li:last-child > ul.submenu.level-3:after,
.submenu.level-1 > li:nth-child(5) > .submenu.level-2>.menu_container>li:last-child > ul.submenu.level-3:after {content: "";display: table;clear: both;}

.submenu.level-1 > li:nth-child(2) .submenu.level-2>.menu_container>li:last-child > ul.submenu.level-3 > li {
  padding: 0 16px;
  border-right: 1px solid #dedede;
  width: 30%;
  float: left;
}

.submenu.level-1 > li:nth-child(2) .submenu.level-2>.menu_container>li:last-child > ul.submenu.level-3 > li:first-child {
  width: 40%;
  border-right: none;
}
.submenu.level-1 > li:nth-child(2) .submenu.level-2>.menu_container>li:last-child > ul.submenu.level-3 > li > ul.submenu.level-4 >li + li {
  margin-top: 8px;
}
.submenu.level-1 > li:nth-child(2) .submenu.level-2>.menu_container>li:last-child > ul.submenu.level-3 > li > ul.submenu.level-4 >li > a {
  padding-left: 24px;
  background-position: 0 -0.15em;
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url("https://7400186.fs1.hubspotusercontent-na1.net/hubfs/7400186/raw_assets/public/%E2%BD%87%E6%B8%85%E7%B4%A1%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_2022/images/icon_s_right_01.png");
}
.submenu.level-1 > li:nth-child(4) .submenu.level-2>.menu_container>li:last-child > ul.submenu.level-3 > li {
  width: 33.333%;
  float: left;
  padding: 0 16px;
  border-right: 1px solid #dedede;
}
.submenu.level-1 > li:nth-child(4) .submenu.level-2>.menu_container>li:last-child > ul.submenu.level-3 > li:last-child{
  border-right: 0;
}
.submenu.level-1>li:nth-child(4) .submenu.level-2>.menu_container>li:last-child>ul.submenu.level-3>li>ul.submenu.level-4>li>ul.submenu.level-5 {
  padding-top: 8px;
}
.submenu.level-1>li:nth-child(4) .submenu.level-2>.menu_container>li:last-child>ul.submenu.level-3>li>ul.submenu.level-4>li>ul.submenu.level-5>li {
  margin-top: 8px;
}
.submenu.level-1>li:nth-child(4) .submenu.level-2>.menu_container>li:last-child>ul.submenu.level-3> li > ul.submenu.level-4 > li > ul.submenu.level-5 > li > a {
  padding-left: 24px;
  background-position: 0 -0.15em;
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url("https://7400186.fs1.hubspotusercontent-na1.net/hubfs/7400186/raw_assets/public/%E2%BD%87%E6%B8%85%E7%B4%A1%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_2022/images/icon_s_right_01.png");
}
.submenu.level-1>li:nth-child(4) .submenu.level-2>.menu_container>li:last-child>ul.submenu.level-3>li>ul.submenu.level-4>li>a:hover {
  text-decoration: none !important;
}
.submenu.level-1>li:nth-child(4) .submenu.level-2>.menu_container>li:last-child>ul.submenu.level-3>li>ul.submenu.level-4>li > a {
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  cursor: auto;
}
.submenu.level-1>li:nth-child(4) .submenu.level-2>.menu_container>li:last-child>ul.submenu.level-3> li > ul.submenu.level-4 > li:nth-child(2) > a {
  margin-top: 16px;
  display: inline-block;
}
.submenu.level-1 > li:nth-child(5) > .submenu.level-2>.menu_container>li:last-child > ul.submenu.level-3 > li {
  width: 33.333%;
  float: left;
  padding: 0 16px;
}

.submenu.level-1 > li:nth-child(5) > .submenu.level-2>.menu_container>li:last-child > ul.submenu.level-3 > li:nth-child(2) {
  border-right: 1px solid #dedede;
  min-height: 52px;
}
.submenu.level-1 > li:nth-child(5) > .submenu.level-2>.menu_container>li:last-child > ul.submenu.level-3 > li > ul.submenu.level-4 > li+ li{
  margin-top: 8px;
}
.submenu.level-1 > li:nth-child(5) > .submenu.level-2>.menu_container>li:last-child > ul.submenu.level-3 > li > ul.submenu.level-4 > li > a {
  display: inline-block;
  background-repeat: no-repeat;
  padding-left: 24px;
  background-position: 0 -0.15em;
  background-image: url("https://7400186.fs1.hubspotusercontent-na1.net/hubfs/7400186/raw_assets/public/%E2%BD%87%E6%B8%85%E7%B4%A1%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_2022/images/icon_s_right_01.png");
}
  
body .custom-menu-primary .submenu.level-2 li a:visited {
  color: #333333;
}

}

@media (max-width: 830px) and (min-width: 641px){
  .submenu.level-2>.menu_container>li:last-child {
    padding: 16px;
}
}

@media (max-width: 640px){

  ul.submenu.level-1 {
    display: block;
}
  .submenu.level-1 > li {
    float: none;
    display: block;
    border-bottom: 1px solid #6c7074;
}

.submenu.level-1 > li > a {
  display: block;
  padding: 14px 32px 14px 8px !important;;
  color: #ffffff;
  font-size: 16px !important;
  border: none;
  background: url("https://7400186.fs1.hubspotusercontent-na1.net/hubfs/7400186/raw_assets/public/%E2%BD%87%E6%B8%85%E7%B4%A1%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_2022/images/hd_gl_nv_arr_01_w.png") 100% 50% no-repeat;
  -webkit-background-size: 32px 32px;
  background-size: 32px 32px;
  height: auto !important;;
}
.submenu.level-1 > li > a:hover:after {
  content: none;
}
.submenu.level-2 {
  opacity: 1;
  position: static;
  visibility: visible;
  min-width: auto;
  display: none;
}

.submenu.level-2 > li {
  display: block;
  border-bottom: 1px solid #6c7074;
}


}
/* ******************************************************************************
*********************************************************************************
This file contains all the neccessary styles to control how your
tables look throughout your site.
*********************************************************************************
****************************************************************************** */

table {
  margin-bottom: 1rem;
  border: 1px solid #dee2e6;
}

th,
td {
  padding: 0.75rem;
  vertical-align: top;
  border: 1px solid #dee2e6;
}

thead th,
thead td {
  color: #fff;
  background-color: #343a40;
  border-color: #454d55;
  border-bottom-width: 2px;
}

thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}

tbody + tbody {
  border-top: 2px solid #dee2e6;
}

/* NISD 販売店 TOP body（sandbox デザイン移植）。header/footer/login は対象外 */
.nisd-top {
  --nisd-fg: #1f242e;
  --nisd-muted: #6b7380;
  --nisd-border: #d1d9e0;
  --nisd-paper: #ffffff;
  --nisd-accent: #547b93;
  --nisd-accent-text: #274f67;
  --nisd-link: #2f6684;
  --nisd-danger: #b31f36;
  --nisd-content-width: 1200px;
  --nisd-pad-x: 24px;
  --nisd-fs-title: 16px;
  --nisd-fs-body: 15px;
  --nisd-fs-meta: 14px;
  --nisd-fs-section: 22px;
  --nisd-fs-hero: 28px;
  background: #f5f7fa;
  color: var(--nisd-fg);
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--nisd-fs-body);
  line-height: 1.5;
}

.nisd-top a {
  color: inherit;
  text-decoration: none;
}

.nisd-top__hero {
  display: grid;
  width: auto;
  height: 118px;
  place-items: center;
  background: linear-gradient(90deg, #dbe8ef 0%, #a9d1e3 46%, #d6edf4 100%);
  color: #263d4b;
  font-size: var(--nisd-fs-hero);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.nisd-top__inner {
  max-width: var(--nisd-content-width);
  margin: 0 auto;
  padding: 34px var(--nisd-pad-x) 56px;
  box-sizing: border-box;
}

/* dnd_area化に伴い、各モジュールが個別の dnd_section に入ったことで
   .row-fluid / .widget-type-cell 由来の余白が .nisd-top__inner と二重にかかるため、
   .nisd-top 配下に限定してこの二重分を打ち消す（幅の不揃い対策） */
.nisd-top .dnd-section > .row-fluid {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.nisd-top .widget-type-cell {
  padding-left: 0;
  padding-right: 0;
}

/* セクション間の縦の余白を dnd_section 単位で統一する
   （各モジュール側の margin-bottom は撤去し、ここに一本化）
   HubSpotの編集画面でセクションごとに設定され得るインラインの
   padding-top / padding-bottom を !important で打ち消し、
   実際の見た目の距離が margin-bottom の値そのものになるようにする */
.nisd-top .dnd-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}

/* sandbox実測値に合わせ、枠の中身（モジュール）ごとに余白を変える。
   並び順（nth-child等）には依存させず、中身のクラスで判定する */
.nisd-top .dnd-section:has(.unique-notice) {
  margin-bottom: 20px !important;
}

.nisd-top .dnd-section:has(.common-notice) {
  margin-bottom: 32px !important;
}

.nisd-top .dnd-section:has(.calendar-notice) {
  margin-bottom: 44px !important;
}

.nisd-top .dnd-section:has(.menu-grid),
.nisd-top .dnd-section:has(.product-grid),
.nisd-top .dnd-section:has(.market-grid) {
  margin-bottom: 52px !important;
}

.nisd-top .dnd-section:last-child {
  margin-bottom: 0 !important;
}

.nisd-top-arrow {
  flex: 0 0 auto;
  font-size: var(--nisd-fs-meta);
  vertical-align: middle;
}

/* ユニークお知らせ */
.nisd-top .unique-notice {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px;
  background: #f1f6fb;
  border: 1px solid #cad9e8;
  border-left: 3px solid var(--nisd-accent);
  border-radius: 4px;
}

.nisd-top .unique-notice h2 {
  margin: 0 0 4px;
  color: var(--nisd-accent-text);
  font-size: var(--nisd-fs-title);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.nisd-top .notice-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--nisd-fg);
}

.nisd-top .notice-row__text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--nisd-fs-body);
  font-weight: 500;
}

.nisd-top .notice-row:hover .notice-row__text {
  color: #1d4b64;
  text-decoration: underline;
}

.nisd-top .notice-row .nisd-top-arrow {
  color: var(--nisd-accent);
}

.nisd-top .notice-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  border-radius: 3px;
  white-space: nowrap;
  letter-spacing: 0.03em;
}

.nisd-top .notice-badge.meeting {
  background: #eaf1f7;
  border: 1px solid var(--nisd-accent);
  color: #37627c;
}

.nisd-top .notice-badge.material {
  background: #eaf2ee;
  border: 1px solid #3f7a63;
  color: #316c53;
}

/* 共通お知らせ */
.nisd-top .common-notice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
  background: var(--nisd-paper);
  border: 1px solid var(--nisd-border);
  border-radius: 4px;
}

.nisd-top .common-notice h2 {
  margin: 0 0 4px;
  color: var(--nisd-fg);
  font-size: var(--nisd-fs-title);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.nisd-top .common-notice-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--nisd-fg);
  font-size: var(--nisd-fs-body);
  line-height: 1.5;
}

.nisd-top .common-notice-row:hover .common-notice-row__title {
  color: #1d4b64;
  text-decoration: underline;
}

.nisd-top .common-notice-row time {
  color: var(--nisd-muted);
  font-size: var(--nisd-fs-meta);
  white-space: nowrap;
}

.nisd-top .common-notice-row__sep {
  color: #c1c8cf;
}

/* カレンダー */
.nisd-top .calendar-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  background: var(--nisd-paper);
  border: 1px solid var(--nisd-border);
  border-left: 3px solid var(--nisd-accent);
  transition: background 0.18s ease;
}

.nisd-top .calendar-notice:hover {
  background: #f4f8fb;
}

.nisd-top .calendar-notice__main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nisd-top .calendar-notice strong {
  font-size: var(--nisd-fs-title);
}

.nisd-top .notice-label {
  color: var(--nisd-accent);
  font-size: var(--nisd-fs-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.nisd-top .calendar-notice-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--nisd-link);
  font-size: var(--nisd-fs-meta);
}

.nisd-top .calendar-notice:hover .calendar-notice-action {
  text-decoration: underline;
}

/* セクション見出し */
.nisd-top .portal-section {
  margin-bottom: 0;
}

.nisd-top .portal-section h1,
.nisd-top .portal-section h2 {
  margin: 0 0 18px;
  color: var(--nisd-fg);
  font-size: var(--nisd-fs-section);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.nisd-top .portal-section h1::after,
.nisd-top .portal-section h2::after {
  display: block;
  width: 30px;
  height: 2px;
  margin-top: 10px;
  background: var(--nisd-accent);
  content: "";
}

/* 8 メニュー格子 */
.nisd-top .menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--nisd-border);
  border-left: 1px solid var(--nisd-border);
}

.nisd-top .menu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 84px;
  padding: 16px 40px 16px 18px;
  background: var(--nisd-paper);
  border-right: 1px solid var(--nisd-border);
  border-bottom: 1px solid var(--nisd-border);
  transition: background 0.18s ease;
}

.nisd-top .menu-card:hover {
  background: #eef4f7;
}

.nisd-top .menu-card strong {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-right: 4px;
  color: var(--nisd-accent-text);
  font-size: var(--nisd-fs-title);
  font-weight: 700;
  line-height: 1.4;
}

.nisd-top .menu-title-text {
  flex: 1;
  min-width: 0;
}

/* 増位様初稿準拠：タイトル横の並びではなく、カード右上に配置する */
.nisd-top .menu-new-badge {
  position: absolute;
  top: 14px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  height: 20px;
  margin-left: 0;
  padding: 1px 7px;
  background: #fff1f1;
  border: 1px solid #e05155;
  color: #7d7e8b;
  font-size: 11px;
  line-height: 16px;
  font-weight: 800;
  letter-spacing: 0.03em;
  border-radius: 3px;
}

.nisd-top .menu-arrow {
  position: absolute;
  top: 50%;
  right: 16px;
  color: var(--nisd-accent);
  font-size: var(--nisd-fs-body);
  line-height: 1;
  transform: translateY(-50%);
}

/* テーマ共通の a:hover（#990000）がこの矢印にも効いてしまうため、
   ホバー時も sandbox どおりのアクセントカラーのまま固定する */
.nisd-top .menu-card:hover .menu-arrow {
  color: var(--nisd-accent) !important;
}

.nisd-top .menu-card__desc {
  color: var(--nisd-muted);
  font-size: var(--nisd-fs-body);
}

/* 製品リスト */
.nisd-top .product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 24px;
}

.nisd-top .product-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 52px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--nisd-border);
}

.nisd-top .product-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  background: #e9eef0;
  border: 1px solid #d9e0e3;
  color: #c9253d;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.nisd-top .product-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.nisd-top .product-body small {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--nisd-link);
  font-size: var(--nisd-fs-meta);
  white-space: nowrap;
}

.nisd-top .product-title {
  color: var(--nisd-fg);
  font-size: var(--nisd-fs-title);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nisd-top .product-link:hover .product-title {
  color: var(--nisd-danger);
}

/* 市場カード */
.nisd-top .market-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.nisd-top .market-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--nisd-paper);
  border: 1px solid var(--nisd-border);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.nisd-top .market-card:hover {
  background: #eef4f7;
  border-color: #c5d3db;
  color: #1d4b64;
}

.nisd-top .market-image {
  height: 78px;
  background: linear-gradient(110deg, #dfe9ed, #edf3f4);
}

.nisd-top .market-card strong {
  color: var(--nisd-accent-text);
  font-size: var(--nisd-fs-title);
  font-weight: 700;
}

.nisd-top .market-card small {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--nisd-link);
  font-size: var(--nisd-fs-meta);
}

/* ==========================================================================
   NISD TOP フッターメニュー（nisd-top-footer.html 専用）
   クラス名 .nisd-footer-menu は本番の portal-footer.html には存在しないため、
   このブロックは本番フッターの表示には一切影響しない。

   実際のDOM構造（Content Stagingで検証済み）:
   .nisd-footer-menu
     div#hs_menu_wrapper_footer_menu.hs-menu-wrapper(.no-flyouts)
       ul[role="menu"]                      ← 1階層目（3項目）をここでGrid化
         li.hs-menu-item.hs-menu-depth-1
           a                                ← カテゴリ見出し
           ul.hs-menu-children-wrapper      ← 2階層目（子リンク）
             li.hs-menu-item.hs-menu-depth-2 > a

   色は独自指定せず、元のリンク色をそのまま使う（レイアウトのみ変更）。
   flyouts='false' に変更済みのため、ホバー時だけ表示されるドロップダウン用の
   暗い背景・影などのスタイルはそもそも付与されない。
   ========================================================================== */
.nisd-footer-menu {
  padding: 32px var(--nisd-pad-x, 24px);
}

.nisd-footer-menu .hs-menu-wrapper {
  background: none;
  box-shadow: none;
}

.nisd-footer-menu .hs-menu-wrapper > ul[role="menu"] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: var(--nisd-content-width, 1200px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.nisd-footer-menu .hs-menu-wrapper > ul[role="menu"] > .hs-menu-item {
  list-style: none;
}

.nisd-footer-menu .hs-menu-wrapper > ul[role="menu"] > .hs-menu-item > a {
  display: block;
  margin-bottom: 10px;
  font-weight: 700;
}

.nisd-footer-menu .hs-menu-children-wrapper {
  display: block;
  position: static;
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
  box-shadow: none;
  border: none;
}

.nisd-footer-menu .hs-menu-children-wrapper .hs-menu-item {
  list-style: none;
  margin-bottom: 6px;
}

.nisd-footer-menu .hs-menu-children-wrapper .hs-menu-item:last-child {
  margin-bottom: 0;
}

.nisd-footer-menu .hs-menu-children-wrapper a {
  font-weight: 400;
}

/* サイト共通CSS側で .hs-menu-item 全体（1階層目・2階層目とも）に
   区切り用の縦罫線（border-right）が付与されているため、
   このスコープ内では一旦すべて解除し、1階層目（カテゴリ）の間にだけ
   区切り線を付け直す。 */
.nisd-footer-menu .hs-menu-item {
  border: none !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
}

.nisd-footer-menu .hs-menu-wrapper > ul[role="menu"] > .hs-menu-item:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* 「ページトップへ」ボタン左右の罫線も同じ共通CSSの影響のため解除 */
.nisd-footer-menu .ft_pg_top,
.nisd-footer-menu .ft_pg_top * {
  border: none !important;
}

@media (max-width: 700px) {
  .nisd-footer-menu .hs-menu-wrapper > ul[role="menu"] {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 1000px) {
  .nisd-top__inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 700px) {
  .nisd-top .menu-grid,
  .nisd-top .product-grid,
  .nisd-top .market-grid {
    grid-template-columns: 1fr;
  }

  .nisd-top__inner {
    padding-top: 20px;
  }

  .nisd-top .calendar-notice {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===================================================================
   TOPページ専用ヘッダー（2026-10-05追加、2026-10-05白ヘッダー仕様に修正）
   `.nisd-top-header` は nisd-top-header.html の最外周 div にのみ付与しているクラスで、
   本番共有の portal-header.html にはこのクラスが存在しないため、
   以下のスタイルは本番ヘッダーの見た目には一切影響しない。
   参考デザインファイル（白背景ヘッダー＋検索/ユーザー名を1列配置＋タブ型ナビ）に合わせて、
   紺背景版から白背景版へ全面的に修正。var(--nisd-fg) 等は .nisd-top のスコープ外で
   解決できない可能性があるため、値は直接指定する。
   =================================================================== */
.nisd-top-header.custom_header {
  background: #ffffff;
  border-bottom: none;
}

/* 検索ボックス＋氏名/ログアウトが縦に2段積みになっていた不具合の修正。
   実際のレンダリング結果（浦辺様にご確認いただいたHTML）を確認したところ、
   <form>と<div>の直接の親は、外側の div#hs_cos_wrapper_header_utility ではなく、
   その内側にさらにネストされた span#hs_cos_wrapper_header_utility_（末尾に
   アンダースコアが付く別要素）だった。外側divにflexを指定しても、
   その唯一の子であるこのspan自体はブロック化されないため、
   中の<form>と<div>が通常のブロック要素として縦に並んでしまっていた。
   実際にflexを当てるべきこの内側のspanを直接指定し、1行に並べる。 */
.nisd-top-header #hs_cos_wrapper_header_utility_ {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ヘッダー行とグローバルナビ行の間の罫線（参考デザインファイルの実測値 #e2e4e6 に合わせる）。
   前回反映されなかったため、念のため !important で他のスタイルに上書きされないようにする。 */
.nisd-top-header .custom-menu-primary {
  border-top: 1px solid #e2e4e6 !important;
}

.nisd-top-header__label {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid #d8dadd;
  color: #6b7076;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.nisd-top-header .header_links.nisd-top-header__utility {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.nisd-top-header__search {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  background: #f5f6f7;
  border: 1px solid #d8dadd;
  border-radius: 16px;
}

.nisd-top-header__search-input {
  width: 160px;
  height: 100%;
  padding: 0 8px 0 0;
  border: 0;
  background: transparent;
  font-size: 13px;
  color: #1f242e;
}

.nisd-top-header__search-input::placeholder {
  color: #9aa2ad;
}

.nisd-top-header__search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: 0;
  color: #6b7380;
  cursor: pointer;
}

.nisd-top-header__account {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #1f242e;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.nisd-top-header__logout {
  color: #6b7076;
  font-weight: 400;
  text-decoration: underline;
}

.nisd-top-header__logout:hover {
  opacity: 0.7;
}

/* グローバルナビ：白背景・黒文字、選択中（現在地）のみ赤文字＋赤アンダーライン */
.nisd-top-header .custom-menu-primary {
  background: #ffffff;
}

.nisd-top-header .custom-menu-primary .desktop_menu ul li a {
  padding: 16px 20px;
  color: #1f242e;
  border-bottom: 3px solid transparent;
}

.nisd-top-header .custom-menu-primary .desktop_menu ul li a:hover {
  background: #f5f7fa;
  color: #1f242e;
}

.nisd-top-header .custom-menu-primary .desktop_menu ul li.is-active a {
  border-bottom-color: #b31f36;
  color: #b31f36;
  font-weight: 700;
}

@media (max-width: 830px) {
  .nisd-top-header__utility {
    gap: 10px;
  }
  .nisd-top-header__search-input {
    width: 100px;
  }
}
/* ******************************************************************************
*********************************************************************************
This file contains all the neccessary styles to control how your landing pages
look if there is anything specific to your landing pages.
*********************************************************************************
****************************************************************************** */
/* ******************************************************************************
*********************************************************************************
This file contains all the neccessary styles to control how your landing pages
look if there is anything specific to your landing pages.
*********************************************************************************
****************************************************************************** */
.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 8px;
}

.header-container .inner {
  display: table;
  width: 100%;
}

.header__logo {
  display: table-cell;
  width: 438px;
  padding: 30px 0 16px 0;
  font-size: 0;
  vertical-align: middle;
}
.header__logo img{
  max-width: 438px;
}
#hs_cos_wrapper_logo_text {
  display: table-cell;
  padding: 16px 24px 16px 32px;
  vertical-align: middle;
  font-weight: bold;
}
#hs_cos_wrapper_logo_text p {
  margin: 0;
  line-height: 0;
}

#hs_cos_wrapper_logo_text p span {
  display: inline-block;
  min-width: 230px;
  max-width: 328px;
  line-height: 1.25;
}
.header_links_container {
  display: table-cell;
  vertical-align: middle;
  padding: 4px 0;
  text-align: right;
}
.header_links {
  display: inline-block;
  font-size: 0;
}
.header_links ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;
  font-size: 0;
}

.header_links ul li {
  display: inline-block;
  font-size: 14px;
  border-right: solid 1px #dedede;
  line-height: 100%;
  padding-right: 8px;
  margin-right: 8px;
}

.header_links ul li:first-child a {
  color: #cf142b;
}
.country_name {
  display: inline-block;
}
.country_name span span {
  display: inline-block;
  padding: 2px 0 3px;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
}
.hd_ut_lang_select {
  display: inline-block;
  margin-left: 3px;
}
.current_lang_link a {
  display: inline-block;
  padding: 2px 0 3px 11px;
  background: url(https://7400186.fs1.hubspotusercontent-na1.net/hubfs/7400186/raw_assets/public/%E2%BD%87%E6%B8%85%E7%B4%A1%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_2022/images/hd_ut_lang.png) 0 50% no-repeat;
  /* border-right: 1px solid #dedede; */
  cursor: pointer;
}
.current_lang_link a span {
  display: inline-block;
  padding-right: 21px;
  background: url("https://7400186.fs1.hubspotusercontent-na1.net/hubfs/7400186/raw_assets/public/%E2%BD%87%E6%B8%85%E7%B4%A1%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_2022/images/hd_ut_lang_arrowdown.png") 100% 50% no-repeat;
  color: #666666;
  font-size: 14px;
}
.current_lang_link a.open span {
  background-image: url("https://7400186.fs1.hubspotusercontent-na1.net/hubfs/7400186/raw_assets/public/%E2%BD%87%E6%B8%85%E7%B4%A1%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_2022/images/hd_ut_lang_arrowup.png");
}
.lang_links {
  position: relative;
  z-index: 10;
  display: none;
}
.lang_dd_open .lang_links {
  display: block;
}
.current_lang_link a.open  {
  background: #f3f3f3;
  border-right: 1px solid #f3f3f3;
  -webkit-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
  -moz-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
}
.lang_links ul {
  display: block;
  width: 200px;
  position: absolute;
  right: 0;
  -moz-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
  margin: 0;
  padding: 0;
}

.lang_links ul li {
  border-bottom: 1px solid #c9c9c9;
  text-align: left;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lang_links ul li a {
  display: block;
  padding: 8px 8px 8px 11px;
  background: #f3f3f3;
  color: #333333;
  font-size: 14px;
}

.lang_links ul li:last-child {
  border-bottom: 0;
}
.company_link {
  display: inline-block;
}

.company_link a {
  display: inline-block;
  padding-top: 2px;
  padding-bottom: 3px;
  font-size: 14px;
  background-image: url("https://7400186.fs1.hubspotusercontent-na1.net/hubfs/7400186/raw_assets/public/%E2%BD%87%E6%B8%85%E7%B4%A1%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_2022/images/icon_s_newwindow_01.png");
  text-align: right;
  background-repeat: no-repeat;
  padding-left: 24px;
  background-position: 0 50%;
}
#hdSearch {
  margin-top: 8px;
}
.lang_links ul li a:hover{
  text-decoration: none;
}
p.header_search {
  margin-top: 0;
  float: right;
}
#hdSearch .gl_nv_src_txt {
  display: block;
  float: left;
  width: 166px;
  height: 24px;
  margin: 0;
  padding: 2px 8px 0 8px;
  border: 0;
  font-size: 14px;
  background: #dedede;
  -webkit-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
  line-height: normal
}

#hdSearch .gl_nv_src_btn {
  display: block;
  float: left;
  width: 24px;
  height: 24px;
  margin: 0;
  border: none;
  border-left: solid 1px #c9c9c9;
  background: url("https://7400186.fs1.hubspotusercontent-na1.net/hubfs/7400186/raw_assets/public/%E2%BD%87%E6%B8%85%E7%B4%A1%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_2022/images/gl_nv_src_btn.png") 50% 50% no-repeat #dedede;
  text-indent: -9999px;
  line-height: 1px;
  -webkit-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  padding: 0;
}

a.mobile_trigger {
  display: none;
}
.hd_ut_s {
  display: none;
}
.mobile_dropdown_links {
  display: none;
}
.custom-menu-primary {
  background: #303233;
  position: relative;
  z-index: 4;
}
.nav_container {
  max-width: 1200px;
  margin: 0 auto;
}

/* グローバルナビ（8メニュー）。「メニュー」セクションと同じ8項目をここに表示する */
.custom-menu-primary .desktop_menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.custom-menu-primary .desktop_menu ul li {
  flex: 0 0 auto;
}
.custom-menu-primary .desktop_menu ul li a {
  display: block;
  padding: 14px 20px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.custom-menu-primary .desktop_menu ul li a:hover {
  background: rgba(255, 255, 255, 0.12);
  text-decoration: none;
}

.header__logo.mobile{
  display: none;
}
.search_mobile {
  display: none;
}
@media (max-width: 830px){
  #hs_cos_wrapper_logo_text {
    padding: 16px 8px 16px 32px;
}
#hs_cos_wrapper_logo_text p {
  line-height: 0;
}
.header_links ul {
  display: block;
}
.header_links {
  display: block;
}
.header_links ul li {
  margin-bottom: 8px;
}
}

@media (max-width: 640px){
  .desktop_menu{
    display: none;
  }
  .body-wrapper {
    padding-top: 48px;
}
  .header_links {
    display: none;
}

.hd_ut_lang_select {
    display: none;
}

.company_link {
    display: none;
}

#hdSearch {
    display: none;
}
.gl_nv_s {
  display: none;
}
.custom_header {
  border-bottom: 1px solid #6c7074;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 70000;
  width: 100%;
  background-color: #ffffff;
  padding-bottom: 1px;
}
.header__logo {
  padding: 15px 0 15px;
	width: 200px;
}

.header__logo img {
	width: 200px;
}

#hs_cos_wrapper_logo_text {
  padding: 16px 8px 16px 32px;
  font-size: 12px;
}
.country_name span span {
  margin-right: 46px;
  font-size: 10px;
}
#hs_cos_wrapper_logo_text p span {
  min-width: 0;
}
a.mobile_trigger {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 44px;
  height: 44px;
  text-indent: -9999px;
  background: url("https://7400186.fs1.hubspotusercontent-na1.net/hubfs/7400186/raw_assets/public/%E2%BD%87%E6%B8%85%E7%B4%A1%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_2022/images/hd_gl_nv_btn.png") 0 0 no-repeat;
  -webkit-background-size: 44px 44px;
  background-size: 44px 44px;
  cursor: pointer;
}
.mobile_trigger.mobile-open {
  background: url("https://7400186.fs1.hubspotusercontent-na1.net/hubfs/7400186/raw_assets/public/%E2%BD%87%E6%B8%85%E7%B4%A1%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_2022/images/hd_gl_nv_btn_on.png") 0 0 no-repeat #303233;
  -webkit-background-size: 44px 44px;
  background-size: 44px 44px;
}
.header__logo.desktop {
  display: none;
}

.header__logo.mobile {
  display: table-cell;
}
.gl_nv_s {
  display: none;
  width: 100%;
  z-index: 9999;
  position: absolute;
  top: 44px;
  left: 0;
  overflow-y: auto !important;
  max-height: calc(100vh - 49px);
}
#gl_header .gl_nv_s .hd_ut_s {
  display: table;
  width: 100%;
  border-top: 1px solid #6c7074;
  background: #f3f3f3;
}
#gl_header .gl_nv_s .hd_ut_s .hd_ut_lang {
  display: table-cell;
  width: 50%;
}
#gl_header .gl_nv_s .hd_ut_s .hd_ut_lang select {
  border-radius: 0;
  color: #666666;
  font-size: 12px;
  background: url("https://7400186.fs1.hubspotusercontent-na1.net/hubfs/7400186/raw_assets/public/%E2%BD%87%E6%B8%85%E7%B4%A1%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_2022/images/hd_ut_lang_s.png") 100% 50% no-repeat;
  width: 100%;
  margin: 0;
  padding: 18px 40px 18px 8px;
  border: none;
  border-right: none;
  background-size: 40px 40px;
  -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    line-height: normal;
    line-height: 1.4;
}
.mobile_dropdown_links {
  display: block;
}
.mobile_dropdown_links a {
  display: block;
  padding: 16px 32px 16px 8px;
  border-top: 1px solid #6c7074;
  color: #666666;
  font-size: 12px;
  background: url("https://7400186.fs1.hubspotusercontent-na1.net/hubfs/7400186/raw_assets/public/%E2%BD%87%E6%B8%85%E7%B4%A1%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_2022/images/hd_gl_nv_arr_01.png") 100% 50% no-repeat #f3f3f3;
  background-size: 32px 32px;
}
.mobile_dropdown_links a:hover {
  color: #666;
}
.mobile_dropdown_links a:last-child {
  background: url("https://7400186.fs1.hubspotusercontent-na1.net/hubfs/7400186/raw_assets/public/%E2%BD%87%E6%B8%85%E7%B4%A1%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_2022/images/icon_l_newwindow_01.png") 100% 50% no-repeat #f3f3f3;
  background-size: 32px 32px;
}
.mobile_dropdown_links a:hover {
  text-decoration: none;
}

.search_mobile {
  position: relative;
  width: 100%;
  padding: 16px 32px 16px 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: none;
  border-bottom: 1px solid #6c7074;
  display: block;
}

.search_mobile  p.gl_nv_src_inp {
  margin: 0;
}

.search_mobile input[type=text] {
  width: 100%;
  height: 32px;
  display: block;
  margin: 0;
  padding: 2px 8px 0 8px;
  border: none;
  font-size: 14px;
  background: #ffffff;
  -webkit-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
}

.search_mobile input.gl_nv_src_btn {
  position: absolute;
  top: 16px;
  right: 8px;
  width: 32px;
  height: 32px;
  background-image: url("https://7400186.fs1.hubspotusercontent-na1.net/hubfs/7400186/raw_assets/public/%E2%BD%87%E6%B8%85%E7%B4%A1%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_2022/images/gl_nv_src_btn_s.png");
  -webkit-background-size: 32px 32px;
  background-size: 32px 32px;
  display: block;
  margin: 0;
  border: none;
  text-indent: -9999px;
  line-height: 1px;
  -webkit-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
  background-color: #fff;
  padding: 0;
}
}

@media (max-width: 376px){
/*   .gl_nv_s {
    top: 62px;
} */
}
/* ******************************************************************************
*********************************************************************************
This file contains all the neccessary styles to control how your
footer looks when it comes to spacing and other general styles.
*********************************************************************************
****************************************************************************** */

#gl_footer {
  padding-bottom: 40px;
  border-top: 2px solid #dedede;
  border-bottom: 4px solid #cf142b;
}
.cp-PageTop {
  display: block;
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 100;
}
.cp-PageTop a {
  display: block;
  float: right;
  width: 50px;
  height: 50px;
  background: url("https://7400186.fs1.hubspotusercontent-na1.net/hubfs/7400186/raw_assets/public/%E2%BD%87%E6%B8%85%E7%B4%A1%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_2022/images/icon_m_up_02.png") center center no-repeat;
  background-color: rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
#gl_footer .ft_ut {
  width: 100%;
}
#gl_footer > * + .ft_ut {
  margin-top: -1px;
  border-top: 1px solid #c9c9c9;
}
#gl_footer .ft_ut .ft_ut_inr {
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 8px 0;
}
.footer_menu ul{
  float: left;
  overflow: hidden;
}
.footer_menu ul li{
  float: left;
    margin-bottom: 8px;
    border-right: 1px solid #dedede;
}
.footer_menu ul li:first-child{
  border-left: 1px solid #dedede;
}
.footer_menu ul li a{
  display: block;
	padding: 0 16px;
	color: #b1b1b1;
	font-size: 14px;
	line-height: 1.2;
	font-weight: 700;
}
.footer_menu ul li a:hover{
  text-decoration: underline;
}

#gl_footer .ft_ut .ft_ut_inr .ft_pg_top {
  float: right;
  padding: 0 8px;
  border-left: 1px solid #dedede;
  border-right: 1px solid #dedede;
  margin: 0;
}
#gl_footer .ft_ut .ft_ut_inr .ft_pg_top a {
  display: block;
  cursor: pointer;
  padding: 0 8px 0 32px;
  background: url("https://7400186.fs1.hubspotusercontent-na1.net/hubfs/7400186/raw_assets/public/%E2%BD%87%E6%B8%85%E7%B4%A1%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_2022/images/icon_s_up_02.png") 0 50% no-repeat;
}

#hs_cos_wrapper_copyright p {
  max-width: 1200px;
  margin: 16px auto 0;
  padding: 0 8px;
  font-size: 12px;
}
a.ver {
  cursor: pointer;
}

@media (max-width: 640px){
  #gl_footer .ft_ut .ft_ut_inr .ft_ut_lst {
    float: none;
    margin: 0 8px;
    padding: 24px 0 4px;
    border-left: none;
}
#gl_footer {
  padding-bottom: 16px;
  border-bottom: 8px solid #cf142b;
}
.cp-PageTop {
  right: 0;
}
.cp-PageTop a {
  width: 52px;
  height: 52px;
}
#gl_footer > * + .ft_ut {
  margin-top: 0;
  border: none;
}
#gl_footer .ft_ut .ft_ut_inr {
  width: 100%;
  padding: 0;
}
.footer_menu ul {
  float: none;
  margin: 0 8px;
  padding: 24px 0 4px;
  border-left: none;
}

.footer_menu ul li {margin-bottom: 20px;-webkit-background-size: 3px 3px;background-size: 3px 3px;}

.footer_menu ul li:first-child {
  border-left: none;
}
#gl_footer .ft_ut .ft_ut_inr .ft_pg_top {
  float: none;
  border: none;
  border-top: 1px solid #c9c9c9;
  border-bottom: 1px solid #dedede;
  text-align: right;
}
#gl_footer .ft_ut .ft_ut_inr .ft_pg_top a {
  display: inline-block;
  padding: 12px 8px 12px 32px;
  font-size: 14px;
  text-align: right;
  background-image: url("https://7400186.fs1.hubspotusercontent-na1.net/hubfs/7400186/raw_assets/public/%E2%BD%87%E6%B8%85%E7%B4%A1%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE_2022/images/icon_l_up_01.png");
  -webkit-background-size: 32px 32px;
  background-size: 32px 32px;
}
#hs_cos_wrapper_copyright p {
  margin-top: 14px;
  text-align: center;
}
.footer_menu ul li a {
  padding: 0 8px;
  font-size: 14px;
}
}
/* ******************************************************************************
*********************************************************************************
This file contains all the neccessary styles for your blog. The styles included
are for the listing and post templates, featured images and pagination.
Also for the post meta infromation like tags, author and published date
*********************************************************************************
****************************************************************************** */

/* TODO: Find a better place for this */
.content-wrapper {
  max-width: 1240px;
  padding: 0 8px;
  margin: 0 auto;
}

.blog-header {
  text-align: center;
  padding: 10px;
}

@media screen and (max-width: 600px){
  .blog-wrapper{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
.blog-index h2 a{
  color: inherit;
}
.blog-index {
  display: flex;
  flex-wrap: wrap;
  padding: 3.3rem 0;
}
.blog-index a:hover{
  text-decoration: none;
}
.blog-index:after {
  content: "";
  flex: auto;
}
.blog-index__tag-header {
  flex: 1 0 100%;
  padding: 1rem;
}
.blog-index__tag-subtitle {
  font-size: 1.16rem;
  line-height: 1.1;
}
.blog-index__tag-heading {
  padding-bottom: 1rem;
  border-bottom: 3px solid #D1D6DC;
}
.blog-index__post {
  flex:  0 0 100%;
  padding: 1rem;
}
@media screen and (min-width: 768px) {
  .blog-index__post {
    flex:  0 0 calc(100%/2);
  }
}
@media screen and (min-width: 1000px) {
  .blog-index__post {
    flex:  0 0 calc(100%/3);
  }
}
@media screen and (min-width: 768px) {
  .blog-index__post--large {
    flex: 1 0 100%;
    display: flex;
    justify-items: space-between;
  }
}
.blog-index__post-image {
  display: block;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding-bottom: 63%;
  background-image: url('./images/grayscale-mountain.png');
}
@media screen and (min-width: 768px) {
  .blog-index__post-image--large {
    flex: 1 1 100%;
    padding-bottom: 0;
  }
  .blog-index__post-content--large {
    flex: 1 1 100%;
    padding-left: 2rem;
  }
  .blog-index__post-image--large {
    flex: 1 1 48%;
  }
  .blog-index__post-content--large {
    flex: 1 1 48%;
    padding-left: 2rem;
  }
}
.blog-index__post-content h2 {
  margin: .5rem 0;
}
.blog-index__post-content--small h2 {
  font-size: 1.25rem;
}
.blog-index__post-content p {
  font-family: Lato, sans-serif;
}
.blog-index__post-content a {
  color: #494a52;
}
.blog-index__post img {
  max-width: 100%;
  height: auto;
}
.blog-post__body img {
  width: auto !important;
  margin: 0 !important;
}
.comment-date {
  display: block !important;
}
.blog-recent-posts__list a:hover {
  color: inherit;
}
.blog-pagination {
  display: flex !important;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 !important;
  padding-bottom: 3.3rem;
}
.blog-pagination__link {
  display: inline-flex;
  padding: .25rem .4rem;
  margin: 0 .1rem;
  color: #494a52;
  text-decoration: none;
  border: 2px solid transparent;
  line-height: 1;
  border-radius: 7px;
}
.blog-pagination__link--active {
  border: 2px solid #B0C1D4;
}
.blog-pagination__link:hover,
.blog-pagination__link:focus {
  text-decoration: none;
}
.blog-pagination__prev-link,
.blog-pagination__next-link {
  display: inline-flex;
  align-items: center;
}
.blog-pagination__prev-link {
  text-align: right;
  margin-right: .25rem;
}
.blog-pagination__next-link {
  text-align: left;
  margin-left: .25rem;
}
.blog-pagination__prev-link--disabled,
.blog-pagination__next-link--disabled {
  color: #B0C1D4;
  pointer-events: none;
  cursor: default;
}
.blog-pagination__prev-link svg,
.blog-pagination__next-link svg {
  fill: #494a52;
  margin: 0 5px;
}
.blog-pagination__prev-link--disabled svg,
.blog-pagination__next-link--disabled svg {
  fill: #B0C1D4;
}
.blog-pagination__number-link:hover,
.blog-pagination__number-link:focus {
  border: 2px solid #B0C1D4;
}
.blog-header {
  text-align: center;
}
.blog-header__author-avatar {
  height: 200px;
  width: 200px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 50%;
  box-shadow: 0 0 12px 0 rgba(0,0,0,0.15);
  margin: 0 auto 1.5rem;
}
.blog-header__author-social-links a {
  display: inline-block;
  position: relative;
  background-color: #000;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin: 0 5px;
}
.blog-header__author-social-links a:hover {
  background-color: #494a52;
}
.blog-header__author-social-links svg {
  fill: #fff;
  height: 15px;
  width: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.blog-post {
  max-width: 960px;
  margin: 0 auto;
  padding: 3.3rem 0;
}
.blog-post h1 {
  font-size: 1.6rem;
}
.blog-post__meta {
  margin: 1rem 0;
}
.blog-post__meta a {
  color: #494a52;
  text-decoration: underline;
}

.blog-post__tags {
  color: #000;
  padding: 10px 0;
}
.blog-post__tags svg {
  width: 15px;
  height: auto;
  margin-right: 10px;
}
.blog-post__tag-link {
  font-size: .8rem;
  color: #000;
}
.blog-recent-posts__post{
  color: inherit;
}
.blog-recent-posts {
  margin-top: 3rem;
  padding: 2rem 0;
}
.blog-recent-posts h2 {
  text-align: center;
}
.blog-recent-posts__list {
  display: flex;
  flex-wrap: wrap;
}
.blog-recent-posts__post {
  display: block;
  flex:  0 0 100%;
  padding: 1rem;
}
@media screen and (min-width: 768px) {
  .blog-recent-posts__post {
    flex:  0 0 calc(100%/2);
  }
}
@media screen and (min-width: 1000px) {
  .blog-recent-posts__post {
    flex:  0 0 calc(100%/3);
  }
}
.blog-recent-posts__post:hover {
  text-decoration: none;
}
.blog-recent-posts__image {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding-bottom: 63%;
}
.blog-recent-posts__title {
  margin: 1rem 0 .5rem;
}

.blog-comments {

}
.blog-comments form {

}
.blog-comments .hs-submit {

}
.blog-comments .hs-button {

}
.blog-comments .hs-button:hover {

}
.blog-comments .comment-reply-to {
  border: 0 none;
}
.blog-comments .comment-reply-to:hover {
  background-color: transparent;
  text-decoration: underline;
  color: #494A52;
}


/*             Blog Listing with Sidebar            */
.post-item .page-center{
  display: -webkit-flex; /* Safari */
  display: flex; /* Standard syntax */
  margin-bottom: 20px;
}
.post-item .page-center .span4, .post-item .page-center .span8 {
-webkit-flex: 1; /* Safari */
-ms-flex: 1; /* IE 10 */
flex: 1; /* Standard syntax */
}
.post-item .page-center .span8 {
flex-basis: 31.914893614%;

}
img.featured-image {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover;
}
.blog-sidebar.span3 {
  padding: 3.3rem 0;
}
@media(max-width: 480px){
  .blog-post img {
    width: 100% !important;
    float: none !important;
  }
}
@media(max-width: 767px){
  .post-item .page-center{
    display: block;
  }
}
/* ******************************************************************************
*********************************************************************************
This file contains all the neccessary styles to control how your
system pages look. These pages include the error pages (404 and 500),
password protected content and search listing results.
*********************************************************************************
****************************************************************************** */

.error-page {
  padding: 10rem 0;
  text-align: center;
  position: relative;
}
.error-page:before {
  content: attr(data-error);
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: Lato, sans-serif;
  font-size: 40vw;
  font-weight: bold;
  color: #F3F6F9;
  z-index: -1;
}
@media screen and (min-width: 1100px) {
  .error-page:before {
    font-size: 20rem;
  }
}
.error-page_heading {
  margin-bottom: 1rem;
}

.systems-page {
  padding: 3rem 20px;
}
.systems-page .success {
  display: inline-block;
  margin: 2rem 0;
  background-color: #CDE3CC;
  border: 1.5px solid #4F7D24;
  border-radius: 6px;
  color: #4F7D24;
  padding: .1rem .75rem;
}
.systems-page ul{
  padding: 0;
}
.systems-page .hs-form-field {
  margin-bottom: 18px;
}

.hs-search-results {
  margin-top: 2rem;
}
ul.hs-search-results__listing li {
  margin-bottom: 2rem;
}
.hs-search-results__title {
  font-family: Merriweather, serif;
  font-size: 1.25rem;
  color: #494a52;
  text-decoration: underline;
  margin-bottom: .25rem;
}
.hs-search-results__title:hover {
  text-decoration: none;
}
.hs-search-results__description {
  padding-top: .5rem;
}
.hs-search-highlight {
  font-weight: bold;
}
.hs-search-results__pagination a {
  color: #494a52;
}

.email-prefs .item.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.email-prefs .item.disabled input:disabled {
  cursor: not-allowed;
}