@charset "UTF-8";
html,
body {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  overflow-x: hidden;
  color: #414042;
}

*:focus {
  outline: none;
}

img {
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}

ul {
  list-style: none;
}

.pc {
  display: block;
/* margin-left: 20px; */
}

@media (max-width: 896px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}

@media (max-width: 896px) {
  .sp {
    display: block;
  }
}

.drawer-hamburger-icon {
  display: none;
}

@media (max-width: 896px) {
  .drawer-hamburger-icon {
    display: block;
  }
}

.drawer-hamburger-icon-page {
  display: none;
}

@media (max-width: 896px) {
  .drawer-hamburger-icon-page {
    display: block;
  }
}

.snowfall-flakes {
  -webkit-animation: 1s linear infinite rotation1;
          animation: 1s linear infinite rotation1;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

@-webkit-keyframes rotation1 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotation1 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

header .top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-width: 1200px;
  margin: auto;
  padding: 0;
}

@media (max-width: 896px) {
  header .top {
    max-width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

header .top ul.nav {
  width: 235px;
  padding: 0;
  margin: 0;
  border-left: solid 1px #dddddd;
  font-size: 0;
}

@media (max-width: 896px) {
  header .top ul.nav {
    display: none;
  }
}

header .top ul.nav li {
  display: inline-block;
  border-right: solid 1px #dddddd;
  border-bottom: solid 1px #dddddd;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 12px;
  text-align: center;
}

header .top ul.nav li.top {
  width: 230px;
  height: 104px;
}

header .top ul.nav li.top img {
  margin: 10px auto auto auto;
  width: 80%;
}

header .top ul.nav li.select a,
header .top ul.nav li.buy a,
header .top ul.nav li.sale a,
header .top ul.nav li.build a,
header .top ul.nav li.reform a,
header .top ul.nav li.topic a,
header .top ul.nav li.company a,
header .top ul.nav li.info a,
header .top ul.nav li.staff a {
  display: block;
  width: 114px;
  height: 110px;
  text-decoration: none;
  color: #000;
  line-height: 180px;
  font-weight: bold;
}

header .top ul.nav li.select a:hover,
header .top ul.nav li.buy a:hover,
header .top ul.nav li.sale a:hover,
header .top ul.nav li.build a:hover,
header .top ul.nav li.reform a:hover,
header .top ul.nav li.topic a:hover,
header .top ul.nav li.company a:hover,
header .top ul.nav li.info a:hover,
header .top ul.nav li.staff a:hover {
  background-color: #beaf87;
  color: #fff;
}

header .top ul.nav li.select img,
header .top ul.nav li.buy img,
header .top ul.nav li.sale img,
header .top ul.nav li.build img,
header .top ul.nav li.reform img,
header .top ul.nav li.topic img,
header .top ul.nav li.company img,
header .top ul.nav li.info img,
header .top ul.nav li.staff img {
  width: 60px;
  margin: 20px auto auto auto;
}

header .top ul.nav li.select a {
  background-image: url(/common/img/nav-icon-select.svg);
  background-size: 65%;
  background-repeat: no-repeat;
  background-position: center 5px;
}

header .top ul.nav li.select a:hover {
  background-image: url(/common/img/nav-icon-select_on.svg);
}

header .top ul.nav li.buy a {
  background-image: url(/common/img/nav-icon-buy.svg);
  background-size: 55%;
  background-repeat: no-repeat;
  background-position: center 15px;
}

header .top ul.nav li.buy a:hover {
  background-image: url(/common/img/nav-icon-buy_on.svg);
}

header .top ul.nav li.sale a {
  background-image: url(/common/img/nav-icon-sale.svg);
  background-size: 55%;
  background-repeat: no-repeat;
  background-position: center 15px;
}

header .top ul.nav li.sale a:hover {
  background-image: url(/common/img/nav-icon-sale_on.svg);
}

header .top ul.nav li.build a {
  background-image: url(/common/img/nav-icon-build.svg);
  background-size: 55%;
  background-repeat: no-repeat;
  background-position: center 15px;
}

header .top ul.nav li.build a:hover {
  background-image: url(/common/img/nav-icon-build_on.svg);
}

header .top ul.nav li.reform a {
  background-image: url(/common/img/nav-icon-reform.svg);
  background-size: 55%;
  background-repeat: no-repeat;
  background-position: center 15px;
}

header .top ul.nav li.reform a:hover {
  background-image: url(/common/img/nav-icon-reform_on.svg);
}

header .top ul.nav li.topic a {
  background-image: url(/common/img/nav-icon-recruit.svg);
  background-size: 55%;
  background-repeat: no-repeat;
  background-position: center 15px;
}

header .top ul.nav li.topic a:hover {
  background-image: url(/common/img/nav-icon-recruit_on.svg);
}

header .top ul.nav li.company a {
  background-image: url(/common/img/nav-icon-company.svg);
  background-size: 55%;
  background-repeat: no-repeat;
  background-position: center 15px;
}

header .top ul.nav li.company a:hover {
  background-image: url(/common/img/nav-icon-company_on.svg);
}

header .top ul.nav li.info a {
  background-image: url(/common/img/nav-icon-info.svg);
  background-size: 55%;
  background-repeat: no-repeat;
  background-position: center 15px;
}

header .top ul.nav li.info a:hover {
  background-image: url(/common/img/nav-icon-info_on.svg);
}

header .top ul.nav li.staff a {
  background-image: url(/common/img/nav-icon-staff.svg);
  background-size: 55%;
  background-repeat: no-repeat;
  background-position: center 15px;
}

header .top ul.nav li.staff a:hover {
  background-image: url(/common/img/nav-icon-staff_on.svg);
}

header .top ul.nav li.contact {
  width: 230px;
  height: 117px;
  padding: 10px;
}

header .top ul.nav li.contact a {
  color: #fff;
  text-decoration: none;
  line-height: 140px;
  font-weight: bold;
  height: 97px;
  background-color: #beaf87;
  display: block;
  background-image: url(/common/img/nav-icon-contact.svg);
  background-size: 35%;
  background-repeat: no-repeat;
  background-position: center 0px;
}

header .top ul.nav li.contact a:hover {
  opacity: 0.8;
  background-image: url(/common/img/nav-icon-contact.svg);
}

header .top .main {
  position: relative;
  width: 720px;
}

@media (max-width: 896px) {
  header .top .main {
    width: 100%;
  }
}

header .top .main h2 {
  padding: 0;
  margin: 0;
  height: 50px;
  line-height: 50px;
  width: 720px;
  font-size: 90%;
  text-align: center;
}

@media (max-width: 896px) {
  header .top .main h2 {
    display: none;
  }
}

header .top .main .slide {
  width: 720px;
  height: 610px;
  padding: 0;
  margin: 0;
}

@media (max-width: 896px) {
  header .top .main .slide {
    width: 100%;
    height: 100vh;
  }
}

@media (max-width: 896px) {
  header .top .main .slide li {
    width: 100%;
  }
  header .top .main .slide li img {
    -o-object-fit: cover;
       object-fit: cover;
    height: 100vh;
  }
}

header .top .main h1 {
  font-size: 250%;
  position: absolute;
  width: 100%;
  bottom: 10px;
  left: 10px;
  line-height: 54px;
  padding: 0 20px;
  margin: 0;
  color: #fff;
}

@media (max-width: 896px) {
  header .top .main h1 {
    width: 100%;
    font-size: 170%;
    padding: 0px;
    bottom: 50px;
    line-height: 40px;
    text-align: center;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

header .top .main .catch {
  font-size: 200%;
  font-weight: bold;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 80px;
  line-height: 80px;
  padding: 0 20px;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 896px) {
  header .top .main .catch {
    font-size: 120%;
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
}

header .top .main .icon {
  width: 100px;
  height: 100px;
  position: absolute;
  right: 20px;
  bottom: 15px;
  -webkit-animation: 4s linear infinite rotation1;
          animation: 4s linear infinite rotation1;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

@keyframes rotation1 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@media (max-width: 896px) {
header .top .main .icon {
  width: 70px;
  height: 70px;
  position: absolute;
  right: 10px;
  bottom: 7px;
  -webkit-animation: 4s linear infinite rotation1;
          animation: 4s linear infinite rotation1;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

@keyframes rotation1 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
}












header .top .main .icon2 {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 125px;
  bottom: 95px;
  -webkit-animation: 4s linear infinite rotation1;
          animation: 4s linear infinite rotation1;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

@keyframes rotation1 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}

@media (max-width: 896px) {
header .top .main .icon2 {
  width: 30px;
  height: 30px;
  position: absolute;
  left: 90px;
  top: 5px;
  -webkit-animation: 4s linear infinite rotation1;
          animation: 4s linear infinite rotation1;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

@keyframes rotation1 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
}

header .top .main .icon3 {
  width: 60px;
  height: 60px;
  position: absolute;
  right: 660px;
  top: 40px;
  -webkit-animation: 4s linear infinite rotation1;
          animation: 4s linear infinite rotation1;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

@keyframes rotation1 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@media (max-width: 896px) {
header .top .main .icon3 {
  width: 60px;
  height: 60px;
  position: absolute;
  left: 20px;
  top: 2px;
  -webkit-animation: 4s linear infinite rotation1;
          animation: 4s linear infinite rotation1;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

@keyframes rotation1 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
}









header .top .main .logo {
  display: none;
}

@media (max-width: 896px) {
  header .top .main .logo {
    width: 80%;
    display: block;
    position: absolute;
    top: 45%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

header .top ul.contents {
  width: 230px;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media (max-width: 896px) {
  header .top ul.contents {
    display: none;
  }
}

header .top ul.contents li {
  border: solid 4px #e5e5e5;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  position: relative;
  overflow: hidden;
}

header .top ul.contents li a {
  text-decoration: none;
}

header .top ul.contents li:hover .mask {
  opacity: 1;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

header .top ul.contents li:hover .imgbox {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

header .top ul.contents li .mask {
  width: 230px;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: #beaf87;
  opacity: 0;
  color: #fff;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  padding: 0px;
  cursor: pointer;
}

header .top ul.contents li .mask .m-image {
  width: 25%;
  margin: 20px auto 10px auto;
  display: block;
}

header .top ul.contents li .mask .m-text {
  color: #fff;
  display: block;
  margin: 10px 20px 20px 20px;
  font-size: 90%;
}

header .top ul.contents li .image {
  width: 100%;
  height: 80px;
  overflow: inherit;
}

header .top ul.contents li .image .imgbox {
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}

header .top ul.contents li .block {
  padding: 11px 10px 11px 10px;
  transform: translate(0%,0%);
  background-color: rgb(0 0 0 / 40%);
}

header .top ul.contents li .block h2 {
  margin: 0 0 1px 0;
  padding: 0;
  font-size: 90%;
}

header .top ul.contents li .block h2.buy {
  color: #e1d3af;
}

header .top ul.contents li .block h2.sale {
  color: #e1d3af;
}

header .top ul.contents li .block h2.build {
  color: #e1d3af;
}

header .top ul.contents li .block h2.reform {
  color: #e1d3af;
}

header .top ul.contents li .block p {
  margin: 0;
  padding: 0;
  font-size: 85%;
  color: #fff;
}

header .top ul.contents li:first-child {
  border: none;
  line-height: 40px;
  height: 40px;
  width: 100%;
}

header .top ul.contents li:first-child a {
  background-color: #beaf87;
  display: block;
  color: #fff;
  text-decoration: none;
  text-align: center;
}

header .top ul.contents li:first-child a:hover {
  opacity: 0.8;
}

header .page h1 {
  background-color: #000;
  color: #fff;
  text-align: center;
  font-size: 80%;
  height: 36px;
  line-height: 36px;
  margin: 0;
  font-weight: normal;
}

@media (max-width: 896px) {
  header .page h1 {
    font-size: 70%;
    height: 26px;
    line-height: 26px;
  }
}

header .page .contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 15px 15px;
}

@media (max-width: 896px) {
  header .page .contents {
    padding: 10px;
  }
}

header .page .contents .logo {
  width: 20%;
  margin: 5px 0 0 0;
}

@media (max-width: 896px) {
  header .page .contents .logo {
    width: 40%;
    margin: 0;
  }
}

header .page .contents ul.nav {
  width: 54%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0;
  margin: 12px 0 0 0;
  list-style: none;
}

@media (max-width: 896px) {
  header .page .contents ul.nav {
    display: none;
  }
}

header .page .contents ul.nav li {
  margin: 0 0.5%;
}

header .page .contents ul.nav li a {
  color: #000;
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-size: 85%;
}

header .page .contents ul.nav li a::after {
  position: absolute;
  bottom: 2px;
  left: 0;
  content: "";
  width: 100%;
  height: 2px;
  background: #beaf87;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

header .page .contents ul.nav li a:hover::after {
  bottom: -4px;
  opacity: 1;
  visibility: visible;
}

header .page .contents .tel {
  width: 20%;
  margin: 0;
}

@media (max-width: 896px) {
  header .page .contents .tel {
    display: none;
  }
}

header .page .contents .tel p {
  padding: 0;
  margin: 5px 0 0 0;
  font-size: 70%;
}

footer .contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-width: 1200px;
  margin: 40px auto;
}

@media (max-width: 896px) {
  footer .contents {
    max-width: 100%;
    margin: 20px auto 20px auto;
    padding: 0 0 30px 0;
  }
}

footer .contents .corporate {
  border-right: solid 1px #dddddd;
  width: 35%;
  text-align: center;
}

@media (max-width: 896px) {
  footer .contents .corporate {
    width: 100%;
    border: none;
  }
}

footer .contents .corporate .logo {
  width: 250px;
  margin: 0 auto;
  margin-top: -50px;
}

@media (max-width: 896px) {
  footer .contents .corporate .logo {
    margin-top: 10px;
    width: 200px;
  }
}

footer .contents .corporate .add {
  font-size: 90%;
  margin: auto auto 5px auto;
}

@media (max-width: 896px) {
  footer .contents .corporate .add {
    font-size: 80%;
  }
}

footer .contents .corporate .tel {
  width: 200px;
  margin: auto auto 5px auto;
}

footer .contents .corporate .hours {
  font-size: 90%;
  margin-bottom: 10px;
}

@media (max-width: 896px) {
  footer .contents .corporate .hours {
    font-size: 80%;
  }
}

footer .contents .menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 60%;
}

@media (max-width: 896px) {
  footer .contents .menu {
    display: none;
  }
}

footer .contents .menu ul {
  padding: 0;
  margin: 0;
  width: 25%;
}

footer .contents .menu ul li {
  font-size: 90%;
  margin: auto auto 10px auto;
}

footer .contents .menu ul li a {
  color: #beaf87;
  text-decoration: none;
}

footer .contents .menu ul li a:hover {
  color: #A19276;
}

footer .copyright {
  width: 100%;
  background-color: #414042;
  color: #beaf87;
  font-size: 80%;
  text-align: center;
  height: 50px;
  line-height: 50px;
}

@media (max-width: 896px) {
  footer .copyright {
    font-size: 70%;
    height: 40px;
    line-height: 40px;
    margin: auto auto 60px auto;
  }
}

ul.sp_footer_nav {
  display: none;
}

@media (max-width: 896px) {
  ul.sp_footer_nav {
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 60px;
    background-color: #beaf87;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 0;
    margin: 0;
    -webkit-box-shadow: 0px -3px 8px -3px rgba(0, 0, 0, 0.6);
            box-shadow: 0px -3px 8px -3px rgba(0, 0, 0, 0.6);
  }
}

ul.sp_footer_nav li {
  width: 50%;
  text-align: center;
  line-height: 60px;
}

ul.sp_footer_nav li a {
  display: block;
  color: #fff;
  text-decoration: none;
}

ul.sp_footer_nav li:first-child {
  border-right: solid 1px #414042;
}

ul.sp_footer_nav li img.company {
  width: 35px;
  vertical-align: middle;
  margin: auto 10px auto auto;
}

ul.sp_footer_nav li img.contact {
  width: 40px;
  vertical-align: middle;
  margin: auto 5px auto auto;
}

.index {
  position: relative;
}

@media (max-width: 896px) {
  .index {
    width: 100%;
  }
}

.index .news {
  margin: 30px auto;
  max-width: 800px;
}

@media (max-width: 896px) {
  .index .news {
    margin: 60px auto;
    width: 80%;
  }
}

.index .news h2 {
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.1em;
  padding: 0;
  margin: 0 0 40px 0;
  font-size: 200%;
  font-weight: bold;
  color: #c42b12;
  text-align: center;
}

@media (max-width: 896px) {
  .index .news h2 {
    font-size: 140%;
    margin: 0 0 30px 0;
  }
}

.index .news h2 span {
  color: #000;
}

.index .news ul {
  padding: 0;
  margin: 0;
}

.index .news ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 0 20px 0;
}

@media (max-width: 896px) {
  .index .news ul li {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: 0 0 24px 0;
  }
}

.index .news ul li .date {
  line-height: 20px;
  margin: 0 10px 10px 0;
}

.index .news ul li .cat {
  background-color: #c42b12;
  color: #fff;
  font-size: 70%;
  line-height: 20px;
  height: 20px;
  padding: 0 4px;
}

@media (max-width: 896px) {
  .index .news ul li .cat {
    margin: auto auto 10px 0;
  }
}

.index .news ul li h3 {
  padding: 0;
  margin: 0;
  font-size: 100%;
  font-weight: normal;
  line-height: 20px;
  width: 80%;
  text-align: left;
}

@media (max-width: 896px) {
  .index .news ul li h3 {
    width: 100%;
    line-height: 24px;
  }
}

.index .news ul li h3 a {
  color: #5f5f5f;
  text-decoration: none;
}

.index .news ul li h3 a:hover {
  color: #a0a0a0;
}

.index .select {
  max-width: 1200px;
  background-color: #fff;
  border: solid 4px #e5e5e5;
  margin: 80px auto;
  padding: 40px;
  -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;
}

@media (max-width: 896px) {
  .index .select {
    width: 85%;
    margin: 40px auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 30px;
  }
}

.index .select .image {
  width: 40%;
  margin: auto 40px auto 40px;
}

@media (max-width: 896px) {
  .index .select .image {
    margin: auto auto 20px auto;
    width: 100%;
  }
}

.index .select .block {
  width: 45%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: auto 40px auto auto;
}

@media (max-width: 896px) {
  .index .select .block {
    margin: auto;
    width: 100%;
  }
}

.index .select .block h2 {
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.1em;
  text-align: left;
  padding: 0;
  margin: 0 0 30px 0;
  font-size: 220%;
  font-weight: bold;
}

@media (max-width: 896px) {
  .index .select .block h2 {
    text-align: center;
    font-size: 160%;
    margin: 0 0 20px -10%;
  }
}

.index .select .block h2 img {
  vertical-align: middle;
  width: 40px;
  margin: -10px 10px auto auto;
}

@media (max-width: 896px) {
  .index .select .block h2 img {
    width: 30px;
  }
}

.index .select .block h3 {
  text-align: left;
  padding: 0;
  margin: 0 0 20px 0;
  font-size: 140%;
  font-weight: bold;
}

@media (max-width: 896px) {
  .index .select .block h3 {
    font-size: 110%;
  }
}

.index .select .block h3 span {
  color: #c42b12;
}

.index .select .block p {
  text-align: left;
  padding: 0;
  margin: 0 0 30px 0;
  font-size: 100%;
  line-height: 30px;
}

@media (max-width: 896px) {
  .index .select .block p {
    font-size: 90%;
    line-height: 26px;
  }
}

.index .select .block .btn {
  background-color: #beaf87;
  width: 260px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

@media (max-width: 896px) {
  .index .select .block .btn {
    width: 100%;
    height: 50px;
    line-height: 50px;
  }
}

.index .select .block .btn a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  display: block;
}

.index .select .block .btn a:hover {
  background-color: #414042;
}

.index .sale {
  max-width: 1200px;
  background-color: #fff;
  border: solid 4px #e5e5e5;
  margin: 80px auto;
  padding: 40px;
  -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;
}

@media (max-width: 896px) {
  .index .sale {
    width: 85%;
    margin: 40px auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 30px;
  }
}

.index .sale .image {
  width: 45%;
}

@media (max-width: 896px) {
  .index .sale .image {
    width: 100%;
    margin: auto auto 30px auto;
  }
}

.index .buy2 {
  margin-top: 30px;
  text-align: center;
}

.index .sale .block {
  width: 45%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: auto 40px auto auto;
}

@media (max-width: 896px) {
  .index .sale .block {
    width: 100%;
  }
}

.index .sale .block h2 {
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.1em;
  text-align: left;
  padding: 0;
  margin: 0 0 30px 0;
  font-size: 220%;
  font-weight: bold;
}

@media (max-width: 896px) {
  .index .sale .block h2 {
    text-align: center;
    font-size: 160%;
    margin: 0 0 20px -10%;
  }
}

.index .sale .block h2 img {
  vertical-align: middle;
  width: 50px;
  margin: -10px 10px auto auto;
}

.index .sale .block h2 img img {
  vertical-align: middle;
  width: 40px;
  margin: -10px 10px auto auto;
}

@media (max-width: 896px) {
  .index .sale .block h2 img img {
    width: 30px;
  }
}

.index .sale .block h3 {
  text-align: left;
  padding: 0;
  margin: 0 0 20px 0;
  font-size: 140%;
  font-weight: bold;
}

.index .sale .block h3 span {
  color: #c42b12;
}

.index .sale .block p {
  text-align: left;
  padding: 0;
  margin: 0 0 30px 0;
  font-size: 100%;
  line-height: 30px;
}

@media (max-width: 896px) {
  .index .sale .block p {
    font-size: 90%;
    line-height: 26px;
  }
}

.index .sale .block .btn {
  background-color: #beaf87;
  width: 260px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

@media (max-width: 896px) {
  .index .sale .block .btn {
    width: 100%;
    height: 50px;
    line-height: 50px;
  }
}

.index .sale .block .btn a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  display: block;
}

.index .sale .block .btn a:hover {
  background-color: #414042;
}

.index .buyp {
  width: 100%;
  background-color: #414042;
  color: #beaf87;
  margin-top: -30px;
  padding-bottom: 30px;
  text-align: center;
}

@@media (max-width: 896px) {
  .index .buyp {
    margin: 0 auto;
  }
}

.index .buyp .buy h2 {
  padding-top: 30px;
}

.index .buy {
  margin: 0 auto;
  max-width: 1200px;
}

@media (max-width: 896px) {
  .index .buy {
    width: 85%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.index .buy h2 {
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.1em;
  padding: 0;
  margin: 0 0 30px 0;
  font-size: 220%;
  font-weight: bold;
  text-align: center;
}

@media (max-width: 896px) {
  .index .buy h2 {
    text-align: center;
    font-size: 160%;
    margin: 0 0 20px -10%;
  }
}

.index .buy h2 img {
  vertical-align: middle;
  width: 50px;
  margin: -10px 10px auto auto;
}

@media (max-width: 896px) {
  .index .buy h2 img {
    width: 50px;
  }
}

.index .buy p {
  padding: 0;
  margn: 0 0 30px 0;
  font-size: 100%;
  line-height: 30px;
  text-align: center;
}

@media (max-width: 896px) {
  .index .buy p {
    font-size: 90%;
    line-height: 26px;
  }
}

.index .buy ul {
  padding: 0;
  margin: 50px 0 0 0;
}

@media (max-width: 896px) {
  .index .buy ul {
    margin: 30px 0 0px 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.index .buy ul li {
  background-color: #fff;
  width: 360px;
  border: solid 4px #e5e5e5;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  float: left;
  margin: auto 60px 60px auto;
}

@media (max-width: 896px) {
  .index .buy ul li {
    float: none;
    width: 100%;
    margin: auto auto 30px auto;
  }
}

.index .buy ul li a {
  text-decoration: none;
}

.index .buy ul li:hover {
  -webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.index .buy ul li:nth-child(3),
.index .buy ul li:nth-child(6) {
    margin: auto auto 60px auto;
}

.index .buy ul li .image img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  height: 220px;
}

.index .buy ul li .block {
  padding: 20px;
  text-align: left;
}

.index .buy ul li .block .add {
  color: #c42b12;
  margin: auto auto 10px auto;
}

@media (max-width: 896px) {
  .index .buy ul li .block .add {
    font-size: 90%;
  }
}

.index .buy ul li .block h3 {
  padding: 0;
  margin: 0;
  font-weight: normal;
  color: #000;
}

@media (max-width: 896px) {
  .index .buy ul li .block h3 {
    font-size: 90%;
  }
}

.index .buy .btn {
  clear: both;
  background-color: #beaf87;
  width: 260px;
  height: 60px;
  line-height: 60px;
  margin: auto;
  text-align: center;
}

@media (max-width: 896px) {
  .index .buy .btn {
    width: 100%;
    height: 50px;
    line-height: 50px;
  }
}

.index .buy .btn a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  display: block;
}

.index .buy .btn a:hover {
  background-color: #414042;
}

.index .refp {
  width: 100%;
  background-color: #414042;
  padding: 5px;
  margin-top: -20px;
  justify-content: center;
}

.index .reform {
  max-width: 1200px;
  border: solid 20px #fff;
  margin: 80px auto;
  -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;
  background-color: #fff;
}

@media (max-width: 896px) {
  .index .reform {
    width: 85%;
    margin: 40px auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 30px;
  }
}

.index .reform .image {
  width: 47%;
}

@media (max-width: 896px) {
  .index .reform .image {
    width: 100%;
    margin: auto auto 30px auto;
  }
}

.index .reform .block {
  width: 48%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media (max-width: 896px) {
  .index .reform .block {
    width: 100%;
  }
}

.index .reform .block h2 {
  font-family: "Montserrat", sans-serif;
  text-align: left;
  padding: 0;
  margin: 0 0 30px 0;
  font-size: 220%;
  font-weight: bold;
}

@media (max-width: 896px) {
  .index .reform .block h2 {
    text-align: center;
    font-size: 140%;
    margin: 0 0 20px 0;
  }
}

.index .reform .block p {
  text-align: left;
  padding: 0;
  margin: 0 0 30px 0;
  font-size: 100%;
  line-height: 30px;
}

@media (max-width: 896px) {
  .index .reform .block p {
    font-size: 90%;
    line-height: 26px;
  }
}

.index .reform .block .btn {
  background-color: #beaf87;
  width: 260px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  margin: 0 auto;
}

@media (max-width: 896px) {
  .index .reform .block .btn {
    width: 100%;
    height: 50px;
    line-height: 50px;
  }
}

.index .reform .block .btn a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  display: block;
}

.index .reform .block .btn a:hover {
  background-color: #414042;
}

.index .topic {
  padding: 80px 0;
  background-color: #f2f2f2;
}

@media (max-width: 896px) {
  .index .topic {
    padding: 40px 0;
  }
}

.index .topic h2 {
  font-family: "Montserrat", sans-serif;
  text-align: center;
  padding: 0;
  margin: 0 0 30px 0;
  font-size: 220%;
  font-weight: bold;
  color: #c42b12;
}

@media (max-width: 896px) {
  .index .topic h2 {
    text-align: center;
    font-size: 170%;
    margin: 0 0 20px -10%;
  }
}

.index .topic h2 img {
  vertical-align: middle;
  width: 40px;
  margin: -5px 10px auto auto;
}

@media (max-width: 896px) {
  .index .topic h2 img {
    width: 35px;
  }
}

.main-img {
  width: 100vw;
  margin: 0 auto;
}

.index .topic p {
  text-align: center;
  padding: 0;
  margin: 0 0 30px 0;
  font-size: 100%;
  line-height: 30px;
}

@media (max-width: 896px) {
  .index .topic p {
    font-size: 90%;
    line-height: 26px;
    margin: auto 10%;
  }
}

.index .topic ul {
  max-width: 1200px;
  padding: 0;
  margin: 50px auto auto auto;
}

@media (max-width: 896px) {
  .index .topic ul {
    margin: 30px auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 85%;
  }
}

.index .topic ul li {
  float: left;
  background-color: #fff;
  width: 260px;
  border: solid 4px #e5e5e5;
  margin: auto 42px 60px auto;
}

@media (max-width: 896px) {
  .index .topic ul li {
    float: none;
    width: auto;
    margin: auto auto 30px auto;
  }
}

.index .topic ul li a {
  text-decoration: none;
}

.index .topic ul li:hover {
  -webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.index .topic ul li:last-child {
  margin: auto auto 60px auto;
}

@media (max-width: 896px) {
  .index .topic ul li:last-child {
    margin: auto auto auto auto;
  }
}

.index .topic ul li .image img {
  width: 100%;
  height: 180px;
  -o-object-fit: cover;
     object-fit: cover;
}

.index .topic ul li .block {
  padding: 20px;
  text-align: left;
}

.index .topic ul li .block ul.tag {
  padding: 0;
  margin: 0;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

@media (max-width: 896px) {
  .index .topic ul li .block ul.tag {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    max-width: 100%;
  }
}

.index .topic ul li .block ul.tag li {
  display: inline-block;
  float: none;
  border: none;
  background-color: #c42b12;
  color: #fff;
  width: auto;
  margin: 0 6px 10px 0;
  font-size: 75%;
  padding: 0 4px;
  height: 20px;
  line-height: 20px;
}

@media (max-width: 896px) {
  .index .topic ul li .block ul.tag li {
    margin: 0 6px 10px 0;
  }
}

.index .topic ul li .block h3 {
  font-size: 90%;
  padding: 0;
  margin: 0 0 10px 0;
  font-weight: normal;
  color: #000;
}

.index .topic ul li .block .date {
  line-height: 20px;
  margin: 0 10px 0 0;
  color: #808080;
  font-size: 90%;
}

.index .topic .btn {
  clear: both;
  background-color: #beaf87;
  width: 260px;
  height: 60px;
  line-height: 60px;
  margin: auto;
  text-align: center;
}

@media (max-width: 896px) {
  .index .topic .btn {
    width: 85%;
    height: 50px;
    line-height: 50px;
  }
}

.index .topic .btn a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  display: block;
}

.index .topic .btn a:hover {
  background-color: #414042;
}

.index .bg-top {
  position: absolute;
  background-color: #ffffff;
  height: 525px;
  width: 100%;
  top: 100px;
  z-index: -1;
}

@media (max-width: 896px) {
  .index .bg-top {
    display: none;
  }
}

.index .bg-bottom {
  position: absolute;
  background-color: #ffffff;
  height: 700px;
  width: 100%;
  top: 1050px;
  z-index: -1;
}

@media (max-width: 896px) {
  .index .bg-bottom {
    display: none;
  }
}

.index .banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 90%;
  margin: 40px auto;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media (max-width: 896px) {
  .index .banner {
    margin: 20px auto;
    width: 90%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.index .banner .item {
  margin: 20px;
}

@media (max-width: 896px) {
  .index .banner .item {
    width: 100%;
    margin: 0px 0px 20px 0px;
  }
}

.index .banner .item img {
  width: 100%;
}

.container {
  position: relative;
  overflow: hidden;
}

.container .icon-l {
  width: 150px;
  height: 150px;
  position: absolute;
  left: -30px;
  bottom: 0px;
}

@media (max-width: 896px) {
  .container .icon-l {
    display: none;
  }
}

.container .icon-r {
  width: 120px;
  height: 120px;
  position: absolute;
  right: -30px;
  bottom: 200px;
}

@media (max-width: 896px) {
  .container .icon-r {
    display: none;
  }
}

.container .pagetitle {
  background-color: #beaf87;
  text-align: center;
  color: #fff;
  padding: 60px 0;
  overflow: hidden;
  position: relative;
}

@media (max-width: 896px) {
  .container .pagetitle {
    padding: 30px 0;
  }
}

.container .pagetitle h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 200%;
  padding: 0;
  margin: 0 0 5px 0px;
  font-weight: normal;
  letter-spacing: 0.1em;
}

@media (max-width: 896px) {
  .container .pagetitle h2 {
    font-size: 130%;
    letter-spacing: 0em;
  }
}

.container .pagetitle h2 img {
  width: 50px;
  margin: auto 10px auto auto;
}

@media (max-width: 896px) {
  .container .pagetitle h2 img {
    margin: auto 5px auto auto;
    width: 36px;
  }
}

.container .pagetitle p {
  font-family: "Montserrat", sans-serif;
  padding: 0;
  margin: 0 0 0 0;
}

@media (max-width: 896px) {
  .container .pagetitle p {
    font-size: 80%;
  }
}

.container .pagetitle .flower-l {
  width: 150px;
  position: absolute;
  top: -30px;
  left: 15%;
}

@media (max-width: 896px) {
  .container .pagetitle .flower-l {
    width: 80px;
    top: -23px;
    left: 2%;
  }
}

.container .pagetitle .flower-r {
  width: 100px;
  position: absolute;
  bottom: -20px;
  right: 10%;
}

@media (max-width: 896px) {
  .container .pagetitle .flower-r {
    width: 60px;
    bottom: -10px;
    right: 3%;
  }
}

.container .topic {
  width: 1200px;
  margin: auto;
}

@media (max-width: 896px) {
  .container .topic {
    width: 100%;
  }
}

.container .topic ul {
  max-width: 1200px;
  padding: 0;
  margin: 100px auto 30px auto;
}

@media (max-width: 896px) {
  .container .topic ul {
    display: block;
    margin: 30px auto;
    max-width: 85%;
  }
}

.container .topic ul li {
  float: left;
  background-color: #fff;
  width: 260px;
  border: solid 4px #e5e5e5;
  margin: auto 42px 60px auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 896px) {
  .container .topic ul li {
    float: none;
    width: 100%;
    margin: auto auto 30px auto;
  }
}

.container .topic ul li a {
  text-decoration: none;
}

.container .topic ul li:hover {
  -webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.container .topic ul li:nth-child(4n) {
  margin: auto auto 60px auto;
}

@media (max-width: 896px) {
  .container .topic ul li:nth-child(4n) {
    margin: auto auto 30px auto;
  }
}

.container .topic ul li .image img {
  width: 100%;
  height: 180px;
  -o-object-fit: cover;
     object-fit: cover;
}

.container .topic ul li .block {
  padding: 20px;
  text-align: left;
}

.container .topic ul li .block ul.tag {
  padding: 0;
  margin: 0;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

@media (max-width: 896px) {
  .container .topic ul li .block ul.tag {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    max-width: 100%;
  }
}

.container .topic ul li .block ul.tag li {
  display: inline-block;
  float: none;
  border: none;
  background-color: #beaf87;
  color: #fff;
  width: auto;
  margin: 0 6px 10px 0;
  font-size: 75%;
  padding: 0 4px;
  height: 20px;
  line-height: 20px;
}

@media (max-width: 896px) {
  .container .topic ul li .block ul.tag li {
    display: inline-block;
    margin: 0 6px 10px 0;
  }
}

.container .topic ul li .block h3 {
  font-size: 90%;
  padding: 0;
  margin: 0 0 10px 0;
  font-weight: normal;
  color: #000;
}

.container .topic ul li .block .date {
  line-height: 20px;
  margin: 0 10px 0 0;
  color: #808080;
  font-size: 90%;
}

.container .topic .pager {
  clear: both;
  text-align: center;
  margin: 0px auto 100px auto;
}

@media (max-width: 896px) {
  .container .topic .pager {
    margin: 50px auto 50px auto;
  }
}

.container .topic .pager a:hover {
  color: #ffffff;
  background-color: #414042;
  border: solid 1px #beaf87;
}

.container .topic .pager .current {
  background-color: #fff;
  color: #c42b12;
  border: solid 1px #beaf87;
}

.container .topic a.page-numbers,
.container .topic .current {
  border: solid 1px #beaf87;
  background-color: #beaf87;
  color: #fff;
  margin: 0 4px;
  padding: 10px 12px;
  border-radius: 2px;
}

.container .topic .dots {
  color: #959595;
}

.container .topic_article {
  max-width: 800px;
  padding: 0;
  margin: 100px auto 30px auto;
  text-align: left;
}

@media (max-width: 896px) {
  .container .topic_article {
    margin: 30px auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 85%;
  }
}

.container .topic_article .title {
  font-size: 210%;
  padding: 0;
  margin: auto auto 20px auto;
  font-weight: bold;
}

@media (max-width: 896px) {
  .container .topic_article .title {
    font-size: 150%;
  }
}

.container .topic_article .date {
  line-height: 20px;
  margin: auto auto 20px auto;
  color: #808080;
  font-size: 100%;
}

.container .topic_article ul.tag {
  padding: 0;
  margin: 0;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

@media (max-width: 896px) {
  .container .topic_article ul.tag {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    max-width: 100%;
  }
}

.container .topic_article ul.tag li {
  display: inline-block;
  border: none;
  background-color: #e8e8e8;
  color: #8d8d8d;
  width: auto;
  margin: 0 6px 10px 0;
  font-size: 80%;
  padding: 0 4px;
  height: 20px;
  line-height: 20px;
}

@media (max-width: 896px) {
  .container .topic_article ul.tag li {
    margin: 0 6px 10px 0;
  }
}

.container .topic_article img {
  max-width: 100%;
  height: auto;
}

.container .topic_article img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

.container .topic_article img.alignleft {
  display: block;
  margin: 0 auto 0 0;
}

.container .topic_article img.aligncenter {
  display: block;
  margin: 0 auto;
}

.container .topic_article ul {
  padding: 0 0 0 20px;
  margin: 0;
  list-style: disc;
}

.container .topic_article p {
  padding: 0;
  margin: 30px 0;
  font-size: 100%;
  line-height: 30px;
}

.container .topic_article h1 {
  background-color: #beaf87;
  color: #fff;
  padding: 10px;
  font-size: 150%;
  border-radius: 3px;
}

.container .topic_article h2 {
  border-bottom: solid 1px #beaf87;
  color: #c42b12;
  padding: 0 0 6px 0;
}

.container .topic_article blockquote {
  color: #2b2b2b;
  font-size: 100%;
  font-style: italic;
  font-weight: 300;
  background: #f5f5f5;
  -webkit-margin-start: 0px;
          margin-inline-start: 0px;
  -webkit-margin-end: 0px;
          margin-inline-end: 0px;
  padding: 20px;
}

.container .topic_article blockquote p {
  margin: 0;
  padding: 0;
}

.container .contact {
  width: 800px;
  margin: 100px auto;
  text-align: center;
}

@media (max-width: 896px) {
  .container .contact {
    margin: 40px auto;
    width: 90%;
  }
}

.container .contact table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border-top: solid 1px #dddddd;
}

.container .contact table tr {
  border-bottom: solid 1px #dddddd;
}

.container .contact table tr th {
  padding: 20px 0;
  text-align: left;
  width: 25%;
}

@media (max-width: 896px) {
  .container .contact table tr th {
    padding: 10px 0 5px 0;
    width: 100%;
    display: block;
  }
}

.container .contact table tr th span.required {
  background-color: #c42b12;
  color: #fff;
  font-size: 75%;
  padding: 2px 4px 3px 4px;
  font-weight: normal;
  border-radius: 2px;
  margin: auto auto auto 4px;
}

.container .contact table tr td {
  padding: 20px 0;
  text-align: left;
}

@media (max-width: 896px) {
  .container .contact table tr td {
    padding: 5px 0 15px 0;
    width: 100%;
    display: block;
  }
}

.container .contact input[type="text"] {
  border: solid 1px #c6c6c6;
  width: 95%;
  font-size: 16px;
  -webkit-appearance: none;
  margin: auto auto auto auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  border-radius: 2px;
}

@media (max-width: 896px) {
  .container .contact input[type="text"] {
    width: 100%;
  }
}

.container .contact input[type="email"] {
  border: solid 1px #c6c6c6;
  width: 95%;
  font-size: 16px;
  -webkit-appearance: none;
  margin: auto auto auto auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  border-radius: 2px;
}

@media (max-width: 896px) {
  .container .contact input[type="email"] {
    width: 100%;
  }
}

.container .contact textarea {
  border: solid 1px #c6c6c6;
  width: 95%;
  font-size: 16px;
  -webkit-appearance: none;
  margin: auto auto auto auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  border-radius: 2px;
  height: 200px;
}

@media (max-width: 896px) {
  .container .contact textarea {
    width: 100%;
  }
}

.container .contact input[type="submit"] {
  border: none;
  background-color: #beaf87;
  color: #fff;
  width: 30%;
  font-size: 15px;
  -webkit-appearance: none;
  margin: auto auto auto auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 15px 0;
  cursor: pointer;
}

@media (max-width: 896px) {
  .container .contact input[type="submit"] {
    width: 100%;
  }
}

.container .contact .address input[type="text"] {
  width: auto;
  margin: auto auto 10px auto;
}

@media (max-width: 896px) {
  .container .contact .address input[type="text"] {
    width: 100%;
  }
}

.container .contact .address input[type="text"]:last-child {
  margin: auto auto auto auto;
}

.container .contact p {
  text-align: center;
  padding: 0;
  margin: 40px 0 40px 0;
}

.container .contact .title {
  padding: 0;
  margin: 0 0 20px 0;
  font-size: 140%;
  font-weight: bold;
}

.container .contact .text {
  margin: 0 0 40px 0;
  font-size: 100%;
}

.container .contact .btn {
  border: none;
  background-color: #beaf87;
  width: 30%;
  font-size: 15px;
  -webkit-appearance: none;
  margin: auto auto auto auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 896px) {
  .container .contact .btn {
    width: 100%;
  }
}

.container .contact .btn a {
  padding: 15px 0;
  display: block;
  color: #fff;
  text-decoration: none;
}

.container .contact .btn a:hover {
  background-color: #414042;
}

.container .reform {
  width: 1000px;
  margin: auto auto 40px auto;
}

@media (max-width: 896px) {
  .container .reform {
    width: 85%;
    margin: auto auto 20px auto;
  }
}

.container .reform h2 {
  text-align: center;
  margin: 60px 0 60px 0;
  padding: 0;
}

@media (max-width: 896px) {
  .container .reform h2 {
    margin: 30px 0;
    font-size: 100%;
  }
}

.container .reform ul.image {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.container .reform ul.image li {
  width: 499px;
  margin: 0 0 2px 0;
}

@media (max-width: 896px) {
  .container .reform ul.image li {
    width: 49.7%;
  }
}

.container .reform p {
  text-align: left;
  padding: 0;
  margin: 40px 0 40px 0;
  font-size: 100%;
  line-height: 30px;
}

@media (max-width: 896px) {
  .container .reform p {
    font-size: 90%;
    line-height: 26px;
    margin: 20px 0;
  }
}

.container .reform p span {
  color: #c42b12;
  font-weight: bold;
}

.container .reform .example {
  border: 4px solid #beaf87;
}

.container .reform .example h3 {
  padding: 15px;
  margin: 0;
  background-color: #beaf87;
  color: #fff;
}

@media (max-width: 896px) {
  .container .reform .example h3 {
    padding: 10px;
    font-size: 100%;
    text-align: center;
  }
}

.container .reform .example .text {
  margin: 30px;
}

@media (max-width: 896px) {
  .container .reform .example .text {
    margin: 20px;
    font-size: 90%;
  }
}

.container .reform .example .notes {
  margin: 0px 30px;
}

@media (max-width: 896px) {
  .container .reform .example .notes {
    margin: 0px 20px;
    font-size: 80%;
  }
}

.container .reform .example .notes span.gray {
  background-color: #ebebeb;
}

.container .reform .example .notes span.red {
  background-color: #facdcd;
}

.container .reform .example ul.pattern {
  margin: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0;
}

@media (max-width: 896px) {
  .container .reform .example ul.pattern {
    margin: 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.container .reform .example ul.pattern li {
  width: 30%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media (max-width: 896px) {
  .container .reform .example ul.pattern li {
    width: 100%;
    margin: auto auto 30px auto;
  }
}

@media (max-width: 896px) {
  .container .reform .example ul.pattern li:last-child {
    margin: auto auto auto auto;
  }
}

.container .reform .example ul.pattern li .block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 0 15px 0;
}

@media (max-width: 896px) {
  .container .reform .example ul.pattern li .block {
    margin: 0 0 10px 0;
  }
}

.container .reform .example ul.pattern li .block .icon {
  margin: 0 15px 0 0;
}

.container .reform .example ul.pattern li .block .icon img {
  width: 50px;
}

@media (max-width: 896px) {
  .container .reform .example ul.pattern li .block .icon img {
    width: 40px;
  }
}

.container .reform .example ul.pattern li .block h4 {
  color: #c42b12;
  padding: 0;
  margin: 0;
  line-height: 25px;
}

@media (max-width: 896px) {
  .container .reform .example ul.pattern li .block h4 {
    font-size: 90%;
    line-height: 20px;
  }
}

.container .reform .example ul.pattern li table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.container .reform .example ul.pattern li table tr td {
  text-align: center;
  padding: 10px 0;
}

@media (max-width: 896px) {
  .container .reform .example ul.pattern li table tr td {
    font-size: 90%;
  }
}

.container .reform .example ul.pattern li table tr td.gray {
  background-color: #ebebeb;
}

.container .reform .example ul.pattern li table tr td.red {
  background-color: #facdcd;
}

.container .reform .comment {
  position: relative;
  background-size: auto auto;
  background-color: white;
  background-image: repeating-linear-gradient(135deg, transparent, transparent 2px, #ff0101 2px, #ff0101 4px);
  padding: 10px;
}

@media (max-width: 896px) {
  .container .reform .comment {
    margin: 120px auto auto auto;
  }
}

.container .reform .comment .text {
  background-color: #fff;
  padding: 20px;
  font-size: 100%;
  line-height: 30px;
}

@media (max-width: 896px) {
  .container .reform .comment .text {
    font-size: 90%;
    line-height: 24px;
  }
}

.container .reform .comment .icon {
  position: absolute;
  top: -50px;
  right: 30px;
  width: 150px;
}

@media (max-width: 896px) {
  .container .reform .comment .icon {
    width: 120px;
    top: -100px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

.container .reform .comment .icon img {
  width: 100%;
}

.container .faq {
  width: 900px;
  margin: 80px auto;
}

@media (max-width: 896px) {
  .container .faq {
    width: 85%;
    margin: 40px auto;
  }
}

.container .faq .title {
  margin: 40px auto;
  padding: 10px 15px;
  background-color: #414042;
  font-size: 130%;
  font-weight: bold;
  color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 896px) {
  .container .faq .title {
    text-align: center;
    font-size: 120%;
  }
}

.container .faq ul {
  margin: 0;
  padding: 0;
}

@media (max-width: 896px) {
  .container .faq ul {
    font-size: 110%;
  }
}

.container .faq ul li {
  width: 100%;
  margin: 0 auto 40px auto;
}

.container .faq ul li h3 {
  font-size: 110%;
  margin: 0 auto 20px auto;
  padding: 0 0 0 40px;
  background-image: url(/common/img/faq_icon-q.svg);
  background-repeat: no-repeat;
  background-size: 24px;
}

@media (max-width: 896px) {
  .container .faq ul li h3 {
    font-size: 100%;
    line-height: 30px;
    padding: 0 0 0 40px;
    margin: 0 auto 10px auto;
  }
}

.container .faq ul li .answer {
  padding: 0 0 0 40px;
  background-image: url(/common/img/faq_icon-a.svg);
  background-repeat: no-repeat;
  display: inline-block;
  background-size: 24px;
}

@media (max-width: 896px) {
  .container .faq ul li .answer {
    padding: 0 0 0 40px;
  }
}

.container .faq ul li .answer p {
  font-size: 100%;
  margin: 0 auto 0 auto;
}

@media (max-width: 896px) {
  .container .faq ul li .answer p {
    font-size: 90%;
  }
}

.container .faq ul li .answer ul.item {
  margin: 10px auto auto 20px;
}

.container .faq ul li .answer ul.item li {
  font-size: 100%;
  margin: 0;
  width: 98%;
  list-style: disc;
}

@media (max-width: 896px) {
  .container .faq ul li .answer ul.item li {
    font-size: 75%;
  }
}

.container .privacy {
  width: 800px;
  margin: 80px auto;
}

@media (max-width: 896px) {
  .container .privacy {
    width: 85%;
    margin: 40px auto;
  }
}

.container .privacy ul {
  padding: 0;
}

.container .privacy ul li {
  margin: 0 0 40px 0;
}

@media (max-width: 896px) {
  .container .privacy ul li {
    margin: 0 0 20px 0;
  }
}

.container .privacy ul li h2 {
  padding: 0 0 0 13px;
  margin: 0 0 20px 0;
  font-size: 120%;
  font-weight: bold;
  border-left: solid 4px #beaf87;
}

@media (max-width: 896px) {
  .container .privacy ul li h2 {
    font-size: 110%;
    margin: 0 0 10px 0;
  }
}

.container .privacy ul li p {
  padding: 0;
  margin: 0 0 0 15px;
  font-size: 90%;
}

@media (max-width: 896px) {
  .container .privacy ul li p {
    font-size: 80%;
  }
}

.container .privacy ul li ul.item {
  margin: 0 20px 0 20px;
}

.container .privacy ul li ul.item li {
  margin: 0 0 0 15px;
  padding: 0;
  list-style: decimal;
  font-size: 90%;
}

@media (max-width: 896px) {
  .container .privacy ul li ul.item li {
    font-size: 80%;
  }
}

.container .comingsoon {
  margin: 100px auto;
  text-align: center;
}

@media (max-width: 896px) {
  .container .comingsoon {
    margin: 80px auto;
  }
}

.container .comingsoon h2 {
  font-size: 260%;
  font-weight: bold;
  color: #ccc;
  padding: 0;
  margin: auto auto 20px auto;
}

@media (max-width: 896px) {
  .container .comingsoon h2 {
    font-size: 200%;
  }
}

.container .comingsoon p {
  font-size: 120%;
  padding: 0;
  margin: auto;
}

@media (max-width: 896px) {
  .container .comingsoon p {
    font-size: 100%;
  }
}

.container .sale {
  width: 800px;
  margin: 80px auto;
  text-align: center;
}

@media (max-width: 896px) {
  .container .sale {
    margin: 40px auto;
    width: 90%;
  }
}

.container .sale h2 {
  font-size: 180%;
  margin: auto auto 20px auto;
  padding: 0;
}

@media (max-width: 896px) {
  .container .sale h2 {
    font-size: 120%;
    margin: auto auto 10px auto;
  }
}

.container .sale p {
  text-align: center;
  padding: 0;
  margin: 0px 0 40px 0;
}

@media (max-width: 896px) {
  .container .sale p {
    font-size: 90%;
  }
}

.container .sale table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border-top: solid 1px #dddddd;
  margin: 40px 0;
}

.container .sale table tr {
  border-bottom: solid 1px #dddddd;
}

.container .sale table tr th {
  padding: 20px 0;
  text-align: left;
  width: 25%;
}

@media (max-width: 896px) {
  .container .sale table tr th {
    padding: 10px 0 5px 0;
    width: 100%;
    display: block;
  }
}

.container .sale table tr th span.required {
  background-color: #c42b12;
  color: #fff;
  font-size: 75%;
  padding: 2px 4px 3px 4px;
  font-weight: normal;
  border-radius: 2px;
  margin: auto auto auto 4px;
}

.container .sale table tr td {
  text-align: left;
  padding: 20px 0;
}

@media (max-width: 896px) {
  .container .sale table tr td {
    padding: 5px 0 15px 0;
    width: 100%;
    display: block;
  }
}

.container .sale input[type="text"] {
  border: solid 1px #c6c6c6;
  width: 95%;
  font-size: 16px;
  -webkit-appearance: none;
  margin: auto auto auto auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  border-radius: 2px;
}

@media (max-width: 896px) {
  .container .sale input[type="text"] {
    width: 100%;
  }
}

.container .sale input[type="email"] {
  border: solid 1px #c6c6c6;
  width: 95%;
  font-size: 16px;
  -webkit-appearance: none;
  margin: auto auto auto auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  border-radius: 2px;
}

@media (max-width: 896px) {
  .container .sale input[type="email"] {
    width: 100%;
  }
}

.container .sale textarea {
  border: solid 1px #c6c6c6;
  width: 95%;
  font-size: 16px;
  -webkit-appearance: none;
  margin: auto auto auto auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  border-radius: 2px;
  height: 200px;
}

@media (max-width: 896px) {
  .container .sale textarea {
    width: 100%;
  }
}

.container .sale input[type="submit"] {
  border: none;
  background-color: #beaf87;
  color: #fff;
  width: 30%;
  font-size: 15px;
  -webkit-appearance: none;
  margin: auto auto auto auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 15px 0;
  cursor: pointer;
}

@media (max-width: 896px) {
  .container .sale input[type="submit"] {
    width: 100%;
  }
}

.container .sale .address input[type="text"] {
  width: auto;
  margin: auto auto 10px auto;
}

@media (max-width: 896px) {
  .container .sale .address input[type="text"] {
    width: 100%;
  }
}

.container .sale .address input[type="text"]:last-child {
  margin: auto auto auto auto;
}

.container .sale select {
  font-size: 16px;
}

.container .sale .title {
  padding: 0;
  margin: 0 0 20px 0;
  font-size: 140%;
  font-weight: bold;
}

.container .sale .text {
  margin: 0 0 40px 0;
  font-size: 100%;
}

.container .sale .btn {
  border: none;
  background-color: #beaf87;
  width: 30%;
  font-size: 15px;
  -webkit-appearance: none;
  margin: auto auto auto auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 896px) {
  .container .sale .btn {
    width: 100%;
  }
}

.container .sale .btn a {
  padding: 15px 0;
  display: block;
  color: #fff;
  text-decoration: none;
}

.container .sale .btn a:hover {
  background-color: #414042;
}

.container .buy {
  width: 1200px;
  margin: 80px auto 40px auto;
  text-align: center;
}

@media (max-width: 896px) {
  .container .buy {
    width: 85%;
    margin: auto auto 20px auto;
  }
}

.container .buy h2 {
  font-size: 180%;
  margin: auto auto 60px auto;
  padding: 0;
}

@media (max-width: 896px) {
  .container .buy h2 {
    font-size: 120%;
    margin: 40px auto 10px auto;
  }
}

.container .buy ul {
  padding: 0;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media (max-width: 896px) {
  .container .buy ul {
    display: block;
    margin: 30px 0 0px 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.container .buy ul::after {
  display: block;
  content: "";
  width: 360px;
}

.container .buy ul li {
  background-color: #fff;
  width: 360px;
  border: solid 4px #e5e5e5;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: auto 0 40px 0;
}

@media (max-width: 896px) {
  .container .buy ul li {
    width: auto;
    margin: auto auto 30px auto;
  }
}

.container .buy ul li a {
  text-decoration: none;
}

.container .buy ul li:hover {
  -webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.container .buy ul li .image img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  height: 220px;
}

.container .buy ul li .block {
  padding: 20px;
  text-align: left;
}

.container .buy ul li .block .add {
  color: #c42b12;
  margin: auto auto 10px auto;
}

@media (max-width: 896px) {
  .container .buy ul li .block .add {
    font-size: 90%;
  }
}

.container .buy ul li .block h3 {
  padding: 0;
  margin: 0;
  font-weight: normal;
  color: #000;
}

@media (max-width: 896px) {
  .container .buy ul li .block h3 {
    font-size: 90%;
  }
}

.container .news {
  margin: 80px auto;
  max-width: 800px;
}

@media (max-width: 896px) {
  .container .news {
    margin: 60px auto;
    width: 80%;
  }
}

.container .news ul {
  padding: 0;
  margin: 0;
}

.container .news ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 0 20px 0;
}

@media (max-width: 896px) {
  .container .news ul li {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: 0 0 24px 0;
  }
}

.container .news ul li .date {
  line-height: 20px;
  margin: 0 10px 10px 0;
}

.container .news ul li .cat {
  background-color: #c42b12;
  color: #fff;
  font-size: 70%;
  line-height: 20px;
  height: 20px;
  padding: 0 4px;
}

@media (max-width: 896px) {
  .container .news ul li .cat {
    margin: auto auto 10px 0;
  }
}

.container .news ul li h3 {
  padding: 0;
  margin: 0;
  font-size: 100%;
  font-weight: normal;
  line-height: 20px;
  width: 80%;
  text-align: left;
}

@media (max-width: 896px) {
  .container .news ul li h3 {
    width: 100%;
    line-height: 24px;
  }
}

.container .news ul li h3 a {
  color: #5f5f5f;
  text-decoration: none;
}

.container .news ul li h3 a:hover {
  color: #a0a0a0;
}

.container .news .pager {
  text-align: center;
  margin: 0px auto 100px auto;
}

@media (max-width: 896px) {
  .container .news .pager {
    margin: 50px auto 50px auto;
  }
}

.container .news .pager a:hover {
  color: #ffffff;
  background-color: #414042;
  border: solid 1px #beaf87;
}

.container .news .pager .current {
  background-color: #fff;
  color: #c42b12;
  border: solid 1px #beaf87;
}

.container .news a.page-numbers,
.container .news .current {
  border: solid 1px #beaf87;
  background-color: #beaf87;
  color: #fff;
  margin: 0 4px;
  padding: 10px 12px;
  border-radius: 2px;
}

.container .news .dots {
  color: #959595;
}

.container .news_article {
  max-width: 800px;
  padding: 0;
  margin: 100px auto 30px auto;
  text-align: left;
}

@media (max-width: 896px) {
  .container .news_article {
    margin: 30px auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 85%;
  }
}

.container .news_article .title {
  font-size: 210%;
  padding: 0;
  margin: auto auto 20px auto;
  font-weight: bold;
}

@media (max-width: 896px) {
  .container .news_article .title {
    font-size: 150%;
  }
}

.container .news_article .date {
  line-height: 20px;
  margin: auto auto 20px auto;
  color: #808080;
  font-size: 100%;
}

.container .news_article ul.tag {
  padding: 0;
  margin: 0;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

@media (max-width: 896px) {
  .container .news_article ul.tag {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    max-width: 100%;
  }
}

.container .news_article ul.tag li {
  display: inline-block;
  border: none;
  background-color: #e8e8e8;
  color: #8d8d8d;
  width: auto;
  margin: 0 6px 10px 0;
  font-size: 80%;
  padding: 0 4px;
  height: 20px;
  line-height: 20px;
}

@media (max-width: 896px) {
  .container .news_article ul.tag li {
    margin: 0 6px 10px 0;
  }
}

.container .news_article img {
  max-width: 100%;
  height: auto;
}

.container .news_article img.alignright {
  display: block;
  margin: 0 0 0 auto;
}

.container .news_article img.alignleft {
  display: block;
  margin: 0 auto 0 0;
}

.container .news_article img.aligncenter {
  display: block;
  margin: 0 auto;
}

.container .news_article ul {
  padding: 0 0 0 20px;
  margin: 0;
  list-style: disc;
}

.container .news_article p {
  padding: 0;
  margin: 30px 0;
  font-size: 100%;
  line-height: 30px;
}

.container .news_article h1 {
  background-color: #beaf87;
  color: #fff;
  padding: 10px;
  font-size: 150%;
  border-radius: 3px;
}

.container .news_article h2 {
  border-bottom: solid 1px #beaf87;
  color: #c42b12;
  padding: 0 0 6px 0;
}

.container .news_article blockquote {
  color: #2b2b2b;
  font-size: 100%;
  font-style: italic;
  font-weight: 300;
  background: #f5f5f5;
  -webkit-margin-start: 0px;
          margin-inline-start: 0px;
  -webkit-margin-end: 0px;
          margin-inline-end: 0px;
  padding: 20px;
}

.container .news_article blockquote p {
  margin: 0;
  padding: 0;
}

.container .select {
  width: 1000px;
  margin: 40px auto 40px auto;
  text-align: center;
}

@media (max-width: 896px) {
  .container .select {
    width: 85%;
    margin: auto auto 20px auto;
  }
}

.container .select h2.flow {
  color: #c42b12;
  padding: 50px 0;
  margin: 0;
  font-size: 180%;
}

@media (max-width: 896px) {
  .container .select h2.flow {
    font-size: 120%;
    padding: 40px 0 30px 0;
  }
}

.container .select h2.strengths {
  border-top: 1px solid #e2e2e2;
  padding: 50px 0;
  margin: 0;
  font-size: 180%;
}

@media (max-width: 896px) {
  .container .select h2.strengths {
    font-size: 120%;
    padding: 30px 0;
  }
}

.container .select p {
  padding: 0;
  margin: 0;
}

@media (max-width: 896px) {
  .container .select p {
    font-size: 80%;
  }
}

.container .select img {
  margin: 0 0 40px -20px;
}

@media (max-width: 896px) {
  .container .select img {
    margin: 30px 0;
  }
}

.container .select ul {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media (max-width: 896px) {
  .container .select ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.container .select ul li {
  width: 48%;
  margin: 0 0 40px 0;
  padding: 0;
}

@media (max-width: 896px) {
  .container .select ul li {
    width: 100%;
  }
}

@media (max-width: 896px) {
  .container .select ul li:last-child {
    margin: 0 0 0px 0;
  }
}

.container .select ul li .image {
  margin: 0 0 0px 0;
}

.container .select ul li .image img {
  margin: 0;
}

.container .select ul li h4 {
  font-size: 110%;
  margin: 0 0 15px 0;
  padding: 0;
  text-align: left;
}

@media (max-width: 896px) {
  .container .select ul li h4 {
    font-size: 100%;
    margin: 0 0 10px 0;
  }
}

.container .select ul li p {
  margin: 0;
  padding: 0;
  text-align: left;
}

@media (max-width: 896px) {
  .container .select ul li p {
    font-size: 90%;
  }
}

.container .company {
  height: auto;
  margin: auto;
}

.container .company .logo {
  width: 400px;
  margin: 80px auto;
}

@media (max-width: 767px) {
  .container .company .logo {
    width: 80%;
    margin: 40px auto;
  }
}

.container .company .philosophy {
  background-image: url(../img/company_bg.svg);
  height: 650px;
  background-position: center;
  background-size: cover;
  position: relative;
  margin: 0 0 150px 0;
}

@media (max-width: 896px) {
  .container .company .philosophy {
    height: 400px;
    margin: 0 0 60px 0;
  }
}

.container .company .philosophy .contents {
  background-color: #fff;
  padding: 80px;
  width: 400px;
  position: absolute;
  bottom: -80px;
  right: 10%;
}

@media (max-width: 896px) {
  .container .company .philosophy .contents {
    right: 50%;
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
    width: 78%;
    padding: 8% 2%;
    bottom: 0px;
    text-align: center;
  }
}

.container .company .philosophy .contents h2 {
  padding: 0;
  margin: 0 0 30px 0;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.1em;
  font-size: 250%;
}

@media (max-width: 896px) {
  .container .company .philosophy .contents h2 {
    font-size: 180%;
    margin: 0 0 20px 0;
  }
}

.container .company .philosophy .contents h2 span {
  color: #c42b12;
}

.container .company .philosophy .contents p {
  padding: 0;
  margin: 0;
  font-family: "Noto Serif JP", serif;
  line-height: 50px;
  font-size: 150%;
}

@media (max-width: 896px) {
  .container .company .philosophy .contents p {
    font-size: 100%;
    line-height: 30px;
  }
}

.container .company .vision {
  margin: 0 0 150px 0;
  text-align: center;
}

@media (max-width: 896px) {
  .container .company .vision {
    width: 85%;
    margin: 0 auto 60px auto;
  }
}

.container .company .vision h2 {
  padding: 0;
  margin: 0 0 60px 0;
  font-size: 180%;
}

@media (max-width: 896px) {
  .container .company .vision h2 {
    font-size: 150%;
    margin: 0 0 30px 0;
  }
}

.container .company .vision p {
  font-size: 140%;
  padding: 0;
  margin: 0;
  font-family: "Noto Serif JP", serif;
  line-height: 50px;
}

@media (max-width: 896px) {
  .container .company .vision p {
    font-size: 100%;
    line-height: 30px;
  }
}

.container .company .motto {
  margin: 0 0 150px 0;
  text-align: center;
}

@media (max-width: 896px) {
  .container .company .motto {
    width: 85%;
    margin: 0 auto 60px auto;
  }
}

.container .company .motto h2 {
  padding: 0;
  margin: 0 0 60px 0;
  font-size: 180%;
}

@media (max-width: 896px) {
  .container .company .motto h2 {
    font-size: 150%;
    margin: 0 0 30px 0;
  }
}

.container .company .motto table {
  margin: auto;
}

.container .company .motto table tr td {
  text-align: left;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.1em;
  font-size: 140%;
  padding: 5px 20px;
}

@media (max-width: 896px) {
  .container .company .motto table tr td {
    display: block;
    font-size: 110%;
  }
}

.container .company .motto table tr td .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.container .company .message {
  width: 1100px;
  margin: 0 auto 100px auto;
  text-align: center;
}

@media (max-width: 896px) {
  .container .company .message {
    width: 85%;
    margin: 0 auto 60px auto;
  }
}

.container .company .message h2 {
  padding: 0;
  margin: 0 0 80px 0;
  font-size: 180%;
}

@media (max-width: 896px) {
  .container .company .message h2 {
    font-size: 150%;
    margin: 0 0 30px 0;
  }
}

.container .company .message .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media (max-width: 896px) {
  .container .company .message .flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.container .company .message .flex .image {
  width: 460px;
}

@media (max-width: 896px) {
  .container .company .message .flex .image {
    width: 100%;
    margin: auto auto 20px auto;
  }
}

.container .company .message .flex .contents p {
  line-height: 32px;
  text-align: left;
  padding: 0;
  margin: 0 0 30px 0;
  width: 560px;
}

@media (max-width: 896px) {
  .container .company .message .flex .contents p {
    width: 100%;
    line-height: 30px;
    font-size: 90%;
  }
}

.container .company .message .flex .contents .name {
  width: 240px;
}

@media (max-width: 896px) {
  .container .company .message .flex .contents .name {
    width: 200px;
    margin: auto 0 auto auto;
  }
}

.container .company .history {
  width: 1100px;
  margin: 0 auto 100px auto;
  text-align: center;
}

@media (max-width: 896px) {
  .container .company .history {
    width: 85%;
    margin: 0 auto 30px auto;
  }
}

.container .company .history h2 {
  padding: 0;
  margin: 0 0 60px 0;
  font-size: 180%;
}

@media (max-width: 896px) {
  .container .company .history h2 {
    font-size: 150%;
    margin: 0 0 30px 0;
  }
}

.container .company .history .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media (max-width: 896px) {
  .container .company .history .flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.container .company .history .flex table {
  width: 520px;
  margin: 0;
  border-top: 1px solid #e2e2e2;
}

@media (max-width: 896px) {
  .container .company .history .flex table {
    width: 100%;
    margin: auto auto 30px auto;
  }
}

.container .company .history .flex table tr th {
  padding: 15px 0;
  text-align: left;
  width: 100px;
  vertical-align: top;
  border-bottom: 1px solid #e2e2e2;
  font-weight: normal;
}

@media (max-width: 896px) {
  .container .company .history .flex table tr th {
    font-size: 90%;
  }
}

.container .company .history .flex table tr td {
  padding: 15px 0;
  text-align: left;
  border-bottom: 1px solid #e2e2e2;
}

@media (max-width: 896px) {
  .container .company .history .flex table tr td {
    font-size: 90%;
  }
}

.container .company .profile {
  background-color: #f7f7f7;
  padding: 100px 0;
  text-align: center;
}

@media (max-width: 896px) {
  .container .company .profile {
    padding: 60px 0;
  }
}

.container .company .profile h2 {
  padding: 0;
  margin: 0 0 60px 0;
  font-size: 180%;
}

@media (max-width: 896px) {
  .container .company .profile h2 {
    font-size: 150%;
    margin: 0 0 30px 0;
  }
}

.container .company .profile table {
  width: 700px;
  margin: 0 auto;
}

@media (max-width: 896px) {
  .container .company .profile table {
    width: 80%;
  }
}

.container .company .profile table tr th {
  padding: 10px;
  text-align: right;
  width: 150px;
  vertical-align: top;
  font-weight: normal;
}

@media (max-width: 896px) {
  .container .company .profile table tr th {
    font-weight: bold;
    text-align: left;
    padding: 5px;
    display: block;
  }
}

.container .company .profile table tr td {
  padding: 10px;
  text-align: left;
}

@media (max-width: 896px) {
  .container .company .profile table tr td {
    padding: 5px;
    display: block;
  }
}

.container .company .btn {
  background-color: #beaf87;
  width: 400px;
  color: #fff;
  height: 60px;
  line-height: 60px;
  margin: 60px auto 40px auto;
  text-align: center;
}

.container .company .btn a {
  text-decoration: none;
  color: #fff;
  display: block;
}

.container .company .btn a:hover {
  background-color: #414042;
}

@media (max-width: 896px) {
  .container .company .btn {
    margin: 40px auto 40px auto;
    width: 80%;
  }
}

.container .info {
  width: 75%;
  height: auto;
  margin: 60px auto;
}

@media (max-width: 896px) {
  .container .info {
    margin: 40px auto;
    width: 85%;
  }
}

.container .info h3 {
  font-weight: normal;
  font-size: 24px;
  border-bottom: solid 1px #beaf87;
  height: 60px;
  line-height: 60px;
  padding: 0;
  margin: 0 0 30px 0;
}

@media (max-width: 896px) {
  .container .info h3 {
    font-size: 20px;
    height: 40px;
    line-height: 40px;
  }
}

.container .info .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: auto auto 40px auto;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media (max-width: 896px) {
  .container .info .flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.container .info .flex .image {
  width: 48%;
  height: auto;
  margin: 0 0 20px 0;
}

@media (max-width: 896px) {
  .container .info .flex .image {
    width: 100%;
  }
}

.container .info .flex .image p {
  font-size: 100%;
  padding: 10px 0 0 0;
  margin: 0;
}

@media (max-width: 896px) {
  .container .info .flex .image p {
    font-size: 90%;
  }
}

.container .info .flex .text {
  width: 48%;
  height: auto;
  font-size: 100%;
  line-height: 30px;
}

@media (max-width: 896px) {
  .container .info .flex .text {
    width: 100%;
    font-size: 90%;
    line-height: 26px;
  }
}

.container .info .flex iframe {
  width: 100%;
  height: 400px;
}

.container .info .flex .contents {
  width: 48%;
  height: auto;
  margin: 0 0 20px 0;
}

@media (max-width: 896px) {
  .container .info .flex .contents {
    width: 100%;
  }
}

.container .info .flex .contents p {
  font-size: 100%;
  padding: 10px 0 0 0;
  margin: 0;
}

@media (max-width: 896px) {
  .container .info .flex .contents p {
    font-size: 90%;
  }
}

.container .info ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

@media (max-width: 896px) {
  .container .info ul {
    width: 100%;
  }
}

.container .info ul li {
  text-align: left;
  border-bottom: solid 1px #e0e0e0;
  padding: 10px 0;
}

.container .staff {
  height: auto;
  margin: 60px auto;
  width: 900px;
}

@media (max-width: 896px) {
  .container .staff {
    width: 90%;
    margin: 30px auto;
  }
}

.container .staff ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.container .staff ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: auto auto 60px auto;
}

@media (max-width: 896px) {
  .container .staff ul li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: auto auto 30px auto;
  }
}

.container .staff ul li .image {
  width: 45%;
}

@media (max-width: 896px) {
  .container .staff ul li .image {
    width: 100%;
    margin: auto auto 20px auto;
  }
}

.container .staff ul li .block {
  width: 50%;
}

@media (max-width: 896px) {
  .container .staff ul li .block {
    width: 100%;
  }
}

.container .staff ul li .block .position {
  color: #808080;
}

.container .staff ul li .block .name {
  font-size: 170%;
  font-weight: bold;
  border-bottom: solid 1px #beaf87;
  padding: 0 0 10px 0;
  margin: auto auto 20px auto;
}

@media (max-width: 896px) {
  .container .staff ul li .block .name {
    font-size: 150%;
  }
}

.container .staff ul li .block .name span {
  font-size: 70%;
  font-weight: normal;
  margin: auto 20px;
}

.container .staff ul li .block table {
  border-collapse: collapse;
  border-spacing: 0;
}

.container .staff ul li .block table th {
  width: 30%;
  border-bottom: solid 1px #cfcfcf;
  padding: 10px;
  font-size: 90%;
}

@media (max-width: 896px) {
  .container .staff ul li .block table th {
    display: block;
    width: 100%;
    padding: 5px 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-size: 100%;
  }
}

.container .staff ul li .block table td {
  border-bottom: solid 1px #cfcfcf;
  padding: 10px;
  font-size: 90%;
}

@media (max-width: 896px) {
  .container .staff ul li .block table td {
    display: block;
    width: 100%;
    padding: 5px 0;
    font-size: 100%;
  }
}
/*# sourceMappingURL=style.css.map */





/* 何もしていない時の背景 */
.btn_specialty {
background-color: #ee6354;/*背景色*/
-webkit-transition: all 0.3s ease;/*ふわっとさせる間隔 Google Chrome、Safari*/
-moz-transition: all 0.3s ease;/*ふわっとさせる間隔 Firefox*/
-ms-transition: all 0.3s ease;/*ふわっとさせる間隔 IE*/
-o-transition: all 0.3s ease;/*ふわっとさせる間隔 Opera*/
transition: all  0.3s ease;/*ふわっとさせる間隔*/
padding:10px 0;/*文字と背景の余白*/
width: 400px;/*ボタン幅*/
color: #fff;/*文字の色*/
text-align: center;/*文字を揃える位置*/
border-radius: 0px;/*背景の角丸半径*/
cursor: pointer;/*ホバー時にカーソルの形状をポインターに*/
text-decoration: none;
}

/* マウスオーバーした際の背景 */
.btn_specialty:hover {
background-color :#37beb0;/*背景色*/
}


.btn_specialty2 {
  background-color: #beaf87;
  width: 400px;
  color: #fff;
  height: 60px;
  line-height: 60px;
  margin: 60px auto 40px auto;
  text-align: center;
}

.btn_specialty2 a {
  text-decoration: none;
  color: #fff;
  display: block;
}

.btn_specialty2 a:hover {
  background-color: #414042;
}

@media (max-width: 896px) {
.btn_specialty2 {
    margin: 40px auto 40px auto;
    width: 80%;
  }
}

@media screen and (min-width: 896px){
  .pc { display:inline; }
  .sp { display:none; }
}
@media screen and (max-width: 896px){
  .pc { display:none; }
  .sp { display:inline; }
}

.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}

.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

.fb1 {
  display: flex;
}

.fb h2 span {
  font-size: 4rem;
}

.fb h2 {
  position: relative;
  padding: 1rem 2rem;
  text-align: center;
  font-size: 1.1rem;
}

.fb h2::before {
  font-size: 15px;
  font-size: 2.5rem;
  position: absolute;
  top: -40px;
  left: -3px;
  height: 60px;
  padding: 0 1em;
  /*
  content: '新価格';
  */
  color: #fff;
  background: #fff;
}

.fb1-2 {
  margin-right: 0px;
}

.fb h3 {
  font-size: 1.7rem;
  text-align: left;
}

.tokusen_txt {
  font-size: 1.7rem;
}

.rino_txt {
  font-size: 2rem;
}

.railline p {
  font-size: 2.25rem;
  font-weight: 800;
}

.sp-word {
  display: none;
}

@media screen and (max-width: 896px) {

  .fb h2 span {
    font-size: 2.5rem;
  }

  .fb h3 {
    font-size: 1.5rem;
  }

  .pc-word {
    display: none;
  }

  .sp-word {
    display: block;
    text-align: center;
  }

  .fb1 {
    display: block;
    margin-top: -60px;
  }

  .tokusen_txt {
    font-size: 1.3rem;
    text-align: left;
  }

  .railline p {
    font-size: 3rem;
    font-weight: 700;
  }

  .rino_txt h2 {
    font-size: 1.75rem;
  }

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

footer {
  background-color: #414042;
  color: #beaf87;
}

footer .add, footer .hours {
  color: #fff;
}

footer .slogan {
  color: #fff;
  text-align: center;
}

.contents {
  padding-top: 50px;
}




.index .cent2 {
  padding: 80px 0 100px 0;
  background-color: #f2f2f2;
}




.index .cent {
  width: 100%;
  background-color: #ffffff;
  margin: 50px auto 80px auto;
  justify-content: center;
}

@media only screen and (max-width: 897px) {
   .image-fullsize img {width: 100%; height:auto;}
}
@media only screen and (min-width: 896px) {
   .image-fullsize img {width: 100%; height:auto;}
}



.text-background-test01 {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.4em;
  padding: 5px;
  background:#FFD9D7;
}



.bg_test {
    height: 250px;                  /* 高さ指定 */
    padding:  20px;                 /* 余白指定 */
    font-size: 20px;                /* 文字サイズ指定 */
    background-color: powderblue;   /* 背景色指定 */
}
 
.bg_test2 {
    color:  #fff;                   /* 文字色指定 */
    height: 200px;                  /* 高さ指定 */
    width:  200px;                  /* 幅指定 */
    font-size:  14px;               /* 文字サイズ指定 */
    background-color: blue;         /* 背景色指定 */
    padding:  20px;                 /* 余白指定 */
    float:  right;                  /* 位置指定 */
    position:  relative;            /* 位置指定 */
    top: 110px;                     /* 位置指定 */
}



.btn_specialty3 {
    background-color: #ff0000;
    width: 260px;
    color: #fff;
    height: 60px;
    line-height: 60px;
    margin: 50px auto 40px auto;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
}





.container .staff2 ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: auto auto 80px auto;
}

@media (max-width: 896px) {
  .container .staff2 ul li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: auto auto 30px auto;
  }
}

.container .staff2 ul li .image {
  width: 45%;
}

@media (max-width: 896px) {
  .container .staff2 ul li .image {
    width: 100%;
    margin: auto auto 20px auto;
  }
}

.container .staff2 ul li .block {
  width: 50%;
}

@media (max-width: 896px) {
  .container .staff2 ul li .block {
    width: 100%;
  }
}

.container .staff2 ul li .block .position {
  color: #808080;
}

.container .staff2 ul li .block .name {
  font-size: 170%;
  font-weight: bold;
  border-bottom: solid 1px #beaf87;
  padding: 0 0 10px 0;
  margin: auto auto 20px auto;
}

@media (max-width: 896px) {
  .container .staff2 ul li .block .name {
    font-size: 150%;
  }
}

.container .staff2 ul li .block .name span {
  font-size: 70%;
  font-weight: normal;
  margin: auto 20px;
}

.container .staff2 ul li .block table {
  border-collapse: collapse;
  border-spacing: 0;
}

.container .staff2 ul li .block table th {
  width: 30%;
  border-bottom: solid 1px #cfcfcf;
  padding: 10px;
  font-size: 90%;
}

@media (max-width: 896px) {
  .container .staff2 ul li .block table th {
    display: block;
    width: 100%;
    padding: 5px 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-size: 100%;
  }
}

.container .staff2 ul li .block table td {
  border-bottom: solid 1px #cfcfcf;
  padding: 10px;
  font-size: 90%;
}

@media (max-width: 896px) {
  .container .staff2 ul li .block table td {
    display: block;
    width: 100%;
    padding: 5px 0;
    font-size: 100%;
  }
}