@charset "UTF-8";
/*==================================================================
   Layout
==================================================================*/
.container, .content, .inner {
  clear: both;
  width: 100%;
  height: auto;
  position: relative;
}
.container:after, .content:after, .inner:after {
  content: "";
  display: block;
  clear: both;
}

.container {
  max-width: 1000px;
  margin: 0px auto;
  padding: 0 2.5%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.inner {
  padding: 0 5%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.container .inner {
  padding: 0 2.5%;
}

.content.margin {
  margin: 3.75em 0;
}
.content.padding {
  padding: 6rem 0;
}
@media screen and (min-width: 992px) {
  .content.margin {
    margin: 5em 0;
  }
  .content.padding {
    padding: 7rem 0;
  }
}

h2 {
  font-size: 1.5em;
  line-height: 1.3;
}
h2.ttl {
  text-align: left;
  font-size: 1em;
  font-weight: bold;
  margin: 0.4em 0;
}

h3 {
  font-size: 1.3em;
  line-height: 1.3;
  margin-bottom: 0.6em;
}

h4 {
  font-size: 1.59em;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 0.6em;
}

.bgfix {
  background-attachment: fixed;
}

/*------------------------------------------------------------
   Header
--------------------------------------------------------------*/
#header_wrap {
  padding-top: 2.5vw;
}

#header {
  width: 100%;
  max-height: 90px;
  height: auto;
  position: relative;
  z-index: 30;
}
#header::before {
  content: "";
  display: block;
  padding-top: 21%;
}
@media screen and (min-width: 768px) {
  #header::before {
    padding-top: 13%;
  }
}
#header .header {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #76A315;
  border-radius: 11px;
  padding: 0.65em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#header #logo {
  display: inline-block;
  max-width: 235px;
  width: 40%;
  margin: 0 auto;
}
#header .deco_leaves {
  display: inline-block;
  max-width: 80px;
  width: 21%;
  margin-top: 8px;
}

/* mediaquery
----------------------------------------------------*/
/* toggle Button
--------------------------------------------------------------*/
.toggle_menu {
  position: relative;
}

.toggle_btn {
  display: inline-block;
  position: relative;
  cursor: pointer;
  z-index: 100;
  background-color: #fff;
  color: #76A315;
  border-radius: 8px;
  margin-left: 1em;
}
.toggle_btn .toggle_item {
  position: relative;
  width: 38px;
  height: 26px;
  margin: 7px;
}
@media screen and (min-width: 768px) {
  .toggle_btn .toggle_item {
    width: 42px;
    height: 29px;
    margin: 8px;
  }
}
.toggle_btn span {
  display: block;
  position: absolute;
  width: 100%;
  border-bottom: solid 2px;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.toggle_btn span:nth-child(1) {
  top: 0px;
}
.toggle_btn span:nth-child(2) {
  top: 7px;
}
.toggle_btn span:nth-child(3) {
  top: 14px;
}
.toggle_btn p {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: -4px;
  font-size: 0.7em;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.2em;
}

/* open ************************/
.toggle_menu.open .toggle_btn span {
  top: 8.5px;
}
.toggle_menu.open .toggle_btn span:nth-child(1) {
  -webkit-transform: rotate(-25deg);
          transform: rotate(-25deg);
}
.toggle_menu.open .toggle_btn span:nth-child(2), .toggle_menu.open .toggle_btn span:nth-child(3) {
  -webkit-transform: rotate(25deg);
          transform: rotate(25deg);
}

/* Toggle nav(Depends on toggle_btn) ************************/
.toggle_nav ul {
  padding: 1.5em 0.1em;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.toggle_nav ul ul {
  padding: 1em 0.4em;
}
.toggle_nav li {
  text-align: right;
  white-space: nowrap;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 0.8em;
}
.toggle_nav a {
  display: block;
  color: #fff;
}

/* header *******************/
#header {
  /* open *******************/
}
#header .toggle_nav {
  position: fixed;
  top: -90%;
  right: 0;
  z-index: 0;
  padding: 90px 10px 10px 20px;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
#header .toggle_menu.open .toggle_nav {
  top: 0px;
}

/* contents *******************/
#contents {
  /* open *******************/
}
#contents .toggle_menu {
  z-index: 100;
}
#contents .toggle_nav {
  position: fixed;
  top: 0;
  right: -100%;
  z-index: 0;
  min-width: 240px;
  width: 30vw;
  height: 100vh;
  padding: 90px 20px 10px 20px;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
#contents .toggle_menu.open .toggle_nav {
  right: 0px;
}

/* Grobal Nav
--------------------------------------------------------------*/
#nav {
  width: 100%;
  height: auto;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  color: #fff;
  font-weight: bold;
  line-height: 1.3;
  position: relative;
}
#nav li a {
  display: block;
  color: inherit;
}
#nav li a:hover {
  text-decoration: none;
}
#nav .nav01 {
  background-color: #2C9FC8;
}
#nav .nav02 {
  background-color: #D8761A;
}
#nav .nav03 {
  background-color: #7568A4;
}
#nav .contnav {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
#nav .contnav > li {
  min-width: calc((100% - 14px) / 3);
  min-height: 5em;
  height: auto;
  margin-top: 7px;
  margin-right: 7px;
  margin-bottom: 7px;
  border-radius: 11px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
#nav .contnav > li:last-child {
  margin-right: 0px;
}
#nav .contnav > li > a {
  min-height: 5em;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#nav .contnav > li > a:hover {
  text-decoration: none;
}
#nav .contnav > li:hover {
  position: relative;
  z-index: 5;
}
#nav .contnav > li:hover .pagenav {
  margin-top: 7px;
  opacity: 1;
}
#nav .pagenav {
  position: relative;
  z-index: 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  margin-top: -46px;
  opacity: 0;
}
#nav .pagenav ul {
  width: 100%;
  width: calc(300% + 14px);
  position: relative;
  padding: 0.8em 0em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 11px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#nav .pagenav li {
  margin: 0 auto;
}
#nav .pagenav .nav02 {
  left: calc(-100% - 7px);
}
#nav .pagenav .nav03 {
  left: calc(-200% - 14px);
}

h3.nav04 {
  background-color: #dc6b88;
}
h3.nav04 a {
  color: #fff;
  text-decoration: none;
}

.bnr_shain {
  width: 100%;
  max-height: 90px;
  height: auto;
  margin: 5em 0 6em;
  position: relative;
  z-index: 30;
  background-color: #76A315;
  border-radius: 11px;
  padding: 0 0.65em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: none;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.bnr_shain::before {
  content: "";
  display: block;
  padding-top: 21%;
}
@media screen and (min-width: 768px) {
  .bnr_shain::before {
    padding-top: 13%;
  }
}
.bnr_shain .deco_leaves {
  display: inline-block;
  max-width: 80px;
  width: 21%;
  margin-top: 8px;
}
.bnr_shain .title {
  max-width: 320px;
  width: 72%;
  margin: 0 auto;
  color: #fff;
  font-weight: bold;
}
.bnr_shain .note {
  width: 100%;
  text-align: center;
  font-weight: bold;
  color: #76A315;
  position: absolute;
  bottom: -2.5em;
}

#index .bnr_shain {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/*------------------------------------------------------------
   Footer
--------------------------------------------------------------*/
#footer {
  color: #8c8a8a;
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 0.92em;
  line-height: 1.6;
  padding-top: 2em;
}
#footer a, #footer a:hover {
  color: inherit;
}
@media screen and (min-width: 992px) {
  #footer {
    text-align: left;
  }
}

.footer_logo {
  max-width: 120px;
  width: 22%;
  margin: 0 auto 2em;
}

a .footer_logo {
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  opacity: 1;
}

a:hover .footer_logo, a.hover .footer_logo {
  opacity: 0.75;
}

#index .footer_logo {
  fill: #76A315;
}

#user .footer_logo {
  fill: #D8761A;
}

#Corporate .footer_logo {
  fill: #D8761A;
}

#recruit .footer_logo {
  fill: #7568A4;
}

.footer_nav {
  display: table;
  margin-bottom: 0.7em;
}
.footer_nav li {
  font-size: 1em;
  line-height: 1.4;
  margin-bottom: 0.7em;
}

#copyright {
  clear: both;
  width: 100%;
  height: auto;
  padding: 10px 0px;
  font-size: 1em;
}

#pagetop {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 500;
}
#pagetop a {
  text-decoration: none;
  color: inherit;
}

video {
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: auto;
}

/*------------------------------------------------------------
   Contents
--------------------------------------------------------------*/
#contents {
  position: relative;
  overflow: hidden;
}
#contents:after {
  content: "";
  display: block;
  clear: both;
}
#contents .toggle_btn {
  position: fixed;
  top: 10px;
  right: 10px;
  display: none;
}
#contents .toggle_btn.fixed {
  position: fixed;
}

.flex-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.flex-box.jc_between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.flex-box.jc_center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.flex-box.va_center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.flex-box.wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.txtArea p {
  margin-bottom: 1.5em;
}
.txtArea p:last-child {
  margin-bottom: 0;
}

.matbox {
  width: auto;
  padding: calc(1% + 13px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 11px;
  margin-bottom: 1.8em;
  background-color: #666;
  color: #fff;
  font-weight: bold;
}
.matbox:after {
  content: "";
  display: block;
  clear: both;
}
.matbox.txtArea {
  line-height: 2.2;
}

.matbox.pink {
  background-color: #dc6b88 !important;
  background: -webkit-linear-gradient(20deg, #ea609e, #ec6d79, #ca3c35) !important;
  background: linear-gradient(70deg, #ea609e, #ec6d79, #ca3c35) !important;
}

h2.matbox, h3.matbox, h4.matbox {
  text-align: center;
  line-height: 1.3;
  padding: 0.55em;
  margin-bottom: 1em;
}

.list_circle li {
  line-height: 1.35;
  text-indent: -1em;
  margin-left: 1em;
  margin-bottom: 0.45em;
}
.list_circle li::before {
  content: "";
  width: 0.8em;
  height: 0.8em;
  display: inline-block;
  background-color: #666464;
  border-radius: 50%;
  margin-right: 0.2em;
}

.anchor_nav {
  height: 80px;
  text-align: right;
  color: inherit;
  font-size: 0.94em;
  font-weight: bold;
}
.anchor_nav a .anchor_txt {
  white-space: nowrap;
  position: relative;
}
.anchor_nav a .img {
  display: inline-block;
  max-width: 55px;
  width: 13vw;
  background-image: url(../img/index/icon_bear@2x.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
}
.anchor_nav a .img::after {
  content: "";
  display: block;
  padding-top: 109%;
}

.anchor_nav.row a .anchor_txt {
  top: -1.2em;
  right: 0.2em;
}

.anchor_nav.col a .anchor_txt {
  display: block;
  right: -8px;
}

.anchor_nav.noimg a .img {
  display: none;
}

.btn {
  min-width: 200px;
  width: auto;
  height: auto;
  display: table;
  margin: 0 auto 3em;
}
.btn a {
  line-height: 1.8;
  font-weight: bold;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  padding: 0px 50px 0px 20px;
  border-bottom: 1.5px solid;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 0px;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  opacity: 1;
  color: inherit;
  position: relative;
}
.btn a::after {
  content: "＞";
  font-size: 1em;
  position: absolute;
  top: 50%;
  right: 5px;
  -webkit-transform: translateY(-50%) scaleX(0.5);
          transform: translateY(-50%) scaleX(0.5);
}
.btn a:hover {
  background-color: #222;
  color: #fff;
}

/*------------------------------------------------------------
   Other
--------------------------------------------------------------*/
/* slider ******************************/
/* slick 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 4px;
  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-size: 35px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: "•";
  text-align: center;
  opacity: 0.5;
  color: #988;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
  opacity: 0.75;
}