@font-face {
  font-family: 'NotoSerifJP';
  font-weight: 400;
  font-display: swap;
  src: local('NotoSerifJP'),
       url(../font/NotoSerifJP-Regular.woff2) format('woff2'),
       url(../font/NotoSerifJP-Regular.woff) format('woff');
}
@font-face {
  font-family: 'NotoSerifJP';
  font-weight: 700;
  font-display: swap;
  src: local('NotoSerifJP'),
       url(../font/NotoSerifJP-SemiBold.woff2) format('woff2'),
       url(../font/NotoSerifJP-SemiBold.woff) format('woff');
}
:root {
  --c-blue: #183268;
  --c-red: #ff3b50;
}
body {
  color: #fff;
  font-size: 1.6rem;
  font-family: 'NotoSerifJP','Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,serif;
  font-weight: 400;
  line-height: 2;
  min-width: 320px;
  max-width: 1920px;
  overflow-x: hidden;
  background: #000;
  margin: auto;
}
.section {
  padding-top: 65px;
  padding-bottom: 65px;
}
.column ~ .column {
  margin-top: 60px;
}
.body {
  max-width: calc(100% - 30px);
  width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width:768px) {
  html { font-size:9px }
  .section {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .column ~ .column {
    margin-top: 40px;
  }
}
@media (max-width:320px) {
  html { font-size:8.5px }
}
@media print {
  body { width:1200px }
}

a.link {
  color: var(--c-blue);
}
a.link img {
  transition: .2s;
}
a.link:hover {
  text-decoration: underline;
}
a.link:hover img {
  opacity: .8;
}

.scroll-sw {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: .2s;
}
.js-scroll .scroll-sw:not(.default),
body:not(.js-scroll) .scroll-sw.default {
  height: auto;
  opacity: 1;
}

@media (min-width:1081px) {
  .header-sp {
    display: none !important;
  }
}
@media (max-width:1080px) {
  .header-pc {
    display: none !important;
  }
}

/* ****************************************************************************************************
   * main
**************************************************************************************************** */

.bg-1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.bg-1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bg-1 .shadow {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,.6);
  opacity: 0;
}

#main .layout-1 {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90px 0;
}
@media (max-width:640px) {
  #main .layout-1 {
    min-height: 0;
  }
}

#main .visual {
  position: relative;
  font-size: 3rem;
  text-align: center;
  letter-spacing: 1px;
}
@media (max-width:1024px) {
  #main .visual {
    font-size: 2.5rem;
  }
}
@media (max-width:768px) {
  #main .visual {
    font-size: 2rem;
  }
}
@media (max-width:640px) {
  #main .visual {
    min-height: 100svh;
  }
}
@media (max-width:540px) {
  #main .visual {
    font-size: 1.8rem;
  }
}
#main .visual .scroll {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: block;
  width: fit-content;
  font-size: 1.4rem;
  letter-spacing: 0;
  transform: translateX(-50%);
  transition: .2s padding-top;
}
#main .visual .scroll:after {
  content: '';
  display: block;
  width: 1px;
  height: 100px;
  background: #fff;
  margin: 0 auto;
  transition: .2s;
}
#main .visual .scroll:hover {
  padding-top: 20px;
}
#main .visual .scroll:hover:after {
  height: 80px;
}

#main .concept .figure {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#main .concept .figure div:nth-child(1) {
  width: 47.5%;
}
#main .concept .figure div:nth-child(2) {
  width: 3.3333%;
  text-align: center;
}
#main .concept .figure div:nth-child(3) {
  width: 47.5%;
}
#main .concept p {
  font-size: 2.5rem;
  margin-top: 2em;
}
#main .concept .text-bg {
  display: inline-block;
  padding: 0 .5em;
}
#main .concept .text-bg.purple {
  background: linear-gradient(0,transparent 35%, #65318e 35%, #65318e 60%, transparent 60%);
}
#main .concept .text-bg.red {
  background: linear-gradient(0,transparent 35%, #bd0826 35%, #bd0826 60%, transparent 60%);
}
#main .concept .text-bg.green {
  background: linear-gradient(0,transparent 35%, #316745 35%, #316745 60%, transparent 60%);
}
#main .concept .text-bg.gold {
  background: linear-gradient(0,transparent 35%, #77642f 35%, #77642f 60%, transparent 60%);
}
#main .concept b {
  color: #dbc380;
}
@media (max-width:768px) {
  #main .concept .figure {
    flex-wrap: wrap;
    text-align: center;
  }
  #main .concept .figure div {
    width: 100% !important;
  }
  #main .concept .figure div:nth-child(2) {
    margin: 10px 0;
  }
  #main .concept .figure div:nth-child(2) img {
    max-width: 40px;
    width: 6%;
  }
  #main .concept p {
    font-size: 2rem;
  }
}

#main .service {
  min-height: 200svh;
  display: block;
  padding: 0;
  contain: paint;
}

#main .service .body {
  position: sticky;
  top: 0;
  left: 0;
  padding: 90px 0;
}
@media (max-width:768px) {
  #main .service .body {
    padding: 50px 0;
  }
}
#main .service .service-swiper {
}
#main .service .service-swiper .wrapper {
  white-space: nowrap;
}
#main .service .service-swiper .slide {
  display: inline-block;
  vertical-align: top;
  margin-right: 25px;
}
#main .service .service-swiper .slide .num {
  font-size: 6.4rem;
  text-align: center;
  color: #dbc380;
  line-height: 1;
  margin-bottom: .25em;
}
#main .service .service-swiper .slide .photo {
  text-align: center;
}
#main .service .service-swiper .slide .caption {
  font-size: 2.7rem;
  text-align: center;
}
@media (max-width:768px) {
  #main .service .service-swiper .slide .num {
    font-size: 5rem;
  }
  #main .service .service-swiper .slide .caption {
    font-size: 2rem;
  }
}
@media (max-width:640px) {
  #main .service .service-swiper .slide .num {
    font-size: 4rem;
  }
  #main .service .service-swiper .slide .caption {
    font-size: 1.8rem;
  }
}

#main .concierge .box {
  max-width: 100%;
  width: 960px;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 2em;
  background: url(../images/concierge-bg.jpg) center center /cover no-repeat;
  margin: 0 auto;
}
@media (max-width:768px) {
  #main .concierge .box {
    padding: 1em 1em 2em;
  }
}
@media (max-width:736px) {
  #main .concierge .box .content {
    width: 60%;
  }
  #main .concierge .box .btn {
    width: 40%;
    padding-left: 3%;
  }
  #main .concierge .box .btn .btn-1 {
    width: 100%;
    height: auto;
    font-size: 2.5vw;
    padding: 1em 0;
  }
}
@media (max-width:640px) {
  #main .concierge .box {
    display: block;
    background-position: right 50% center;
    padding-top: 35%;
  }
  #main .concierge .box .content {
    width: 60%;
  }
  #main .concierge .box .btn {
    width: 100%;
    margin-top: 1em;
  }
  #main .concierge .box .btn .btn-1 {
    font-size: 1.6rem;
  }
}

#main .access {
  height: 180svh;
  display: block;
  padding: 0;
}
#main .access .contents {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100svh;
  margin-top: 80svh;
  padding: 50px 0;
}
#main .access .access-photo {
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#main .access.fixed .access-photo {
  position: fixed;
}
#main .access .access-photo .img {
  max-width: 80%;
  width: 800px;
  background: #000;
}

#main .access .col-1 {
  width: 30.56%;
}
#main .access .col-2 {
  width: 63.8888%;
}
#main .access .col-1 .line {
  font-size: 2.5rem;
}
#main .access .col-1 .line span {
  font-size: 2.8em;
  line-height: 1;
}
@media (max-width:768px) {
  #main .access {
    position: relative;
    height: auto;
    background: url(../images/access-bg.jpg) center center /cover no-repeat;
  }
  #main .access:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.6);
  }
  #main .access > * {
    position: relative;
    z-index: 1;
  }
  #main .access .access-photo {
    display: none;
  }
  #main .access .contents {
    height: auto;
    padding: 90px 0;
    margin-top: 0;
  }
  #main .access .col-1,
  #main .access .col-2 {
    width: 100%;
  }
  #main .access .col-1 {
    text-align: center;
  }
  #main .access .col-1 .line {
    font-size: 2rem;

  }
  #main .access .col-2 {
    margin-top: 2em;
  }
  #main .access .col-2 iframe {
    width: 100%;
  }
}

/* ****************************************************************************************************
   * footer
**************************************************************************************************** */

#footer {
  position: relative;
  z-index: 9;
  background: #000;
  padding: 65px 0 25px;
}
#footer .logo {
  width: fit-content;
  display: block;
  margin: 0 auto 2em;
}
#footer .logo img {
  height: 50px;
}
#footer .copyright {
  text-align: center;
  color: #999;
}
@media (max-width:768px) {
  #footer .copyright {
    font-size: 1.4rem;
  }
}