@charset "utf-8";
html {  scroll-behavior: smooth; scroll-padding-top: 100px; line-height: 1.8; }
body { line-height: 1.5; background: #F0EDEA; }
.wrapper { width: 100% ; margin: 0;  }
img { max-width: 100%; height: auto; }
@media screen and (max-width: 900px) {
  body { font-size: .9rem; }
}

.wrapper { overflow-x: hidden; padding-top: 42px; }
.conts-width-m { width: 90%; max-width: 1000px; margin: 0 auto; }
.conts-width { width: 90%; max-width: 920px; margin: 0 auto; }
.conts-width-s { width: 90%; max-width: 750px; margin: 0 auto; }

.spacer { padding-top: 100px; }
.sp-only { display: none; }
@media screen and (max-width: 768px) {
  .spacer { padding-top: 60px; }
  .pc-only { display: none; }
  .sp-only { display: initial; }
}

.mt1em { margin-top: 1em; }
.mt2em { margin-top: 2em; }
.mt3em { margin-top: 3em; }

.btn-round,
a.btn-round { background: #63AC43; color: #FFF; border-radius: 2em; padding: 1em; width: 240px; display: block; color: #FFF; text-align: center; }


.header { display: flex; justify-content: space-between; align-items: flex-start;  position: fixed; top: 0; left: 0; right: 0; margin: auto; z-index: 99; transition: background .3s; background: #FFF; border-radius: 0 0 10px 10px; width: 1200px; max-width: 90%; align-items: center; padding: 20px 30px; }
.head-sitename { color: #937554; font-size: 1.2rem; }
.head-sitename span { font-size: 1.2em; }
.head-navi { display: flex; align-items: center; font-display: .9rem; }


.head-navi .item { margin-right: 2em; }
a.head-btn { display: block; text-align: center; color: #FFF; font-weight: bold; border-radius: 2em; padding: .7em; font-size: .9rem; width: 150px; margin-left: 1em; white-space: nowrap; }
.head-btn.contact { background: linear-gradient(to bottom, #937554, #7C6245); box-shadow: 0 3px 3px rgba(0,0,0,.16);  }


.btn-hamburger { display: none; }
@media screen and (max-width: 1200px) {
  
  .head-navi { font-size: .9rem; }
  .head-navi .item { margin-right: 1.5em; }
}
@media screen and (max-width: 1000px) {
  .header { max-width: none; width: 96%; padding: 0; border-radius: 0 0 10px 10px; }
  .head-sitename { width: 100%; height: auto; padding: 10px 1.5rem; background: #FFF; position: relative; z-index: 2; border-radius: inherit; }
  
  .head-navi { transform: translateY(-100%); transition: transform .3s; position: absolute; top: 0; left: 0; right: 0; margin: auto; width: 100%; display: block; background: #FFFF; padding: 60px 2rem 2rem; box-shadow: none; border-radius: 0 0 10px 10px; text-align: center; }
  .head-navi.open { transform: translateY(0); }
  .head-navi .item + .item { margin-top: 1em; margin-left: 0; }
  

  a.head-btn { margin-top: 1em; margin-left: 0; width: 100%; }
  
  .btn-hamburger { display: block; width: 3rem; height: 3rem; border: none; background: none; position: absolute; top: 0; bottom: 0; right: 10px; margin: auto; text-indent: 200%; padding: 0; overflow: hidden; white-space: nowrap; z-index: 3; }
  .btn-hamburger::before,
  .btn-hamburger::after { content: ''; width:1.5rem ;height: 3px; display: block; background: #846042; position: absolute; inset: 0 ;margin: auto;  transition: transform .3s; }
  .btn-hamburger::before { transform: translateY(-8px); box-shadow: 0 8px 0 #846042;  }
  .btn-hamburger::after  { transform: translateY(8px); }
  
  
  .btn-hamburger.open::before { transform: rotate(45deg); box-shadow: none;  }
  .btn-hamburger.open::after  { transform: rotate(-45deg); }
  
  
}
.footer { padding: 30px 0; background: #706252; color: #FFF; text-align: center; }
.footer-top { display: flex; align-items: center; justify-content: center; }
.foot-sitename { font-size: 1.2rem; margin-right: .5em;  }
.foot-sitename span { font-size: 1.2em; }

.foot-navi { display: flex; flex-wrap: wrap; align-items: center; font-size: .9rem; justify-content: center; margin-top: 1em; }
.foot-navi > li:not(:last-child) { margin-right: 2em; }

.copyright { font-size: .8735rem; margin-top: 2em; display: block; text-align: center; }

@media screen and (max-width: 1336px) {
  .footer { text-align: center; }
  .footer-inner { flex-direction: column; }
  .foot-navi { margin-top: 2em; justify-content: center; }
  
  .copyright  { text-align: center; }
}

@media screen and (max-width: 1000px) {
  .foot-navi { display: none; } 
}
.title-section { text-align: center; font-size: 3rem; font-weight: bold; margin-bottom: 1em; color: #613D35;  }
.title-section::after { content: ''; width: 60px; height: 22px; display: block; background: url("../img/title.png") no-repeat center center / 100% 100%; margin: 0 auto; }

@media screen and (max-width: 900px) {
  .title-section { font-size: 2rem; }
}
@media screen and (max-width: 600px) {
  .title-section { font-size: 1.6rem; }
}


.scroll-area { width: 100%; height: 70vh; overflow: hidden; position: relative;  }
.scroll-track { display: flex; animation: scroll-left 40s linear infinite; width: fit-content; }
.scroll-track img { height: 70vh; width: auto; flex-shrink: 0; max-width: none; }


@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%); 
  }
}


.mainvisual { height: calc(100vh - 42px); position: relative; }
.mainvisual .text { position: absolute; left: 0; bottom: 0; background: #F0EDEA; border-radius: 0 40px 40px 0; box-shadow: 20px -25px 30px #9375542e; padding: 60px 70px 50px; line-height: 2; font-size: .8735rem;  }
.maintitle { font-family: 'Noto Serif JP', serif; font-size: 2.2rem; color: #937554; margin-bottom: .5em; line-height: 1.6; }


.btn-scroll-wrap { position: absolute; right: 0; bottom: 0; margin: auto; width: calc(30vh - 42px); height: calc(30vh - 42px); display: flex; align-items: center; justify-content: center; flex-direction: column; color: }
a.btn-scroll { color: #937554; font-size: .75rem; }
.btn-scroll::after { content: ''; width: .6em; height: .6em; display: block; border-right: 2px solid #937554; border-bottom: 2px solid #937554; transform: rotate(45deg); margin: 0 auto; }


@media screen and (max-width: 900px) {
  .mainvisual { height: auto; }
  .scroll-area { height: 50vw;}
  .mainvisual .text { position: relative; margin-top: -2rem; width: fit-content; max-width: calc(100% - 5rem); padding: 2rem ; border-radius: 0 30px 30px 0; }
  .maintitle  { font-size: 1.5rem; }
  
}

@media screen and (max-width: 600px) {
  .scroll-area { height: 100vw;}
  .mainvisual .text { max-width: none; width: 95%; }
  .btn-scroll-wrap { display: none; }
    .maintitle  { font-size: 1.3rem; }
}

.title-section { font-size: 2.2rem; color: #937554; text-align: center; font-family: 'Noto Serif JP', serif; font-weight: normal; }
.title-section .en { font-family: "Bodoni Moda", serif; font-size: 5rem; display: block; opacity: .15; line-height: 1; margin-bottom: -.5em; font-weight: 400; }

@media screen and (max-width: 900px) {
  .title-section { font-size: 1.5rem; }
  .mainvisual .text { font-size: 0.9rem; }
  .title-section .en { font-feature-settings: 3rem; }
}

@media screen and (min-width: 901px) {
  .title-section.flow { writing-mode: vertical-rl; white-space: nowrap; text-align: left;  margin: 0 auto 0 0; width: 6.5rem;  }
  .title-section.flow .en { margin: 0 0 0 -.5em; }
}





.home-reason { margin-top: 60px; }
.list-reason { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.list-reason > li { position: relative; }
.list-reason .text { background: #FFFFFFD9; position: absolute; left: 0; bottom: 0; margin: auto;  font-size: .8735rem; padding: 1.5rem; min-height: 12rem; width: 100%; }
.list-reason .ttl { color: #937554; font-size: 2rem; margin-bottom: .5em; font-family: 'Noto Serif JP', serif; }

@media screen and (max-width: 1300px) {
  .list-reason .ttl { font-size: 1.7rem; }
}
@media screen and (max-width: 1100px) {
  .list-reason .ttl { font-size: 1.5rem; }
}
@media screen and (max-width: 1000px) {
  .list-reason  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 900px) {
  .list-reason > li { height: 20rem; }
  .list-reason img { width: 100%; height: 100%; object-fit: cover; }
  .list-reason .ttl { font-size: 1.25rem; }
}


.home-flow { padding: 120px 0; color: #937554; font-size: .8735rem; }
.home-flow .inner { display: flex; justify-content: space-between; }
.home-flow .conts { width: calc(100% - 180px); }

.list-flow { display: grid; position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; text-align: center; counter-reset: listnum; }
.list-flow > li { counter-increment: listnum; }
.list-flow .img { width: 150px; height: 150px; border: 1px solid #937554; display: flex; justify-content: center; align-items: center; border-radius: 50%; position: relative; background: #F0EDEA; margin: 0 auto; }
.list-flow .img::before { content: counter(listnum, decimal-leading-zero); position: absolute; left: -.5em; top: -.2em; margin: auto; font-family: 'Bodoni Moda', serif; line-height: 1; z-index: -1; font-size: 3rem; }

.list-flow > li:not(:first-child) .img::after { content: ''; width: 100%; height: 1px; background:  #937554; position: absolute; top: 50%; right: 100%; margin: auto; z-index: -1; display: block; }


.list-flow .img img { width: 50%; height: 50%; object-fit: contain; }

.list-flow .ttl { font-family: 'Noto Serif JP', serif; font-size: 1.5rem; margin: .5em 0 .2em; }
.list-flow .ttl span { display: block; font-size: .7em; }
.list-flow .tel { font-size: 1.125rem; font-family: 'Noto Serif JP', serif; }

.flow-msg { text-align: center; font-size: 1.25rem; margin-top: 1.5em; font-family: 'Noto Serif JP', serif; }

@media screen and (max-width: 1200px) {
  .list-flow .img { width: 100px; height: 100px; }
  .list-flow .img::before { font-size: 2rem; }
  .list-flow .ttl { font-size: 1.25rem; }
  
}
@media screen and (max-width: 900px) {
  .home-flow { padding: 60px 0; }
  .home-flow .inner { display: block; }
  .home-flow .conts { width: 100%; margin-top: 2rem; }
}

@media screen and (max-width: 600px) {
  
  .list-flow { grid-template-columns: 1fr; max-width: 400px; width: fit-content; margin: 0 auto; text-align: left; }
  .list-flow > li { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 1rem; align-items: center; }
  .list-flow .img { width: 80px; height: 80px; }
  
  .list-flow > li:not(:first-child) .img::after { bottom: 100%; left: 50%; top: auto;  width: 1px; height: 100%; } 
}
.home-promiss { position: relative; background: url("../img/promiss.jpg") no-repeat center center / cover; height: 500px; position: relative; }
.home-promiss::before { content: 'Promiss'; font-size: 12rem; color: #FFF; opacity: .3; font-family: 'Bodoni Moda', serif; position: absolute; left: .2em; bottom: 0; margin: auto; line-height: .7; }
.home-promiss .inner { position: relative; }
.home-promiss .text { writing-mode: vertical-rl; position: absolute; right: 0; top: -1rem; white-space: nowrap;  color: #937554; font-family: 'Noto Serif JP', serif; }
.home-promiss .text .title { display: block; background: #FFF; height: fit-content; padding: .5em; font-size: 2.2rem;line-height: 1; margin-left: .5em;  }
.home-promiss .text p { display: inline; padding: 5px; background: linear-gradient(#FFF, #FFF); -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 2.5; }

@media screen and (max-width: 900px) {
  .home-promiss { height: 300px; }
  .home-promiss::before { font-size: 25vw;}
  .home-promiss .text .title { font-size: 1.7rem; }
}
.conts-soudan { padding: 40px 0 100px; text-align: center; font-family: 'Noto Serif JP', serif; color: #937554; line-height: 2;  }
.conts-soudan .title { font-size: 2rem; margin-bottom: .5em; }

@media screen and (max-width: 900px) {
  .conts-soudan { padding: 40px 0 60px; }
  .conts-soudan .title { font-size: 1.5rem; line-height: 1.6; }
}
.home-overview { background: #E9E5E1; padding: 70px 0 100px;  }
.list-overview { max-width: 650px; margin: 0 auto; display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 1em 0; position: relative; }
.list-overview::before { content: ''; width: 1px; height: 100%; display: block; background: #937554; position: absolute; top: 0; left: 11em; margin: auto; }
.list-overview dt { padding-right: 1em; }
.list-overview dd { padding-left: 2em; }


@media screen and (max-width: 900px) {
  .home-overview  { padding: 40px 0 60px; }
}