html,
body {
  padding: 0;
  margin: 0;
  font-family: Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  scroll-behavior: smooth;
  color: #525252;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
  font-family: Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

input, textarea, select, button {
  font-family: Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

img {
  image-rendering: -webkit-optimize-contrast;
}

.sp-display-none {
  display: none;
}
@media screen and (min-width: 960px) {
  .sp-display-none {
    display: block;
  }
}

.pc-display-none {
  display: block;
}
@media screen and (min-width: 960px) {
  .pc-display-none {
    display: none;
  }
}

.primary_color {
  color: #3897F8;
}

.secondary_color {
  background-color: #FF4180;
}

.white_color {
  color: #ffffff;
}

.primary_background {
  background-color: #3897F8;
}

.primary_variant_background {
  background-color: #2648A4;
}

.primary_variant_color {
  color: #2648A4;
}

.secondary_background {
  background-color: #FF4180;
}

.secondary_background_2 {
  background-color: #FF6598;
}

.secondary_color_2 {
  color: #FF6598;
}

.text_color {
  color: #525252;
}

.background_1 {
  background-color: #E4F2FE;
}

.background_2 {
  background-color: #ffffff;
}

.primary_variant_background {
  background-color: #2D66C4;
}

.primary_variant_color {
  color: #2D66C4;
}

.background {
  background: rgba(228, 242, 254, 0.4);
}

.error_color {
  color: #FF6161;
}

.yellow_variant_color {
  background: #FEEDBB;
}

._bold {
  font-weight: bold;
}
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/* Slider */
.slick-loading .slick-list
{
    background: #fff url(/_next/static/media/ajax-loader.fb6f3c230cb846e25247dfaa1da94d8f.gif) center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url(/_next/static/media/slick.a4e97f5a2a64f0ab132323fbeb33ae29.eot);
    src: url(/_next/static/media/slick.a4e97f5a2a64f0ab132323fbeb33ae29.eot?#iefix) format('embedded-opentype'), url(/_next/static/media/slick.295183786cd8a138986521d9f388a286.woff) format('woff'), url(/_next/static/media/slick.c94f7671dcc99dce43e22a89f486f7c2.ttf) format('truetype'), url(/_next/static/media/slick.2630a3e3eab21c607e21576571b95b9d.svg#slick) format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}

.ReactCrop {
  position: relative;
  display: inline-block;
  cursor: crosshair;
  overflow: hidden;
  max-width: 100%; }
  .ReactCrop:focus {
    outline: none; }
  .ReactCrop--disabled, .ReactCrop--locked {
    cursor: inherit; }
  .ReactCrop {
    display: block;
    max-width: 100%;
    touch-action: manipulation; }
  .ReactCropselection {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate3d(0, 0, 0);
    box-sizing: border-box;
    cursor: move;
    box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5);
    touch-action: manipulation;
    border: 1px solid;
    border-image-source: url("data:image/gif;base64,R0lGODlhCgAKAJECAAAAAP///////wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEI5RDc5MTFDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEI5RDc5MTBDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEBQoAAgAsAAAAAAoACgAAAhWEERkn7W3ei7KlagMWF/dKgYeyGAUAIfkEBQoAAgAsAAAAAAoACgAAAg+UYwLJ7RnQm7QmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYgLJHdiinNSAVfOEKoUCACH5BAUKAAIALAAAAAAKAAoAAAIRVISAdusPo3RAzYtjaMIaUQAAIfkEBQoAAgAsAAAAAAoACgAAAg+MDiem7Q8bSLFaG5il6xQAIfkEBQoAAgAsAAAAAAoACgAAAg+UYRLJ7QnQm7SmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYBLJDdiinNSEVfOEKoECACH5BAUKAAIALAAAAAAKAAoAAAIRFISBdusPo3RBzYsjaMIaUQAAOw==");
    border-image-slice: 1;
    border-image-repeat: repeat; }
    .ReactCrop--disabled .ReactCropselection {
      cursor: inherit; }
    .ReactCrop--circular-crop .ReactCropselection {
      border-radius: 50%;
      box-shadow: 0px 0px 1px 1px white, 0 0 0 9999em rgba(0, 0, 0, 0.5); }
  .ReactCrop--invisible-crop .ReactCropselection {
    display: none; }
  .ReactCropof-thirds-vt::before, .ReactCropof-thirds-vt::after, .ReactCropof-thirds-hz::before, .ReactCropof-thirds-hz::after {
    content: '';
    display: block;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.4); }
  .ReactCropof-thirds-vt::before, .ReactCropof-thirds-vt::after {
    width: 1px;
    height: 100%; }
  .ReactCropof-thirds-vt::before {
    left: 33.3333%;
    left: calc(100% / 3); }
  .ReactCropof-thirds-vt::after {
    left: 66.6666%;
    left: calc(100% / 3 * 2); }
  .ReactCropof-thirds-hz::before, .ReactCropof-thirds-hz::after {
    width: 100%;
    height: 1px; }
  .ReactCropof-thirds-hz::before {
    top: 33.3333%;
    top: calc(100% / 3); }
  .ReactCropof-thirds-hz::after {
    top: 66.6666%;
    top: calc(100% / 3 * 2); }
  .ReactCrophandle {
    position: absolute; }
    .ReactCrophandle::after {
      position: absolute;
      content: '';
      display: block;
      width: 10px;
      height: 10px;
      background-color: rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.7);
      box-sizing: border-box;
      outline: 1px solid transparent; }
  .ReactCrop .ord-nw {
    top: 0;
    left: 0;
    margin-top: -5px;
    margin-left: -5px;
    cursor: nw-resize; }
    .ReactCrop .ord-nw::after {
      top: 0;
      left: 0; }
  .ReactCrop .ord-n {
    top: 0;
    left: 50%;
    margin-top: -5px;
    margin-left: -5px;
    cursor: n-resize; }
    .ReactCrop .ord-n::after {
      top: 0; }
  .ReactCrop .ord-ne {
    top: 0;
    right: 0;
    margin-top: -5px;
    margin-right: -5px;
    cursor: ne-resize; }
    .ReactCrop .ord-ne::after {
      top: 0;
      right: 0; }
  .ReactCrop .ord-e {
    top: 50%;
    right: 0;
    margin-top: -5px;
    margin-right: -5px;
    cursor: e-resize; }
    .ReactCrop .ord-e::after {
      right: 0; }
  .ReactCrop .ord-se {
    bottom: 0;
    right: 0;
    margin-bottom: -5px;
    margin-right: -5px;
    cursor: se-resize; }
    .ReactCrop .ord-se::after {
      bottom: 0;
      right: 0; }
  .ReactCrop .ord-s {
    bottom: 0;
    left: 50%;
    margin-bottom: -5px;
    margin-left: -5px;
    cursor: s-resize; }
    .ReactCrop .ord-s::after {
      bottom: 0; }
  .ReactCrop .ord-sw {
    bottom: 0;
    left: 0;
    margin-bottom: -5px;
    margin-left: -5px;
    cursor: sw-resize; }
    .ReactCrop .ord-sw::after {
      bottom: 0;
      left: 0; }
  .ReactCrop .ord-w {
    top: 50%;
    left: 0;
    margin-top: -5px;
    margin-left: -5px;
    cursor: w-resize; }
    .ReactCrop .ord-w::after {
      left: 0; }
  .ReactCropled .ReactCrophandle {
    cursor: inherit; }
  .ReactCropbar {
    position: absolute; }
    .ReactCropbar.ord-n {
      top: 0;
      left: 0;
      width: 100%;
      height: 6px;
      margin-top: -3px; }
    .ReactCropbar.ord-e {
      right: 0;
      top: 0;
      width: 6px;
      height: 100%;
      margin-right: -3px; }
    .ReactCropbar.ord-s {
      bottom: 0;
      left: 0;
      width: 100%;
      height: 6px;
      margin-bottom: -3px; }
    .ReactCropbar.ord-w {
      top: 0;
      left: 0;
      width: 6px;
      height: 100%;
      margin-left: -3px; }
  .ReactCrop--new-crop .ReactCropbar,
  .ReactCrop--new-crop .ReactCrophandle,
  .ReactCrop--fixed-aspect .ReactCropbar {
    display: none; }
  .ReactCrop--fixed-aspect .ReactCrophandle.ord-n,
  .ReactCrop--fixed-aspect .ReactCrophandle.ord-e,
  .ReactCrop--fixed-aspect .ReactCrophandle.ord-s,
  .ReactCrop--fixed-aspect .ReactCrophandle.ord-w {
    display: none; }
  @media (pointer: coarse) {
    .ReactCrop .ord-n,
    .ReactCrop .ord-e,
    .ReactCrop .ord-s,
    .ReactCrop .ord-w {
      display: none; }
    .ReactCrophandle {
      width: 24px;
      height: 24px; } }

.PresetDateRangePicker_panel {
  padding: 0 22px 11px
}
.PresetDateRangePicker_button {
  position: relative;
  height: 100%;
  text-align: center;
  background: 0 0;
  border: 2px solid #00a699;
  color: #00a699;
  padding: 4px 12px;
  margin-right: 8px;
  font: inherit;
  font-weight: 700;
  line-height: normal;
  overflow: visible;
  box-sizing: border-box;
  cursor: pointer
}
.PresetDateRangePicker_button:active {
  outline: 0
}
.PresetDateRangePicker_buttonted {
  color: #fff;
  background: #00a699
}
.SingleDatePickerInput {
  display: inline-block;
  background-color: #fff
}
.SingleDatePickerInputorder {
  border-radius: 2px;
  border: 1px solid #dbdbdb
}
.SingleDatePickerInput{
  direction: rtl
}
.SingleDatePickerInputled {
  background-color: #f2f2f2
}
.SingleDatePickerInput {
  display: block
}
.SingleDatePickerInputlearDate {
  padding-right: 30px
}
.SingleDatePickerInput_clearDate {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  padding: 10px;
  margin: 0 10px 0 5px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%)
}
.SingleDatePickerInput_clearDatelt:focus,
.SingleDatePickerInput_clearDatelt:hover {
  background: #dbdbdb;
  border-radius: 50%
}
.SingleDatePickerInput_clearDate {
  padding: 6px
}
.SingleDatePickerInput_clearDate{
  visibility: hidden
}
.SingleDatePickerInput_clearDate_svg {
  fill: #82888a;
  height: 12px;
  width: 15px;
  vertical-align: middle
}
.SingleDatePickerInput_clearDate_svg {
  height: 9px
}
.SingleDatePickerInput_calendarIcon {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  margin: 0 5px 0 10px
}
.SingleDatePickerInput_calendarIcon_svg {
  fill: #82888a;
  height: 15px;
  width: 14px;
  vertical-align: middle
}
.SingleDatePicker {
  position: relative;
  display: inline-block
}
.SingleDatePicker {
  display: block
}
.SingleDatePicker_picker {
  z-index: 1;
  background-color: #fff;
  position: absolute
}
.SingleDatePicker_picker {
  direction: rtl
}
.SingleDatePicker_pickertionLeft {
  left: 0
}
.SingleDatePicker_pickertionRight {
  right: 0
}
.SingleDatePicker_pickerl {
  background-color: rgba(0,0,0,.3);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%
}
.SingleDatePicker_pickercreenPortal {
  background-color: #fff
}
.SingleDatePicker_closeButton {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  z-index: 2
}
.SingleDatePicker_closeButton:focus,
.SingleDatePicker_closeButton:hover {
  color: darken(#cacccd,10%);
  text-decoration: none
}
.SingleDatePicker_closeButton_svg {
  height: 15px;
  width: 15px;
  fill: #cacccd
}
.DayPickerKeyboardShortcuts_buttonReset {
  background: 0 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  cursor: pointer;
  font-size: 14px
}
.DayPickerKeyboardShortcuts_buttonReset:active {
  outline: 0
}
.DayPickerKeyboardShortcuts_show {
  width: 33px;
  height: 26px;
  position: absolute;
  z-index: 2
}
.DayPickerKeyboardShortcuts_show::before {
  content: "";
  display: block;
  position: absolute
}
.DayPickerKeyboardShortcuts_showmRight {
  bottom: 0;
  right: 0
}
.DayPickerKeyboardShortcuts_showmRight::before {
  border-top: 26px solid transparent;
  border-right: 33px solid #00a699;
  bottom: 0;
  right: 0
}
.DayPickerKeyboardShortcuts_showmRight:hover::before {
  border-right: 33px solid #008489
}
.DayPickerKeyboardShortcuts_showght {
  top: 0;
  right: 0
}
.DayPickerKeyboardShortcuts_showght::before {
  border-bottom: 26px solid transparent;
  border-right: 33px solid #00a699;
  top: 0;
  right: 0
}
.DayPickerKeyboardShortcuts_showght:hover::before {
  border-right: 33px solid #008489
}
.DayPickerKeyboardShortcuts_showft {
  top: 0;
  left: 0
}
.DayPickerKeyboardShortcuts_showft::before {
  border-bottom: 26px solid transparent;
  border-left: 33px solid #00a699;
  top: 0;
  left: 0
}
.DayPickerKeyboardShortcuts_showft:hover::before {
  border-left: 33px solid #008489
}
.DayPickerKeyboardShortcuts_showSpan {
  color: #fff;
  position: absolute
}
.DayPickerKeyboardShortcuts_showSpanmRight {
  bottom: 0;
  right: 5px
}
.DayPickerKeyboardShortcuts_showSpanght {
  top: 1px;
  right: 5px
}
.DayPickerKeyboardShortcuts_showSpanft {
  top: 1px;
  left: 5px
}
.DayPickerKeyboardShortcuts_panel {
  overflow: auto;
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 2;
  padding: 22px;
  margin: 33px;
  text-align: left
}
.DayPickerKeyboardShortcuts_title {
  font-size: 16px;
  font-weight: 700;
  margin: 0
}
.DayPickerKeyboardShortcuts_list {
  list-style: none;
  padding: 0;
  font-size: 14px
}
.DayPickerKeyboardShortcuts_close {
  position: absolute;
  right: 22px;
  top: 22px;
  z-index: 2
}
.DayPickerKeyboardShortcuts_close:active {
  outline: 0
}
.DayPickerKeyboardShortcuts_closeSvg {
  height: 15px;
  width: 15px;
  fill: #cacccd
}
.DayPickerKeyboardShortcuts_closeSvg:focus,
.DayPickerKeyboardShortcuts_closeSvg:hover {
  fill: #82888a
}
.CalendarDay {
  box-sizing: border-box;
  cursor: pointer;
  font-size: 14px;
  text-align: center
}
.CalendarDay:active {
  outline: 0
}
.CalendarDayltCursor {
  cursor: default
}
.CalendarDaylt {
  border: 1px solid #e4e7e7;
  color: #484848;
  background: #fff
}
.CalendarDaylt:hover {
  background: #e4e7e7;
  border: 1px solid #e4e7e7;
  color: inherit
}
.CalendarDayed_offset {
  background: #f4f5f5;
  border: 1px double #e4e7e7;
  color: inherit
}
.CalendarDayde {
  border: 0;
  background: #fff;
  color: #484848
}
.CalendarDayde:hover {
  border: 0
}
.CalendarDayed_minimum_nights {
  background: #fff;
  border: 1px solid #eceeee;
  color: #cacccd
}
.CalendarDayed_minimum_nights:active,
.CalendarDayed_minimum_nights:hover {
  background: #fff;
  color: #cacccd
}
.CalendarDayighted_calendar {
  background: #ffe8bc;
  color: #484848
}
.CalendarDayighted_calendar:active,
.CalendarDayighted_calendar:hover {
  background: #ffce71;
  color: #484848
}
.CalendarDayted_span {
  background: #66e2da;
  border: 1px double #33dacd;
  color: #fff
}
.CalendarDayted_span:active,
.CalendarDayted_span:hover {
  background: #33dacd;
  border: 1px double #33dacd;
  color: #fff
}
.CalendarDayted,
.CalendarDayted:active,
.CalendarDayted:hover {
  background: #00a699;
  border: 1px double #00a699;
  color: #fff
}
.CalendarDayed_span,
.CalendarDayed_span:hover {
  background: #b2f1ec;
  border: 1px double #80e8e0;
  color: #007a87
}
.CalendarDayed_span:active {
  background: #80e8e0;
  border: 1px double #80e8e0;
  color: #007a87
}
.CalendarDayed_calendar,
.CalendarDayed_calendar:active,
.CalendarDayed_calendar:hover {
  background: #cacccd;
  border: 1px solid #cacccd;
  color: #82888a
}
.CalendarDayed_out_of_range,
.CalendarDayed_out_of_range:active,
.CalendarDayed_out_of_range:hover {
  background: #fff;
  border: 1px solid #e4e7e7;
  color: #cacccd
}
.CalendarDayed_start_first_possible_end {
  background: #eceeee;
  border: 1px double #eceeee
}
.CalendarDayed_start_blocked_min_nights {
  background: #eceeee;
  border: 1px double #e4e7e7
}
.CalendarMonth {
  background: #fff;
  text-align: center;
  vertical-align: top;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}
.CalendarMonth_table {
  border-collapse: collapse;
  border-spacing: 0
}
.CalendarMonth_verticalSpacing {
  border-collapse: separate
}
.CalendarMonth_caption {
  color: #484848;
  font-size: 18px;
  text-align: center;
  padding-top: 22px;
  padding-bottom: 37px;
  caption-side: top;
  caption-side: initial
}
.CalendarMonth_captioncalScrollable {
  padding-top: 12px;
  padding-bottom: 7px
}
.CalendarMonthGrid {
  background: #fff;
  text-align: left;
  z-index: 0
}
.CalendarMonthGridting {
  z-index: 1
}
.CalendarMonthGridontal {
  position: absolute;
  left: 9px
}
.CalendarMonthGridcal,
.CalendarMonthGridcal_scrollable {
  margin: 0 auto
}
.CalendarMonthGrid_monthontal {
  display: inline-block;
  vertical-align: top;
  min-height: 100%
}
.CalendarMonthGrid_monthorAnimation {
  position: absolute;
  z-index: -1;
  opacity: 0;
  pointer-events: none
}
.CalendarMonthGrid_monthn {
  visibility: hidden
}
.DayPickerNavigation {
  position: relative;
  z-index: 2
}
.DayPickerNavigationontal {
  height: 0
}
.DayPickerNavigationcalScrollable_prevNav {
  z-index: 1
}
.DayPickerNavigationcalDefault {
  position: absolute;
  width: 100%;
  height: 52px;
  bottom: 0;
  left: 0
}
.DayPickerNavigationcalScrollableDefault {
  position: relative
}
.DayPickerNavigationm {
  height: auto
}
.DayPickerNavigationmDefault {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  display: flex;
  justify-content: space-between
}
.DayPickerNavigation_button {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 0;
  padding: 0;
  margin: 0
}
.DayPickerNavigation_buttonlt {
  border: 1px solid #e4e7e7;
  background-color: #fff;
  color: #757575
}
.DayPickerNavigation_buttonlt:focus,
.DayPickerNavigation_buttonlt:hover {
  border: 1px solid #c4c4c4
}
.DayPickerNavigation_buttonlt:active {
  background: #f2f2f2
}
.DayPickerNavigation_buttonled {
  cursor: default;
  border: 1px solid #f2f2f2
}
.DayPickerNavigation_buttonled:focus,
.DayPickerNavigation_buttonled:hover {
  border: 1px solid #f2f2f2
}
.DayPickerNavigation_buttonled:active {
  background: 0 0
}
.DayPickerNavigation_buttonontalDefault {
  position: absolute;
  top: 18px;
  line-height: .78;
  border-radius: 3px;
  padding: 6px 9px
}
.DayPickerNavigation_bottomButtonontalDefault {
  position: static;
  margin: -10px 22px 30px
}
.DayPickerNavigation_leftButtonontalDefault {
  left: 22px
}
.DayPickerNavigation_rightButtonontalDefault {
  right: 22px
}
.DayPickerNavigation_buttoncalDefault {
  padding: 5px;
  background: #fff;
  box-shadow: 0 0 5px 2px rgba(0,0,0,.1);
  position: relative;
  display: inline-block;
  text-align: center;
  height: 100%;
  width: 50%
}
.DayPickerNavigation_nextButtoncalDefault {
  border-left: 0
}
.DayPickerNavigation_nextButtoncalScrollableDefault,
.DayPickerNavigation_prevButtoncalScrollableDefault {
  width: 100%
}
.DayPickerNavigation_svgontal {
  height: 19px;
  width: 19px;
  fill: #82888a;
  display: block
}
.DayPickerNavigation_svgcal {
  height: 42px;
  width: 42px;
  fill: #484848
}
.DayPickerNavigation_svgled {
  fill: #f2f2f2
}
.DayPicker {
  background: #fff;
  position: relative;
  text-align: left
}
.DayPickerontal {
  background: #fff
}
.DayPickercalScrollable {
  height: 100%
}
.DayPickern {
  visibility: hidden
}
.DayPickerorder {
  box-shadow: 0 2px 6px rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.07);
  border-radius: 3px
}
.DayPicker_portalontal {
  box-shadow: none;
  position: absolute;
  left: 50%;
  top: 50%
}
.DayPicker_portalcal {
  position: static;
  position: initial
}
.DayPicker_focusRegion {
  outline: 0
}
.DayPicker_calendarInfoontal,
.DayPicker_wrapperontal {
  display: inline-block;
  vertical-align: top
}
.DayPicker_weekHeaders {
  position: relative
}
.DayPicker_weekHeadersontal {
  margin-left: 9px
}
.DayPicker_weekHeader {
  color: #757575;
  position: absolute;
  top: 62px;
  z-index: 2;
  text-align: left
}
.DayPicker_weekHeadercal {
  left: 50%
}
.DayPicker_weekHeadercalScrollable {
  top: 0;
  display: table-row;
  border-bottom: 1px solid #dbdbdb;
  background: #fff;
  margin-left: 0;
  left: 0;
  width: 100%;
  text-align: center
}
.DayPicker_weekHeader_ul {
  list-style: none;
  margin: 1px 0;
  padding-left: 0;
  padding-right: 0;
  font-size: 14px
}
.DayPicker_weekHeader_li {
  display: inline-block;
  text-align: center
}
.DayPicker_transitionContainer {
  position: relative;
  overflow: hidden;
  border-radius: 3px
}
.DayPicker_transitionContainerontal {
  transition: height .2s ease-in-out
}
.DayPicker_transitionContainercal {
  width: 100%
}
.DayPicker_transitionContainercalScrollable {
  padding-top: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow-y: scroll
}
.DateInput {
  margin: 0;
  padding: 0;
  background: #fff;
  position: relative;
  display: inline-block;
  width: 130px;
  vertical-align: middle
}
.DateInput {
  width: 97px
}
.DateInput {
  width: 100%
}
.DateInputled {
  background: #f2f2f2;
  color: #dbdbdb
}
.DateInput_input {
  font-weight: 200;
  font-size: 19px;
  line-height: 24px;
  color: #484848;
  background-color: #fff;
  width: 100%;
  padding: 11px 11px 9px;
  border: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 2px solid transparent;
  border-left: 0;
  border-radius: 0
}
.DateInput_input {
  font-size: 15px;
  line-height: 18px;
  letter-spacing: .2px;
  padding: 7px 7px 5px
}
.DateInput_inputar {
  font-weight: auto
}
.DateInput_inputnly {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}
.DateInput_inputed {
  outline: 0;
  background: #fff;
  border: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 2px solid #008489;
  border-left: 0
}
.DateInput_inputled {
  background: #f2f2f2;
  font-style: italic
}
.DateInput_screenReaderMessage {
  border: 0;
  clip: rect(0,0,0,0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px
}
.DateInput_fang {
  position: absolute;
  width: 20px;
  height: 10px;
  left: 22px;
  z-index: 2
}
.DateInput_fangShape {
  fill: #fff
}
.DateInput_fangStroke {
  stroke: #dbdbdb;
  fill: transparent
}
.DateRangePickerInput {
  background-color: #fff;
  display: inline-block
}
.DateRangePickerInputled {
  background: #f2f2f2
}
.DateRangePickerInputorder {
  border-radius: 2px;
  border: 1px solid #dbdbdb
}
.DateRangePickerInput {
  direction: rtl
}
.DateRangePickerInput {
  display: block
}
.DateRangePickerInputlearDates {
  padding-right: 30px
}
.DateRangePickerInput_arrow {
  display: inline-block;
  vertical-align: middle;
  color: #484848
}
.DateRangePickerInput_arrow_svg {
  vertical-align: middle;
  fill: #484848;
  height: 24px;
  width: 24px
}
.DateRangePickerInput_clearDates {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  padding: 10px;
  margin: 0 10px 0 5px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%)
}
.DateRangePickerInput_clearDates {
  padding: 6px
}
.DateRangePickerInput_clearDates_default:focus,
.DateRangePickerInput_clearDates_default:hover {
  background: #dbdbdb;
  border-radius: 50%
}
.DateRangePickerInput_clearDates{
  visibility: hidden
}
.DateRangePickerInput_clearDates_svg {
  fill: #82888a;
  height: 12px;
  width: 15px;
  vertical-align: middle
}
.DateRangePickerInput_clearDates_svg {
  height: 9px
}
.DateRangePickerInput_calendarIcon {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  margin: 0 5px 0 10px
}
.DateRangePickerInput_calendarIcon_svg {
  fill: #82888a;
  height: 15px;
  width: 14px;
  vertical-align: middle
}
.DateRangePicker {
  position: relative;
  display: inline-block
}
.DateRangePicker {
  display: block
}
.DateRangePicker_picker {
  z-index: 1;
  background-color: #fff;
  position: absolute
}
.DateRangePicker_picker {
  direction: rtl
}
.DateRangePicker_pickertionLeft {
  left: 0
}
.DateRangePicker_pickertionRight {
  right: 0
}
.DateRangePicker_pickerl {
  background-color: rgba(0,0,0,.3);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%
}
.DateRangePicker_pickercreenPortal {
  background-color: #fff
}
.DateRangePicker_closeButton {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  z-index: 2
}
.DateRangePicker_closeButton:focus,
.DateRangePicker_closeButton:hover {
  color: darken(#cacccd,10%);
  text-decoration: none
}
.DateRangePicker_closeButton_svg {
  height: 15px;
  width: 15px;
  fill: #cacccd
}
/* fonts */
/* contents width */
/* break points */
.layout_layout {
  width: 100%;
}

.layout_show {
  overflow: hidden;
}

/* header */
.layout_header {
  height: 72px;
  padding: 0 0 0 16px;
  background-color: #ffffff;
  display: grid;
  grid-template-areas: "logo logo logo logo keep menu";
}

.layout_logo_container {
  grid-column: logo;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.layout_menu_container {
  font-size: 14px;
  color: #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.layout_menu_icon {
  margin: 8px;
}
.layout_menu_icon_keep > i {
  color: #FF6598;
}

/* global navigation */
.layout_global_navi_container {
  padding: 0 16px;
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto;
}
.layout_global_navi_container .layout_navi_col {
  cursor: pointer;
  height: 34px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0;
}
.layout_global_navi_container .layout_navi_col .layout_icon {
  padding: 0 6px 0 0;
}
.layout_global_navi_container > .layout_border_right {
  border-right: 1px solid rgba(82, 82, 82, 0.6);
}

.layout_breadcrumb {
  padding: 16px 0;
}

/* footer */
.layout_footer_pc {
  display: none;
}
.layout_footer_sp {
  display: block;
}

.layout_footer_menu {
  border-top: 1px solid #ffffff;
}

.layout_footer_menu_title {
  height: 56px;
  padding: 0 16px 0 24px;
  font-size: 16px;
  font-weight: 500;
  line-height: 56px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.layout_footer_menu_title .layout_icon_add {
  display: block;
}
.layout_footer_menu_title .layout_icon_remove {
  display: none;
}

.layout_footer_menu_input {
  display: none;
}
.layout_footer_menu_input:checked + label .layout_footer_menu_title .layout_icon_add {
  display: none;
}
.layout_footer_menu_input:checked + label .layout_footer_menu_title .layout_icon_remove {
  display: block;
}
.layout_footer_menu_input:checked ~ .layout_footer_menu .layout_footer_item {
  height: 40px;
  border-bottom: 1px solid #ffffff;
}

.layout_footer_item {
  height: 0px;
  background-color: #ffffff;
  padding-left: 40px;
  cursor: pointer;
  overflow: hidden;
  line-height: 40px;
  transition: all 0.5s;
}

.layout_copyright {
  background-color: #ffffff;
  font-size: 10px;
  text-align: center;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 960px) {
  .layout_footer_pc {
    display: block;
    padding: 64px 16px;
    background-color: #2D66C4;
  }
  .layout_footer_pc_inner {
    max-width: 1080px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 16px;
    gap: 16px;
  }
  .layout_footer_pc_title {
    font-size: 20px;
    font-weight: bold;
    color: #BDDFFD;
    margin-bottom: 8px;
  }
  .layout_footer_pc_link {
    margin: 8px 0;
    color: #ffffff;
    display: flex;
  }
  .layout_footer_pc_link:hover {
    opacity: 0.7;
  }
  .layout_footer_pc_link .layout_link_icon {
    vertical-align: bottom;
    color: #BDDFFD;
  }
  .layout_footer_sp {
    display: none;
  }
}
/* main contents settings */
.layout_isPadding {
  padding: 0 16px 60px;
}

.layout_outsideCard > div {
  box-shadow: 0px 0px 10px 0.2px rgba(45, 102, 196, 0.1);
  border-radius: 8px;
  background: #ffffff;
}

.layout_tvinterview_button {
  position: fixed;
  right: 0;
  bottom: 200px;
}

.layout_page_top {
  cursor: pointer;
  position: fixed;
  right: 0;
  bottom: 80px;
}

.layout_pc {
  display: block;
}

.layout_sp {
  display: none;
}

@media screen and (min-width: 1081px) {
  .layout_pc_hide {
    display: none !important;
  }

  .layout_header {
    grid-template-areas: none;
    grid-template-columns: auto auto auto auto auto auto auto auto;
    padding: 0 40px;
  }
  .layout_header > .layout_pc_header_col {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }
  .layout_header > .layout_active_col {
    color: #3897F8;
    border-bottom: 3px solid;
  }

  .layout_logo_container {
    grid-column: 1/span 4;
    justify-content: left;
  }

  .layout_global_navi_container {
    padding: 0 40px;
  }
  .layout_global_navi_container > .layout_breadcrumb {
    grid-column: 1/span 4;
  }

  .layout_breadcrumb {
    padding: 14px 0;
  }
}
@media screen and (max-width: 1080px) {
  .layout_tvinterview_button {
    bottom: 0px;
    width: 100%;
  }
  .layout_tvinterview_button > a > img {
    width: 100%;
  }

  .layout_pc {
    display: none;
  }

  .layout_sp {
    display: block;
  }

  .layout_sp_hide {
    display: none !important;
  }

  .layout_page_top {
    width: 12%;
    right: 2%;
    bottom: 90px;
    z-index: 9999;
  }
  .layout_page_top > img {
    width: 100%;
    opacity: 0.85;
  }

  .layout_header > .layout_pc_header_col {
    display: none;
  }

  .layout_global_navi_container > .layout_navi_col {
    display: none;
  }
}
.layout_related_company {
  width: 90%;
  max-width: 1144px;
  margin: 60px auto;
  display: none;
}
@media screen and (min-width: 960px) {
  .layout_related_company {
    display: block;
  }
}

.menu_menu_container {
  display: flex;
  position: fixed;
  z-index: 100;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.menu_menu {
  width: 80%;
  background: #ffffff;
  box-shadow: 0px 4px 4px rgba(82, 82, 82, 0.3);
  height: 100%;
  overflow: auto;
}

.menu_menu_outside {
  width: 20%;
  height: 100%;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.4);
  min-width: 50px;
  justify-content: center;
  display: flex;
}

.menu_menu_outside > div {
  margin-top: 100px;
}

.menu_menu_title {
  height: 56px;
  padding-left: 36px;
  padding-right: 16px;
  background-color: #2D66C4;
  color: #ffffff;
  line-height: 56px;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu_item_label {
  margin: 15px 0px;
}

.menu_hr {
  border-bottom: 1px solid #E0E0E0;
}

.menu_menu_item {
  height: 64px;
  display: flex;
  align-items: center;
  padding-left: 36px;
  cursor: pointer;
  color: #707070;
  font-size: 18px;
  background-color: #ffffff;
}

.menu_sub_menu {
  height: 64px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  font-weight: bold;
}

.menu-item_top_menu {
  height: 64px;
  display: flex;
  align-items: center;
  padding-left: 36px;
  cursor: pointer;
  color: #707070;
  font-size: 18px;
  background-color: #ffffff;
}
.menu-item_top_menu:hover {
  background-color: rgba(228, 242, 254, 0.4);
  color: #3897F8;
}
.menu-item_top_menu_active {
  color: #3897F8;
}

.logo_logo {
  height: 28px;
}
.logo_logo_img {
  height: 100%;
}
@media screen and (min-width: 960px) {
  .logo_logo {
    height: 40px;
  }
}

.breadcrumb_breadcrumb {
  font-size: 13px;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0;
}
.breadcrumb_breadcrumb > li > a {
  text-decoration: underline;
  cursor: pointer;
}

.related-company_inner {
  padding: 16px;
  display: grid;
  grid-gap: 16px 24px;
  gap: 16px 24px;
  font-size: 14px;
}
.related-company_inner .related-company_link {
  text-decoration: underline;
}

@media screen and (min-width: 960px) {
  .related-company_inner {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.accordion_accordion {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 10px 0.2px rgba(45, 102, 196, 0.25);
  overflow: hidden;
}
.accordion_accordion_shadow_none {
  box-shadow: none;
}
.accordion_accordion_shadow_none .accordion_accordion_title {
  box-shadow: none;
}
.accordion_accordion_trigger {
  display: none;
}
.accordion_accordion_trigger:checked ~ .accordion_accordion_inner {
  display: block;
}
.accordion_accordion_trigger:checked + label .accordion_accordion_title .accordion_icon_add {
  display: none;
}
.accordion_accordion_trigger:checked + label .accordion_accordion_title .accordion_icon_remove {
  display: inline;
}
.accordion_accordion_title {
  height: 60px;
  padding: 0 16px 0 24px;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 0 10px 0.2px rgba(45, 102, 196, 0.25);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}
.accordion_accordion_title:hover {
  cursor: pointer;
}
.accordion_accordion_title .accordion_icon {
  color: #3178D6;
}
.accordion_accordion_title .accordion_icon_add {
  display: inline;
}
.accordion_accordion_title .accordion_icon_remove {
  display: none;
}
.accordion_accordion_inner {
  display: none;
}

.modal_modal {
  display: none;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 16px;
  overflow: auto;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal_open {
  display: flex;
}

.modal_modal_container {
  background-color: #ffffff;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  -webkit-animation-name: modal_animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: modal_animatetop;
  animation-duration: 0.4s;
  overflow: auto;
}

.modal_close {
  text-align: right;
  background: #3178D6;
  height: 48px;
  padding: 0 20px;
}
.modal_close > span {
  color: #ffffff;
  height: 100%;
}
.modal_close > span:first-child {
  float: left;
  font-weight: 700;
  font-size: 16px;
  line-height: 48px;
}
.modal_close_icon {
  font-size: 30px;
  line-height: 40px;
  color: #ffffff;
}
.modal_close_icon:hover {
  cursor: pointer;
}
@keyframes modal_animatetop {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media screen and (min-width: 960px) {
  .modal_modal_container {
    border-radius: 8px;
  }

  .modal_close {
    background-color: #ffffff;
  }
  .modal_close span {
    color: #2648A4;
  }
  .modal_close span.modal_close_icon {
    color: #3178D6;
  }
}

.search_component_container {
  padding: 16px 0 90px;
  position: relative;
  background-color: rgba(228, 242, 254, 0.4);
  display: grid;
  grid-gap: 4px 0;
  gap: 4px 0;
}
.search_component_container .search_component_card {
  margin: 0 16px auto;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 10px 0.2px rgba(45, 102, 196, 0.25);
}
.search_component_container .search_component_card_title {
  height: 60px;
  padding: 0 16px 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}
.search_component_container .search_component_card_inner {
  display: grid;
}
.search_component_container .search_component_card .search_component_selected {
  background-color: #E4F2FE;
}

.search_component_checkbox {
  padding: 16px;
  border-bottom: 1px solid #BDDFFD;
  justify-content: left !important;
}
.search_component_checkbox > label:last-child {
  font-size: 16px;
}

.search_component_radio {
  padding: 16px;
  border-bottom: 1px solid #BDDFFD;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.search_component_radio:hover {
  cursor: pointer;
}
.search_component_radio > div {
  width: 20px;
  height: 20px;
  margin: 3px 8px 3px 3px;
  border: 2px solid #3178D6;
  border-radius: 50%;
  position: relative;
}
.search_component_radio > div > span {
  display: none;
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.search_component_radio input:checked ~ div {
  border-color: #3178D6;
}
.search_component_radio input:checked ~ div > span {
  display: block;
  background: #3178D6;
}
.search_component_radio input:disabled ~ div {
  opacity: 0.1;
}

.search_component_action {
  width: calc(100% - 32px);
  max-width: 760px;
  padding: 16px;
  background-color: rgba(228, 242, 254, 0.6);
  border-radius: 0 0 8px 8px;
  position: fixed;
  bottom: 16px;
}
.search_component_action_inner {
  max-width: 500px;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
.search_component_action .search_component_button_clear {
  width: 38%;
  height: 56px;
  border: 1px solid #9E9E9E;
  border-radius: 28px;
  color: #9E9E9E;
}
.search_component_action .search_component_button_clear > span {
  font-size: 16px;
  font-weight: bold;
}
.search_component_action .search_component_button {
  width: 60%;
  height: 56px;
  border-radius: 28px;
}
.search_component_action .search_component_button > span {
  font-size: 16px;
  font-weight: bold;
}

.search_component_employee_container .search_component_checkbox {
  border: none;
}

@media screen and (min-width: 960px) {
  .search_component_container {
    background-color: #ffffff;
    padding: 0 0 90px;
  }
  .search_component_container .search_component_card_inner_column_3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .search_component_container .search_component_card_inner_column_4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .search_component_radio, .search_component_checkbox {
    border: none;
    padding: 8px 16px;
  }

  .search_component_employee_container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

.checkbox_wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkbox_wrapper > label {
  display: flex;
  justify-content: center;
  align-items: center;
}

.checkbox_checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid #3178D6;
  border-radius: 2px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 3px;
  outline: none;
  cursor: pointer;
}
.checkbox_checkbox:checked {
  background: #3178D6;
}

.checkbox_checkbox:checked + .checkbox_span::before {
  content: "✓";
}

.checkbox_span {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 15px;
  width: 100%;
  text-align: center;
}

.checkbox_checkbox_label {
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  padding-left: 5px;
  line-height: 16px;
  cursor: pointer;
}

.checkbox_label_group {
  position: relative;
}

.button_wrapper {
  height: 56px;
  border-radius: 28px;
  align-items: center;
  justify-content: center;
  display: flex;
  cursor: pointer;
  outline: none;
  border: none;
  padding: 0;
  font-weight: bold;
  font-size: 16px;
}
.button_wrapper > span {
  font-style: normal;
  font-weight: 500;
}
.button_wrapper img {
  margin-right: 12px;
}

.button_outline {
  background: #ffffff;
}

.button_primary_border {
  border: 1px solid #3897F8;
}

.button_primary_variant_color {
  color: #6BB7FA;
}

.button_primary_variant_border {
  border: 1px solid rgba(107, 183, 250, 0.8);
}

.button_secondary_variant_border {
  border: 1px solid rgba(255, 101, 152, 0.6);
}

.button_primary_variant_background {
  background: rgba(107, 183, 250, 0.8);
}

.button_secondary_variant_background {
  background: rgba(255, 101, 152, 0.6);
}

.list_content_list_container {
  padding: 0 16px;
  font-family: "Noto Sans JP";
}
@media screen and (max-width: 960px) {
  .list_content_list_container {
    margin-bottom: 40px;
  }
}

.list_update_time {
  text-align: right;
  max-width: 1280px;
  margin: 0 auto;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  padding: 0 16px 0 0;
}

.list_content_list {
  max-width: 1080px;
  padding: 25px 0 0;
  margin: 0 auto;
}
.list_content_list > .list_header {
  color: #2648A4;
  font-size: 28px;
  font-weight: 700;
  line-height: 39px;
  padding: 0 0 20px;
}
.list_content_list > .list_content_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 40px 24px;
}
.list_content_list > .list_content_grid > .list_content_box {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 0px 10px 0.2px rgba(45, 102, 196, 0.1);
  margin-bottom: 10px;
}
.list_content_list > .list_content_grid > .list_content_box > .list_img {
  width: 100%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  height: 127px;
  object-fit: cover;
}
.list_content_list > .list_content_grid > .list_content_box > .list_txt {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin: 10px;
  margin-top: 5px;
  height: 60px;
  width: calc(100% - 20px);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (max-width: 768px) {
  .list_sp_hide {
    display: none !important;
  }

  .list_content_list {
    padding: 20px 0 0;
  }
  .list_content_list > .list_content_grid {
    grid-template-columns: auto;
    grid-gap: 16px 0;
  }
}
@media screen and (min-width: 960px) {
  .list_pc_hide {
    display: none !important;
  }
}
.element-slide_next_btn,.element-slide_prev_btn {
  cursor: pointer;
  position: absolute;
  bottom: -22px;
  font-size: 22px;
  transition: .6s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 20px;
  height: 20px;
  color: #6bb7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1
}

.element-slide_prev_btn {
  left: 15px
}

.element-slide_next_btn {
  right: 15px
}

.element-slide_content_slide>div>ul>li>button:before {
  opacity: .4;
  color: #2648a4
}

.element-slide_content_slide>div>ul>li[class*=slick-active]>button:before {
  opacity: 1;
  color: #2648a4
}

.element-slide_content_slide>div>div>div>div>div>div:focus {
  outline: none
}

.line-qr_line_dialog {
  padding: 20px
}

.line-qr_line_text {
  font: 16px
}

.line-qr_line_qr {
  display: flex;
  justify-content: center;
  margin: 20px
}

.input_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px
}

.input_wrapper>div {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center
}

.input_title_container {
  padding-bottom: 5px;
  padding-left: 5px
}

.input_title_container>p {
  font-size: 14px;
  margin: 0;
  color: rgba(82,82,82,.8)
}

.input_input_container {
  position: relative
}

.input_input_container>input {
  width: 100%;
  padding: 0 16px;
  font-size: 16px
}

.input_input_container>input:-ms-input-placeholder {
  color: rgba(82,82,82,.45);
  font-style: normal;
  font-weight: 400;
  font-size: 16px
}

.input_input_container>input::placeholder {
  color: rgba(82,82,82,.45);
  font-style: normal;
  font-weight: 400;
  font-size: 16px
}

.input_input_container>span {
  height: 100%;
  display: flex
}

.input_input_container>span:first-child {
  align-items: center;
  padding-right: 5px;
  color: rgba(82,82,82,.8)
}

.input_input_container>span:last-child {
  align-items: flex-end;
  padding-left: 5px
}

.input_required {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  padding-left: 15px
}

.input_outline {
  height: 56px;
  border: 1px solid rgba(82,82,82,.2);
  box-sizing: border-box;
  border-radius: 4px
}

.input_outline:focus {
  outline: none;
  border: 1px solid #3897f8
}

.input_no_outline {
  height: 30px;
  padding-left: 10px;
  border: none;
  border-bottom: 1px solid rgba(82,82,82,.2)
}

.input_no_outline:focus {
  outline: none;
  border-bottom: 1px solid #3897f8
}

.input_icon {
  position: absolute;
  right: 10px;
  cursor: pointer
}

.input_icon>div>i {
  color: rgba(82,82,82,.4)
}

.index_top {
  width: 100%
}

.index_show {
  overflow: hidden
}

.index_container {
  max-width: 1080px;
  margin: auto;
  justify-content: center
}

.index_container .index_top_slide {
  width: 100%;
  margin: 20px 0 40px
}

@media screen and (max-width: 960px) {
  .index_container .index_top_slide {
      margin:-32px 0 40px
  }
}

.index_container .index_contents {
  margin: auto;
  display: flex;
  justify-content: center;
  padding: 0 16px
}

.index_container .index_contents .index_main {
  width: 100%;
  flex: 1 1
}

.index_container .index_contents .index_side_bar {
  width: 320px;
  margin-left: 24px
}

@media screen and (max-width: 1080px) {
  .index_container .index_contents {
      padding:0
  }

  .index_container .index_contents .index_side_bar {
      display: none
  }
}

.index_top_slide_img {
  width: 100%;
  display: block;
  border-radius: 14px
}

@media screen and (max-width: 960px) {
  .index_top_slide_img {
      border-radius:6px
  }
}

.index_top_img {
  width: 100%;
  display: block
}

.index_section {
  margin: 0 0 30px
}

.index_section .index_section_title {
  font-size: 28px;
  color: #2648a4;
  font-weight: 700;
  margin: 10px 0
}

@media screen and (max-width: 1080px) {
  .index_section .index_section_title {
      font-size:20px;
      margin: 10px 0 10px 15px
  }
}

.index_button_group {
  display: grid;
  grid-template-columns: 200px 200px auto
}

.index_button_group .index_search_button {
  background-color: #fff;
  width: 158px;
  height: 122px;
  border: 1px solid rgba(56,151,248,.2);
  box-sizing: border-box;
  box-shadow: 0 0 10px .2px rgba(45,102,196,.1);
  border-radius: 12px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  cursor: pointer
}

.index_button_group .index_search_button .index_search_icon {
  height: 50%
}

.index_button_group .index_search_button .index_search_label {
  color: #3897f8;
  font-weight: 700;
  font-size: 18px
}

@media screen and (max-width: 1080px) {
  .index_button_group {
      display:flex;
      justify-content: space-evenly
  }

  .index_button_group .index_search_button {
      width: 112px;
      height: 86px;
      margin: 3px
  }

  .index_button_group .index_search_button .index_search_label {
      font-size: 16px
  }
}

.index_area_button_group {
  display: grid;
  grid-template-columns: 170px 170px 170px auto;
  grid-gap: 8px;
  gap: 8px
}

.index_area_button_group .index_search_button {
  background-color: #fff;
  width: full;
  padding: 24px;
  border: 1px solid rgba(56,151,248,.2);
  box-sizing: border-box;
  box-shadow: 0 0 10px .2px rgba(45,102,196,.1);
  border-radius: 12px;
  text-align: center;
  cursor: pointer
}

.index_area_button_group .index_search_button .index_search_icon {
  height: 50%
}

.index_area_button_group .index_search_button .index_search_label {
  color: #3897f8;
  font-weight: 700;
  font-size: 18px
}

@media screen and (max-width: 1080px) {
  .index_area_button_group {
      display:grid;
      grid-template-columns: repeat(3,1fr);
      grid-gap: 8px;
      gap: 8px;
      padding: 24px
  }

  .index_area_button_group .index_search_button {
      padding: 13px
  }

  .index_area_button_group .index_search_button .index_search_icon {
      height: 50%
  }

  .index_area_button_group .index_search_button .index_search_label {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%
  }
}

.index_area_back_button {
  background-color: #fff;
  display: flex;
  align-items: center;
  border: 1px solid rgba(56,151,248,.2);
  box-sizing: border-box;
  box-shadow: 0 0 10px .2px rgba(45,102,196,.1);
  border-radius: 12px;
  cursor: pointer;
  padding: 10px 20px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 8px
}

.index_area_back_button .index_back_label {
  font-size: 14px;
  line-height: 140%;
  color: #3897f8;
  margin-left: 20px
}

@media screen and (max-width: 1080px) {
  .index_area_back_button {
      margin-left:24px
  }
}

.index_freeword_group {
  display: flex;
  width: 100%
}

.index_freeword_group .index_freeword_input {
  width: 100%
}

.index_freeword_group .index_freeword_btn {
  padding: 16px 40px;
  margin-left: -40px;
  z-index: 2;
  white-space: nowrap;
  display: flex;
  align-items: unset
}

@media screen and (max-width: 1080px) {
  .index_freeword_group {
      display:flex;
      padding: 0 15px
  }

  .index_freeword_group .index_freeword_btn {
      padding: 16px 20px;
      margin-left: -40px
  }
}

.index_ranking_bar {
  height: 48px;
  max-width: 100%
}

.index_ranking_job {
  max-width: 100%;
  padding: 16px
}

.index_ranking_job_1 {
  background-color: #fffae0
}

.index_ranking_job_2 {
  background-color: #f2f2f2
}

.index_ranking_job_3 {
  background-color: #fbf4e6
}

.index_ranking_job_4,.index_ranking_job_5 {
  background-color: #e4f2fe
}

.index_ranking_title {
  width: 100%;
  height: 48px;
  padding: 9px 0 9px 18px;
  margin: 0 0 16px;
  background-color: #3897f8;
  color: #fff
}

.index_ranking_title .index_ranking_label:before {
  content: url(/img/icon/ranking_icon_banner.svg);
  vertical-align: middle;
  margin: 0 10px 0 0
}

.index_ranking_top .index_title {
  display: flex;
  justify-content: center;
  color: #fff;
  align-items: center;
  height: 100%
}

.index_ranking_top .index_title .index_number {
  font-size: 28px;
  margin: 0 0 0 5px
}

.index_ranking_top .index_title .index_kurai {
  position: relative;
  top: 4px
}

.index_ranking_1 {
  background: linear-gradient(180deg,rgba(223,187,3,.8),rgba(223,179,3,.2) 19.22%,rgba(223,179,3,.7) 61.73%,rgba(223,187,3,.8)),#fffae0;
  color: #f89838
}

.index_ranking_2 {
  background: linear-gradient(180deg,hsla(0,0%,75.3%,.8),hsla(0,0%,75.3%,.2) 22.95%,hsla(0,0%,75.3%,.7) 47.94%,hsla(0,0%,75.3%,.8) 99.99%),#f2f2f2;
  color: #f89838
}

.index_ranking_3 {
  background: linear-gradient(180deg,rgba(196,114,34,.8),rgba(196,114,34,.2) 22.41%,rgba(196,114,34,.7) 50.74%,rgba(196,114,34,.8)),#fecc5f;
  color: #f89838
}

.index_ranking_4,.index_ranking_5 {
  background-color: #6bb7fa;
  color: #fff;
  font-size: 16px;
  font-weight: 700
}

.index_ranking_4 .index_title,.index_ranking_5 .index_title {
  height: 100%;
  display: flex;
  align-items: center;
  margin: 0 0 0 16px
}

.index_ranking_slide {
  max-width: 710px;
  min-height: 500px;
  padding-bottom: 40px
}

.index_ranking_slide .index_ranking_panel {
  padding: 0 10px
}

@media screen and (max-width: 1080px) {
  .index_ranking_slide {
      padding:0 16px 40px
  }

  .index_ranking_slide .index_ranking_panel {
      padding: 0
  }
}

.index_mottomiru {
  height: 56px;
  margin-top: 10px;
  background-color: #e4f2fe;
  display: table;
  width: 100%
}

.index_mottomiru .index_mottomiru_inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #2648a4;
  font-size: 16px;
  text-decoration: underline
}

.index_mottomiru .index_mottomiru_inner .index_mottomiru_icon {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 0 15px
}

.index_mottomiru .index_mottomiru_inner .index_mottomiru_icon>i {
  color: #2648a4
}

.index_koukoku_img {
  width: 100%;
  padding: 20px;
  background-color: #fff
}

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

.index_content_banner {
  width: 100%;
  max-width: 344px;
  background-color: #fff;
  box-shadow: 0 0 10px .2px rgba(45,102,196,.1);
  border-radius: 8px;
  margin: 0 auto 20px;
  overflow: hidden;
  align-self: flex-start
}

.index_banner_title {
  font-weight: 700;
  font-size: 14px;
  padding: 10px 15px 0
}

.index_banner_description {
  font-size: 14px;
  padding: 10px 15px 15px
}

.index_recommend_job {
  margin: 15px 0 0
}

.index_side_title {
  border-top: 2px solid #6bb7fa;
  border-bottom: 2px solid #6bb7fa;
  color: #2648a4;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  padding: 10px 0;
  margin: 20px auto 10px
}

@media screen and (max-width: 1080px) {
  .index_side_title {
      margin:20px 15px 10px
  }
}

.index_area_label {
  font-weight: 700
}

@media screen and (max-width: 1080px) {
  .index_area_label {
      margin:20px 15px 10px
  }
}

.index_badge_container {
  margin: 60px 90px 30px;
  display: grid;
  grid-gap: 12px 40px;
  gap: 12px 40px;
  grid-template-rows: auto;
  grid-template-columns: repeat(3,1fr)
}

@media screen and (max-width: 768px) {
  .index_badge_container {
      margin:60px 16px 30px;
      grid-gap: 20px;
      gap: 20px
  }
}

.index_badge_img {
  width: 100%
}

.index_badge_text {
  grid-column: span 3;
  font-size: 12px;
  text-align: center
}

.index_pref_container {
  margin: 15px;
  display: flex;
  flex-wrap: wrap
}

.index_pref_container .index_pref_devider {
  margin: 0 16px;
  /* line-height: 30px */
}

.index_pref_container .index_pref_link {
  color: #3178d6;
  text-decoration: underline;
  white-space: nowrap
}

@media screen and (max-width: 1080px) {
  .index_pref_container {
      margin:10px 15px 15px 20px
  }
}

.index_sns_group {
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center
}

.index_sns_group .index_sns_icon {
  cursor: pointer;
  margin: 40px
}

.index_line {
  height: 500px;
  margin: auto!important
}

.index_keisai_kigyo {
  width: 310px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 0 10px .2px rgba(45,102,196,.1);
  border-radius: 8px;
  overflow: hidden;
  margin: 5px auto
}

.index_keisai_kigyo .index_keisai_kigyo_img {
  object-fit: contain;
  max-width: 90%;
  height: 60%
}

.index_pre_title {
  font-size: 12px;
  line-height: 140%;
  color: #525252;
  margin: 8px 0 4px
}

.index_pre_content_container {
  background: #fff;
  border: 1px solid rgba(56,151,248,.2);
  box-shadow: 0 0 10px .2px rgba(45,102,196,.1);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 710px
}

.index_pre_content_container:hover {
  cursor: pointer
}

.index_pre_content_container .index_pre_content {
  font-size: 14px;
  line-height: 140%;
  color: #3178d6;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-right: 20px
}

.index_snack_bar_container {
  width: 100vw;
  position: fixed;
  bottom: 0;
  display: none
}

.index_snack_bar_container .index_snack_bar {
  width: 100%;
  background: rgba(0,0,0,.3);
  display: flex;
  justify-content: center;
  padding: 8px 12px
}

.index_snack_bar_container .index_snack_bar .index_member_btn {
  background: #fcb93f;
  padding: 0 25px
}

.index_snack_bar_container .index_snack_bar .index_contact_btn {
  background: #fff;
  border: 1px solid #3897f8;
  color: #3897f8;
  padding: 0 25px;
  margin-right: 12px
}

.index_to_user_sp_container {
  width: 100vw;
  display: none;
  justify-content: end;
  margin-bottom: 4px
}

.index_to_user_pc_container {
  position: fixed;
  bottom: 16px;
  right: 16px
}

.index_to_user {
  background: rgba(0,0,0,.7);
  border-radius: 8px;
  width: 96px;
  height: 96px;
  padding: 5px
}

.index_to_user:hover {
  cursor: pointer
}

.index_to_user img {
  width: 100%;
  height: auto
}

.index_to_user .index_to_user_text {
  position: absolute;
  top: 32px;
  left: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 120%;
  text-align: center;
  color: #2648a4
}

@media screen and (max-width: 1080px) {
  .index_pre_title {
      margin:8px 24px 4px
  }

  .index_pre_content_container {
      margin: 0 24px;
      max-width: none
  }

  .index_pre_content_container .index_pre_content {
      white-space: normal;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden
  }

  .index_to_user_sp_container {
      display: flex
  }

  .index_to_user_pc_container {
      display: none
  }

  .index_to_user {
      width: 72px;
      height: 72px;
      padding: 4px
  }

  .index_to_user .index_to_user_text {
      top: 25px;
      right: 12px;
      font-size: 10px;
      line-height: 120%;
      left: auto
  }

  .index_snack_bar_container {
      display: block
  }
}

/* ジャンルのタブの部分 */
:root {
  --genre-selected-height: 60px;
  --genre-height: 50px;
  --category-color-top: rgba(234, 83, 92, 1.0);
  --category-color-career: rgba(240, 134, 29, 1.0);
  --category-color-lifestyle: rgba(121, 170, 83, 1.0);
  --category-color-workstyle: rgba(57, 183, 145, 1.0);
  --category-color-manufacturing: rgba(38, 130, 194, 1.0);
  --category-color-series: rgba(77, 58, 147, 1.0);
  --rank-frame-color-1: linear-gradient(rgba(233, 204, 97, 1.0), rgba(246, 230, 179, 1.0), rgba(231, 198, 73, 1.0));
  --rank-frame-color-2: linear-gradient(rgba(213, 213, 212, 1.0), rgba(227, 227, 226, 1.0), rgba(203, 203, 201, 1.0));
  --rank-frame-color-3: linear-gradient(rgba(215, 147, 51, 1.0), rgba(237, 182, 78, 1.0), rgba(208, 135, 42, 1.0));
}

/* コンテンツ一覧 */
.background_red {
  background-color: var(--category-color-top);
}
.background_orange {
  background-color: var(--category-color-career);
}
.background_moss_green {
  background-color: var(--category-color-lifestyle);
}
.background_green {
  background-color: var(--category-color-workstyle);
}
.background_blue {
  background-color: var(--category-color-manufacturing);
}
.background_dark_blue {
  background-color: var(--category-color-series);
}

.genre_area {
    padding-top: 10px;
}
.genre {
  width: 100%;
  height: var(--genre-selected-height);
  display: flex;
  align-items: flex-end;
}
.genre_tab {
  color: #ffffff;
  width: 170px;
  height: var(--genre-height);
  text-align: center;
  line-height: var(--genre-height);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.genre_tab.genre_tab_selected {
  width: 170px;
  height: var(--genre-selected-height);
  line-height: var(--genre-selected-height);
}
.list_content_list {
  margin-bottom: 20px;
}
/* パンくず部分 */
.pankuzu_block {
  background-color: rgba(228, 242, 254, 0.0);
}
/* カスタム検索部分 */
.google_custom_search {
  margin: 0 0 0 auto;
  width: 50%;
  background-color: rgba(228, 242, 254, 0.0);
}
.google_custom_search_title {
  padding-left: 15px;
}
.gsc-control-cse.gsc-control-cse-ja {
  border: none;
  background-color: rgba(228, 242, 254, 0.0);
}

/* 今月のおすすめ記事 */
.list_content_box_main {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  margin-bottom: 100px;
}
.list_content_list > .list_content_grid > .list_content_box.list_content_box_main > .list_txt {
  height: 80px;
  -webkit-line-clamp: 4;
}
.list_content_list > .list_content_grid > .list_content_box.list_content_box_main > .list_img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}

/* ラベル */
.list_content_label {
  position: absolute;
  color: white;
  margin-top: 10px;
  padding: 5px;
}
.list_content_label.career {
  background-color: var(--category-color-career);
}
.list_content_label.lifestyle {
  background-color: var(--category-color-lifestyle);
}
.list_content_label.workstyle {
  background-color: var(--category-color-workstyle);
}
.list_content_label.manufacturing {
  background-color: var(--category-color-manufacturing);
}
.list_content_label.series {
  background-color: var(--category-color-series);
}

/* ヨロコビmagazine 人気記事ランキング */
.list_content_box.rank_1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  margin-right: 40px;
  margin-left: 40px;
}
/* 人気記事ランキング もっと見る */
.list_content_box.rank_1_list {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  padding-bottom: 20px;
  margin-bottom: 150px;
}
.list_content_list.list_content_list_rank > .list_content_grid {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 10px;
}
.list_content_list > .list_content_grid > .list_content_box.rank_1 > .list_txt {
  height: 80px;
  -webkit-line-clamp: 4;
}
.list_content_list > .list_content_grid > .list_content_box.rank_1 > .list_img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}
.list_content_list > .list_content_grid > .list_content_box.rank_2 > .list_img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.list_content_list > .list_content_grid > .list_content_box.rank_1_list {
  margin-bottom: 95px;
}
.list_content_list > .list_content_grid > .list_content_box.rank_1_list > .list_img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}
.list_content_list > .list_content_grid > .list_content_box.rank_2_list {
  margin-bottom: 35px;
}
.list_content_list > .list_content_grid > .list_content_box.rank_2_list:nth-child(3) {
  position: relative;
  top: -60px;
}
.list_content_list > .list_content_grid > .list_content_box.rank_2_list > .list_img {
  width: 100%;
  height: 127px;
  object-fit: cover;
}


main {
  width: 1080px;
}
/* スマホ表示 */
@media screen and (max-width: 768px){
  .list_content_box_main {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 1;
  }
  .list_content_list > .list_content_grid > .list_content_box.list_content_box_main > .list_img {
    height: 127px;
  }
  .list_content_list.list_content_list_rank > .list_content_grid {
    grid-template-columns: repeat(1, 1fr);
    margin-bottom: 10px;
  }
  .list_content_box.rank_1 {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 1;
  }
  .genre_area {
    width: 100%;
    overflow-x: scroll;
  }
  .genre {
    width: 700px;
  }
  main {
    width: 100%;
  }
  .google_custom_search {
    margin:10px auto;
    width: 100%;
    background-color: rgba(228, 242, 254, 0.0);
  }
  .list_content_box.rank_1 {
    padding-bottom: 0;
    margin-right: 0;
    margin-left: 0;
  }
  .list_content_box_main {
    margin-bottom: 0;
  }
  .list_content_list > .list_content_grid > .list_content_box.list_content_box_main > .list_txt {
    padding-top: 0;
    height: 60px;
    -webkit-line-clamp: 3;
  }
  .list_content_list > .list_content_grid > .list_content_box.rank_1 > .list_txt {
    height: 60px;
    -webkit-line-clamp: 3;
  }
  .list_content_box.rank_1_list {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 1;
    padding-bottom: 0px;
  }
  .list_content_list.list_content_list_rank > .list_content_grid {
    grid-template-columns: auto;
  }
  .list_content_list > .list_content_grid > .list_content_box.rank_1_list > .list_img {
    height: 127px;
  }
  .list_content_list > .list_content_grid > .list_content_box.rank_1_list {
    margin-bottom: 10px;
  }
  .list_content_list > .list_content_grid > .list_content_box.rank_2_list {
    margin-bottom: 10px;
  }
  .list_content_list > .list_content_grid > .list_content_box.rank_2_list:nth-child(3) {
    top: 0px;
  }
  .list_content_list > .list_content_grid > .list_content_box.rank_1 > .list_img {
    height: 127px;
  }
  .list_content_list > .list_content_grid > .list_content_box.rank_2 > .list_img {
    height: 127px;
  }
}

/* ジャンルタブ表示切り替え用 */
.tab_content {
  display: none;
}
.tab_content.tab_content_selected {
  display: block;
}

/* ランキング部分 */
.rank_frame {
  text-align: center;
  height: 35px;
  line-height: 35px;
  color: white;
  background: rgba(113, 179, 227, 1.0);
}

.rank_frame.rank_frame_1 {
  background: var(--rank-frame-color-1);
}
.rank_frame.rank_frame_2 {
  background: var(--rank-frame-color-2);
}
.rank_frame.rank_frame_3 {
  background: var(--rank-frame-color-3);
}

.rank_val_1 {
  font-size: 30px;
  font-weight: bold;
}
.rank_val_2 {
  font-weight: bold;
  font-size: 20px;
}
.rank_val_3 {
  font-weight: bold;
  font-size: 20px;
}
.rank_icon {
  height: 100%;
}
.wrap {
  background-color: rgba(228, 242, 254, 0.1);
}

/* キーワードボタン */
.list_content_keyword_btn {
  height: 40px;
  padding-left: 10px;
  padding-right: 10px;
  font-weight: normal;
  margin: 5px;
}

/* 更新日時部分 */
.list_dt {
  margin-top: 5px;
  margin-left: 10px;
  margin-right: 10px;
  height: 18px;
  color: #82888a;
}
.list_dt .dt_icon {
  font-size: 17px;
  margin-right: 5px;
}
.list_dt_txt {
  vertical-align: top;
  font-size: 13px;
}

/* ランキング 初期非表示（記事があれば表示） */
.list_content_list_container_rank {
    display: none;
}