@charset "UTF-8";
/* CSS Document */
/* -------------------------------------------------

Reset.css

------------------------------------------------- */
@media print {
  html, body {
    zoom: 0.8; } }
html, body, div, p, span, address, h1, h2, h3, h4, h5, h6, header, hgroup, footer, section, article, aside, nav, figure, figcaption {
  margin: 0;
  padding: 0;
  font-style: normal;
  font-weight: normal;
  line-height: 160%; }

ul, ol, li, dl, dt, dd {
  margin: 0;
  padding: 0;
  font-style: normal;
  font-weight: normal;
  line-height: 180%;
  list-style: none; }

body {
  color: #aa841f;
  font-size: 1.2em;
  font-family: yu-mincho-pr6n, sans-serif;
  font-style: normal;
  -webkit-text-size-adjust: 100%; }

a {
  color: #aa841f;
  outline: none;
  text-decoration: none;
  transition: 0.3s; }

a:hover {
  opacity: 0.7; }

a:active {
  text-decoration: under-line; }

a img {
  border-style: none;
  transition: 0.3s; }

div, p, span, address, header, hgroup, footer, section, article, aside, nav, ul, ol, li, dl, dt, dd, figure, figcaption {
  box-sizing: border-box; }

.tt,
.tt5 {
  display: none; }

/* PC */
/* Tablet */
/* SP縦以外 */
@media screen and (min-width: 641px) {
  /*SP縦以外を表示*/
  .ta {
    display: block; } }
/* iphone5 */
@media screen {
  .fade00 {
    opacity: 0;
    transition: 1s; }

  .fade01 {
    opacity: 0;
    transition: 1s;
    transform: translate(0, 30px); }

  .fade00a {
    opacity: 1.0;
    transform: translate(0, 0); } }
body {
  color: #000; }

header {
  padding: 20px 0;
  background: #EFEFEF; }
  @media all and (max-width: 480px) {
    header {
      padding: 10px 0; } }
  header nav {
    max-width: 1100px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    @media all and (max-width: 1100px) {
      header nav {
        width: 90%; } }
    @media all and (max-width: 480px) {
      header nav {
        display: block; } }
    header nav div {
      display: flex;
      flex-wrap: wrap; }
      header nav div p.hvc {
        width: 155px;
        height: 45px; }
        @media all and (max-width: 480px) {
          header nav div p.hvc {
            width: 123px;
            height: 35px; } }
      header nav div p.hhv {
        width: 155px;
        height: 45px; }
        @media all and (max-width: 480px) {
          header nav div p.hhv {
            width: 123px;
            height: 35px; } }
      header nav div p.snow {
        width: 155px;
        height: 45px;
        margin: 0 0 0 20px; }
        @media all and (max-width: 480px) {
          header nav div p.snow {
            width: 123px;
            height: 35px; } }
      header nav div p img {
        width: 100%;
        height: auto; }
    header nav ul {
      width: calc(70% - 155px);
      padding: 15px 0 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      @media all and (max-width: 896px) {
        header nav ul {
          width: calc(100% - 0px);
          padding: 10px 0 0;
          justify-content: space-between; } }
      @media all and (max-width: 480px) {
        header nav ul li {
          font-size: 15px; } }
      header nav ul li a {
        color: #000000; }
        header nav ul li a:hover {
          padding: 0 0 5px;
          border-bottom: 1px solid #333333; }

main .slider {
  width: 100%;
  margin: 0 auto; }
  main .slider img {
    width: 100%;
    height: auto; }
  main .slider .slick-slide {
    margin: 0 40px; }
    @media all and (max-width: 1100px) {
      main .slider .slick-slide {
        margin: 0 20px; } }

.inner {
  max-width: 1100px;
  margin: auto; }
  @media all and (max-width: 1100px) {
    .inner {
      width: 90%; } }

.pconly {
  display: block; }
  @media all and (max-width: 896px) {
    .pconly {
      display: none; } }

.sponly {
  display: none; }
  @media all and (max-width: 896px) {
    .sponly {
      display: block; } }

#concept {
  margin: 50px 0 0;
  padding: 50px 0; }
  @media all and (max-width: 896px) {
    #concept {
      margin: 25px 0 0;
      padding: 50px 0; } }
  @media all and (max-width: 480px) {
    #concept {
      margin: 0px;
      padding: 50px 0; } }
  #concept .inner {
    position: relative; }
    #concept .inner h1 {
      max-width: 500px;
      margin: 0 auto; }
      #concept .inner h1 img {
        width: 100%;
        height: auto; }
    #concept .inner .box {
      padding: 40px 0 25px;
      text-align: center; }
      @media all and (max-width: 896px) {
        #concept .inner .box {
          padding: 40px 0 25px; } }
      #concept .inner .box .concept {
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        text-align: left;
        display: inline-block; }
        #concept .inner .box .concept h2 {
          margin: 0 0 0 50px;
          font-size: 50px;
          font-weight: bold;
          line-height: 2em; }
          @media all and (max-width: 896px) {
            #concept .inner .box .concept h2 {
              margin: 0 0 0 25px;
              font-size: 25px;
              line-height: 1.5em; } }
          @media all and (max-width: 480px) {
            #concept .inner .box .concept h2 {
              margin: 0 0 0 10px; } }
        #concept .inner .box .concept p {
          font-size: 25px;
          line-height: 2.5em; }
          @media all and (max-width: 896px) {
            #concept .inner .box .concept p {
              font-size: 18px;
              line-height: 1.8em; } }
    #concept .inner .map img {
      width: 100%;
      height: auto; }

#spend h3 {
  width: 100%;
  height: 80vh;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 1.5em;
  letter-spacing: 0.05em;
  background: url("../images/spend_bg.png") no-repeat;
  background-size: cover;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  position: relative; }
  @media all and (max-width: 896px) {
    #spend h3 {
      text-align: left; } }
  @media all and (max-width: 480px) {
    #spend h3 {
      height: 55vh;
      font-size: 15px; } }
  #spend h3 span {
    padding: 165px 0 0;
    background: url("../images/spend_logo.png") no-repeat;
    background-size: 305px 145px;
    background-position: top center;
    top: 20%;
    position: absolute; }
    @media all and (max-width: 896px) {
      #spend h3 span {
        padding: 165px 5% 0;
        top: 10%; } }
    @media all and (max-width: 480px) {
      #spend h3 span {
        padding: 120px 20px 0;
        background-size: 210px 100px; } }
#spend .inner h4 {
  width: 100%;
  padding: 100px 0 0;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  line-height: 1.0em;
  letter-spacing: 0.05em;
  background: #FFFFFF;
  top: -100px;
  position: relative; }
  @media all and (max-width: 896px) {
    #spend .inner h4 {
      padding: 50px 0 0;
      top: -50px; } }
  #spend .inner h4 span {
    font-size: 20px; }
#spend .inner .box {
  margin: 0 0 100px;
  padding: 0 0 50px;
  border-bottom: 1px dotted #231815;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  @media all and (max-width: 896px) {
    #spend .inner .box {
      margin: 0 0 50px; } }
  #spend .inner .box .article {
    width: 55%;
    padding: 80px 0 0 70px; }
    @media all and (max-width: 896px) {
      #spend .inner .box .article {
        width: 95%; } }
    @media all and (max-width: 480px) {
      #spend .inner .box .article {
        padding: 0 0 0 60px; } }
    #spend .inner .box .article h5 {
      font-size: 30px;
      font-weight: bold;
      line-height: 1.5em; }
      @media all and (max-width: 480px) {
        #spend .inner .box .article h5 {
          font-size: 22px; } }
    #spend .inner .box .article p {
      margin: 20px 0 0;
      line-height: 2em;
      font-size: 18px; }
      @media all and (max-width: 480px) {
        #spend .inner .box .article p {
          margin: 10px 0 0;
          line-height: 1.5em; } }
  #spend .inner .box .image {
    width: 40%; }
    @media all and (max-width: 896px) {
      #spend .inner .box .image {
        width: 100%; } }
    #spend .inner .box .image ul li {
      line-height: 0; }
      #spend .inner .box .image ul li img {
        width: 100%;
        height: auto; }
#spend .inner .spend01 .article {
  background: url("../images/spend_icon_01.png") no-repeat -40px -40px; }
  @media all and (max-width: 480px) {
    #spend .inner .spend01 .article {
      background-size: 60px 70px;
      background-position: -15px -15px; } }
#spend .inner .spend01 .image {
  padding: 0 5% 0 0; }
  @media all and (max-width: 896px) {
    #spend .inner .spend01 .image {
      padding: 0 5%; } }
  #spend .inner .spend01 .image ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #spend .inner .spend01 .image ul li {
      width: 49%;
      margin: 2% 0 0; }
      #spend .inner .spend01 .image ul li:first-child {
        width: 100%; }
#spend .inner .spend02 .article {
  width: 100%;
  background: url("../images/spend_icon_02.png") no-repeat -40px -35px; }
  @media all and (max-width: 896px) {
    #spend .inner .spend02 .article {
      width: 95%; } }
  @media all and (max-width: 480px) {
    #spend .inner .spend02 .article {
      background-size: 60px 70px;
      background-position: -15px -15px; } }
#spend .inner .spend02 .image {
  width: 90%;
  margin: 50px auto 0; }
  @media all and (max-width: 896px) {
    #spend .inner .spend02 .image {
      margin: 30px auto 0; } }
  #spend .inner .spend02 .image ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #spend .inner .spend02 .image ul li {
      width: 48%;
      font-size: 25px;
      text-align: center; }
      @media all and (max-width: 896px) {
        #spend .inner .spend02 .image ul li {
          font-size: 20px; } }
      @media all and (max-width: 480px) {
        #spend .inner .spend02 .image ul li {
          width: 100%;
          margin: 0 0 30px; } }
      #spend .inner .spend02 .image ul li span {
        width: 100%;
        height: 50px;
        margin: 15px 0 0;
        padding: 5px 0;
        color: #FFFFFF;
        font-size: 25px;
        text-align: center;
        background: #231815;
        display: block; }
        @media all and (max-width: 896px) {
          #spend .inner .spend02 .image ul li span {
            height: 40px;
            font-size: 20px; } }
#spend .inner .spend03 .article {
  background: url("../images/spend_icon_03.png") no-repeat -35px -35px; }
  @media all and (max-width: 480px) {
    #spend .inner .spend03 .article {
      background-size: 60px 70px;
      background-position: -15px -15px; } }
#spend .inner .spend03 .image {
  padding: 0 5% 0 0; }
  @media all and (max-width: 896px) {
    #spend .inner .spend03 .image {
      padding: 0 5%; } }
  @media all and (max-width: 896px) {
    #spend .inner .spend03 .image ul li {
      margin: 2% 0 0; } }
#spend .inner .spend04 .article {
  background: url("../images/spend_icon_04.png") no-repeat -35px -40px; }
  @media all and (max-width: 480px) {
    #spend .inner .spend04 .article {
      background-size: 60px 70px;
      background-position: -15px -15px; } }
  #spend .inner .spend04 .article img {
    width: 100%;
    height: auto;
    margin: 15px 0 0; }
#spend .inner .spend04 .image {
  padding: 0 5% 0 0; }
  @media all and (max-width: 896px) {
    #spend .inner .spend04 .image {
      width: 95%;
      padding: 0 0 0 70px; } }
  @media all and (max-width: 480px) {
    #spend .inner .spend04 .image {
      width: 90%;
      margin: 0 auto;
      padding: 0 0 0 0px; } }
  @media all and (max-width: 480px) {
    #spend .inner .spend04 .image ul {
      margin: 10px 0 0; } }
  #spend .inner .spend04 .image ul li:first-child {
    margin: 0 0 20px; }
    @media all and (max-width: 480px) {
      #spend .inner .spend04 .image ul li:first-child {
        margin: 0 0 10px; } }
  #spend .inner .spend04 .image ul li:last-child {
    margin: 20px 0 0; }
    @media all and (max-width: 480px) {
      #spend .inner .spend04 .image ul li:last-child {
        margin: 10px 0 0; } }
#spend .inner .spend05 .article {
  width: 100%;
  background: url("../images/spend_icon_05.png") no-repeat -40px -35px; }
  @media all and (max-width: 896px) {
    #spend .inner .spend05 .article {
      width: 95%; } }
  @media all and (max-width: 480px) {
    #spend .inner .spend05 .article {
      background-size: 60px 70px;
      background-position: -15px -15px; } }
#spend .inner .spend05 .image {
  width: 90%;
  margin: 50px auto 0; }
  @media all and (max-width: 896px) {
    #spend .inner .spend05 .image {
      margin: 20px auto 0; } }
  #spend .inner .spend05 .image ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #spend .inner .spend05 .image ul li {
      width: 48%; }
      @media all and (max-width: 480px) {
        #spend .inner .spend05 .image ul li {
          width: 100%; }
          #spend .inner .spend05 .image ul li:first-child {
            margin: 0 0 20px; } }
      #spend .inner .spend05 .image ul li span.title {
        width: 100%;
        height: 50px;
        padding: 5px 0;
        color: #FFFFFF;
        font-size: 25px;
        text-align: center;
        background: #231815;
        display: block; }
        @media all and (max-width: 896px) {
          #spend .inner .spend05 .image ul li span.title {
            height: 40px;
            font-size: 20px; } }
        #spend .inner .spend05 .image ul li span.title b {
          font-size: 20px;
          font-weight: normal; }
          @media all and (max-width: 896px) {
            #spend .inner .spend05 .image ul li span.title b {
              font-size: 15px; } }
      #spend .inner .spend05 .image ul li span.text {
        margin: 20px 0 0;
        line-height: 1.5em;
        font-size: 18px;
        display: block; }
        @media all and (max-width: 896px) {
          #spend .inner .spend05 .image ul li span.text {
            margin: 10px 0 0; } }
#spend .photo {
  margin: 0 0 100px; }
  #spend .photo ul {
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #spend .photo ul li {
      width: 33%;
      padding: 5px 5px 0; }
      @media all and (max-width: 480px) {
        #spend .photo ul li {
          width: 50%; } }
      #spend .photo ul li img {
        width: 100%;
        height: auto; }

#price h3 {
  width: 100%;
  height: 80vh;
  color: #FFFFFF;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  line-height: 1.5em;
  letter-spacing: 0.05em;
  background: url("../images/price_bg.png") no-repeat;
  background-size: cover;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center; }
  @media all and (max-width: 896px) {
    #price h3 {
      height: 55vh;
      font-size: 30px; } }
#price .inner h4 {
  width: 100%;
  padding: 100px 0 0;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  line-height: 1.0em;
  letter-spacing: 0.05em;
  background: #FFFFFF;
  top: -100px;
  position: relative; }
  @media all and (max-width: 896px) {
    #price .inner h4 {
      padding: 50px 0 0;
      top: -50px; } }
  #price .inner h4 span {
    font-size: 20px; }
#price .inner .box {
  margin: 0 0 100px;
  padding: 50px;
  border: 5px solid #231815;
  background: #FFFFFF;
  position: relative; }
  @media all and (max-width: 896px) {
    #price .inner .box {
      margin: 0 0 50px;
      padding: 30px; } }
  #price .inner .box::before {
    content: "";
    height: 0;
    top: -8px;
    right: -9px;
    border-top: solid 50px #FFFFFF;
    border-left: solid 50px transparent;
    display: block;
    position: absolute;
    z-index: 2; }
  #price .inner .box::after {
    content: "";
    height: 0;
    top: -5px;
    right: -5px;
    border-top: solid 50px #231815;
    border-left: solid 50px transparent;
    position: absolute;
    display: block; }
  #price .inner .box dl dt {
    width: 100%;
    margin: 0 0 20px;
    padding: 0 0 20px;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    line-height: 1.0em;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #231815;
    background: #FFFFFF; }
    #price .inner .box dl dt span {
      font-size: 20px; }
  #price .inner .box dl dd {
    text-align: center; }
    #price .inner .box dl dd span {
      color: #8e2d55;
      font-size: 30px; }
#price .inner .btn {
  margin: 0 0 100px;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  border: 5px solid #231815;
  background: #FFFFFF; }
  @media all and (max-width: 896px) {
    #price .inner .btn {
      margin: 0 0 50px; } }
  @media all and (max-width: 480px) {
    #price .inner .btn {
      font-size: 20px; } }
  #price .inner .btn a {
    padding: 20px;
    color: #231815;
    display: block;
    position: relative; }
    #price .inner .btn a::after {
      content: '\f054';
      font-family: "Font Awesome 5 Free";
      font-size: 1.5rem;
      font-weight: 900;
      top: 25%;
      right: 20px;
      position: absolute; }
    #price .inner .btn a:hover {
      color: #FFFFFF;
      background: #000000; }
#price .logo {
  margin: 0 0 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  @media all and (max-width: 896px) {
    #price .logo {
      margin: 0 0 50px; } }
  #price .logo p.hvc {
    width: 240px;
    height: 70px;
    margin: 0 20px 0 0; }
    @media all and (max-width: 480px) {
      #price .logo p.hvc {
        width: 123px;
        height: 35px; } }
  #price .logo p.hhv {
    width: 240px;
    height: 70px;
    margin: 0 20px 0 0; }
    @media all and (max-width: 480px) {
      #price .logo p.hhv {
        width: 123px;
        height: 35px; } }
  #price .logo p.snow {
    width: 240px;
    height: 70px;
    margin: 0 0 0 20px; }
    @media all and (max-width: 480px) {
      #price .logo p.snow {
        width: 123px;
        height: 35px; } }
  #price .logo p img {
    width: 100%;
    height: auto; }

#contact {
  padding: 100px 0; }
  @media all and (max-width: 480px) {
    #contact {
      padding: 50px 0; } }
  #contact h1 {
    font-size: 40px;
    text-align: center;
    line-height: 1.0em; }
    #contact h1 span {
      font-size: 20px; }
  #contact .ok {
    margin: 100px 0 0;
    padding: 20px;
    text-align: center;
    border: 1px solid #CCCCCC;
    background: #EFEFEF; }
    @media all and (max-width: 480px) {
      #contact .ok {
        margin: 50px 0 0; } }
  #contact dl dt {
    margin: 50px 0 0;
    font-size: 16px; }
    @media all and (max-width: 480px) {
      #contact dl dt {
        margin: 25px 0 0; } }
  #contact dl dd {
    margin: 10px 0 0; }
    #contact dl dd input[type="text"],
    #contact dl dd input[type="date"],
    #contact dl dd input[type="number"],
    #contact dl dd input[type="email"],
    #contact dl dd input[type="tel"],
    #contact dl dd select, #contact dl dd textarea {
      width: calc(100% - 22px);
      background-color: #FFFFFF;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      border: 1px solid #CCCCCC;
      padding: 15px 10px;
      border-radius: 3px; }
    #contact dl dd span {
      font-size: 13px; }
  #contact .form_btn {
    margin: 50px 0 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; }
    @media all and (max-width: 896px) {
      #contact .form_btn {
        margin: 25px 0 0; } }
    #contact .form_btn ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center; }
      #contact .form_btn ul li input {
        width: 150px;
        margin: 0 10px;
        padding: 20px 10px;
        color: #FFFFFF;
        font-size: 18px;
        border-style: none;
        border-radius: 3px;
        background: #8E2D55;
        display: block;
        cursor: pointer; }

footer {
  max-width: 1100px;
  margin: auto;
  padding: 20px 0;
  text-align: center; }
  @media all and (max-width: 1100px) {
    footer {
      width: 90%; } }
  @media all and (max-width: 480px) {
    footer {
      padding: 10px 0 5px;
      font-size: 13px; } }

.gotop {
  position: fixed;
  right: 20px;
  bottom: 0;
  padding-bottom: 30px; }
  .gotop a {
    color: #fff;
    font-weight: bold;
    text-align: center;
    display: block;
    border-radius: 50%;
    margin-top: 10px;
    background-color: #aa841f;
    width: 50px;
    line-height: 50px; }
    @media all and (-ms-high-contrast: none) {
      .gotop a {
        padding-top: 15px;
        line-height: 35px; } }
    .gotop a:hover {
      transform: translate(0, -5px); }

@media print {
  .gotop {
    display: none; } }