main {
   overflow: visible;
}

main:before {
   content: '';
   display: block;
   width: 100%;
   height: 100vh;
   position: fixed;
   top: 0;
   left: 0;
   z-index: -1;
}

header {
   background: transparent;
   padding: 40px 0 60px;
}

section {
   background: url('../img/shared/body-bg.jpg') repeat center top;
   overflow: hidden;
}

footer {
   background: url('../img/shared/body-bg.jpg') repeat center top;
}

@media only screen and (max-width: 767px) {
   main:before {
      background: url(../img/shared/header-deco_sp.png) no-repeat center top / auto 100%, url("../img/shared/body-bg.jpg") repeat center top;
   }
}

@media only screen and (min-width: 768px) {
   main:before {
      background: url(../img/shared/header-deco.png) no-repeat center top / 100% auto, url("../img/shared/body-bg.jpg") repeat center top;
   }
}

/* -- -- */
.txt {
   text-align: justify;
}

@media only screen and (max-width: 767px) {
   .txt br {
      /*display: none;*/
   }
}

@media only screen and (min-width: 768px) {
   .txt-c .txt {
      text-align: center;
   }
}

/* -- -- */
@media only screen and (max-width: 767px) {
   .animation-scroll {
      position: relative;
   }

   .animation-scroll .animation-scroll__block {
      width: 100%;
      -webkit-transition: .3s;
      transition: .3s;
      position: sticky;
      top: 0;
   }

   .animation-scroll .animation-scroll__block .slider-scroll {
      width: 86.8vw;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-transition: .3s;
      transition: .3s;
      margin: 0 auto;
   }

   .animation-scroll .animation-scroll__block .slider-scroll .img {
      position: relative;
   }

   .animation-scroll__mask>p {
      height: 66.66vw;
   }
}

@media only screen and (min-width: 768px) {
   .animation-scroll {
      position: relative;
   }

   .animation-scroll .animation-scroll__block {
      width: 100%;
      -webkit-transition: .3s;
      transition: .3s;
      position: sticky;
      top: 0;
   }

   .animation-scroll .animation-scroll__block .slider-scroll {
      width: calc(100% - 200px);
      max-width: 1100px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-transition: .3s;
      transition: .3s;
      margin: 0 auto;
   }

   .animation-scroll .animation-scroll__block .slider-scroll .img {
      position: relative;
   }

   .animation-scroll__mask>p {
      height: 610px;
   }
}

/* -- -- */
#sec1 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec1 {
      padding: 18.8vw 0 0;
   }

   #sec1 h2 {
      width: 45vw;
      height: 44vw;
      background-size: 14.9vw 14.9vw;
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 1px, transparent 1px);
      line-height: 15vw;
      margin: 0 auto;
   }

   #sec1 h2 span {
      display: block;
   }

   #sec1 h2 span:nth-child(1) {
      position: relative;
      top: 16px;
   }

   #sec1 h2 span:nth-child(2) {
      display: block;
      text-align: top;
      height: 205px;
      margin-top: 14px;
   }

   #sec1 h2 span:nth-child(3) {
      position: relative;
      top: 28px;
      letter-spacing: 0.3em;
   }

   #sec1 .txt {
      padding-top: 19vw;
   }

   #sec1 .txt p+p {
      padding-top: 4.8vw;
   }

   #sec1 .box {
      text-align: center;
      padding-top: 18vw;
   }

   #sec1 .box figure {
      width: 60vw;
      margin: 0 auto;
   }

   #sec1 .box h3 {
      font-weight: 500;
      font-size: 3.33vw;
      line-height: 2;
      letter-spacing: 0.45em;
      padding-top: 10vw;
   }

   #sec1 .box h3 span {
      display: inline-block;
      padding-bottom: 4.8vw;
   }

   #sec1 .box h3 span:last-child {
      padding-right: 20vw;
      padding-bottom: 0;
      position: relative;
   }

   #sec1 .box h3 span:last-child:after {
      content: '';
      width: 18vw;
      height: 1px;
      background-image: linear-gradient(to right, #000, transparent);
      position: absolute;
      top: 50%;
      right: 0;
      opacity: 0.5;
   }

   #sec1 .banner {
      padding-top: 16vw;
      position: relative;
   }

   #sec1 .banner:before {
      content: '';
      width: 100vw;
      height: 100%;
      background: url("../img/index/sec1-deco_sp.png") no-repeat center top/100% auto;
      position: absolute;
      top: 16vw;
      left: -6.6vw;
   }

   #sec1 .banner li {
      padding-top: 16vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec1 {
      padding-top: 70px;
   }

   #sec1 .wrap {
      background: url("../img/index/sec1-deco.png") no-repeat bottom right 70px;
      padding-bottom: 115px;
   }

   #sec1 h2 {
      width: 265px;
      height: 380px;
      letter-spacing: 0.4em;
      line-height: 88px;
      margin: 0 auto;
      position: relative;
      padding-top: 20px;
   }

   #sec1 h2:before {
      content: '';
      width: 100%;
      height: 260px;
      background-size: 88px 88px;
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 1px, transparent 1px);
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec1 h2 span:nth-child(1) {
      position: relative;
      top: 10px;
   }

   #sec1 h2 span:nth-child(2) {
      display: block;
      text-align: center;
      height: 205px;
   }

   #sec1 h2 span:nth-child(3) {
      position: relative;
      top: 20px;
      letter-spacing: 0.3em;
   }

   #sec1 .txt {
      display: flex;
      flex-direction: column;
      gap: 36px;
      height: 370px;
      line-height: 40px;
      letter-spacing: 0.15em;
      margin-left: auto;
      padding: 4px 123px 0 0;
   }

   #sec1 .box {
      position: relative;
      padding: 73px 0 81px;
      margin-top: 77px;
   }

   #sec1 .box figure {
      width: 450px;
      position: absolute;
      top: 0;
      right: 38px;
   }

   #sec1 .box h3 {
      font-size: 20px;
      line-height: 45px;
      letter-spacing: 0.45em;
      position: relative;
      z-index: 1;
   }

   #sec1 .box h3 span {
      display: inline-block;
      padding-bottom: 20px;
   }

   #sec1 .box h3 span:nth-child(3) {
      padding-left: 60px;
   }

   #sec1 .box h3 span:last-child {
      position: relative;
      padding: 0 80px 0 140px;
   }

   #sec1 .box h3 span:last-child:after {
      content: '';
      width: 78px;
      height: 1px;
      background-image: linear-gradient(to right, #000, transparent);
      position: absolute;
      top: 50%;
      right: 0;
      opacity: 0.5;
   }

   #sec1 .box h3 strong {
      font-weight: inherit;
      font-size: 22px;
   }

   #sec1 .banner {
      margin: 0 -30px;
      padding-top: 140px;
   }

   #sec1 .banner a:hover {
      opacity: 1;
   }

   #sec1 .banner img {
      box-shadow: 7px 13px 14px 1.05px rgba(19, 9, 2, 0.1);
   }

   #sec1 .banner li:nth-child(2) {
      text-align: right;
   }
}

@media only screen and (min-width: 1201px) {
   #sec1 .box h3 {
      left: -32px;
   }
}

/* -- -- */
#sec2 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec2 {
      padding: 24vw 0 0;
   }

   #sec2:before {
      content: '';
      width: 1px;
      height: 24vw;
      background-image: linear-gradient(to bottom, #000, transparent);
      position: absolute;
      top: 0;
      left: 50%;
      opacity: 0.2;
   }

   #sec2 .txt {
      padding-top: 10vw;
   }

   #sec2 .box1 {
      padding-top: 12vw;
   }

   #sec2 .box1 dl dt {
      text-align: center;
   }

   #sec2 .box1 dl dd {
      padding-top: 6vw;
   }

   #sec2 .box1 dl dd h3:not(:first-child) {
      padding-top: 8vw;
   }

   #sec2 .box1 .item1 {
      border-top: 1px solid rgba(0, 0, 0, 0.2);
      padding: 12vw 0;
   }

   #sec2 .box1 .item2 {
      border-top: 1px solid rgba(0, 0, 0, 0.2);
      padding-top: 12vw;
   }

   #sec2 .box1 .item2 dd p+p {
      padding-top: 4.8vw;
   }

   #sec2 .box2 {
      background-color: rgba(255, 255, 255, 0.6);
      text-align: center;
      margin-top: 16vw;
      padding: 16vw 8vw;
      position: relative;
   }

   #sec2 .box2:before {
      content: '';
      width: 34.8vw;
      height: 47vw;
      background: url("../img/index/sec2-deco.png") no-repeat center top/cover;
      position: absolute;
      bottom: 100%;
      right: -6.6vw;
      margin-bottom: -5.3vw;
      z-index: -1;
   }

   #sec2 .box2 .tel {
      font-size: 3.5vw;
      line-height: 1.5;
      letter-spacing: 0.12em;
      text-align: center;
   }

   #sec2 .box2 .tel a {
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   #sec2 .box2 .tel span {
      display: inline-block;
      font-size: 8vw;
      letter-spacing: 0.03em;
      background: url("../img/shared/icon-tel.png") no-repeat center left/6vw auto;
      padding-left: 8vw;
   }

   #sec2 .box2 .cancel {
      padding-top: 12vw;
   }

   #sec2 .box2 .cancel p {
      text-align: justify;
      padding-top: 3.3vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec2 {
      padding: 208px 0 120px;
   }

   #sec2:before {
      content: '';
      width: 1px;
      height: 256px;
      background-image: linear-gradient(to bottom, #000, transparent);
      position: absolute;
      top: -53px;
      left: 50%;
      opacity: 0.2;
   }

   #sec2:after {
      content: '';
      width: 338px;
      height: 456px;
      background: url("../img/index/sec2-deco.png") no-repeat center top/cover;
      position: absolute;
      bottom: 295px;
      right: 0;
      z-index: -1;
   }

   #sec2 .txt {
      padding-top: 47px;
   }

   #sec2 .box1 {
      max-width: 867px;
      margin: 0 auto;
      padding: 56px 0 44px;
   }

   #sec2 .box1 dl {
      display: flex;
      gap: 50px;
      border-top: 1px solid rgba(0, 0, 0, 0.2);
      padding: 38px 0;
   }

   #sec2 .box1 dl dt {
      width: 20px;
      line-height: 20px;
   }

   #sec2 .box1 dl dd {
      width: calc(100% - 70px);
   }

   #sec2 .box1 .item1 dd h3:not(:first-child) {
      padding-top: 25px;
   }

   #sec2 .box1 .item1 dd p {
      padding: 5px 0 0 32px;
   }

   #sec2 .box1 .item2 dd p+p {
      padding-top: 9px;
   }

   #sec2 .box2 {
      display: flex;
      background-color: rgba(255, 255, 255, 0.6);
      max-width: 867px;
      margin: 0 auto;
      padding: 60px 0 56px;
   }

   #sec2 .box2 .tel {
      width: 55%;
      font-size: 15px;
      letter-spacing: 0.12em;
      line-height: 28px;
      text-align: center;
      padding-top: 28px;
   }

   #sec2 .box2 .tel span {
      display: inline-block;
      background: url("../img/shared/icon-tel.png") no-repeat center left/25px auto;
      font-weight: 500;
      font-size: 35px;
      letter-spacing: 0.03em;
      line-height: 35px;
      padding-left: 30px;
   }

   #sec2 .box2 .cancel {
      width: 292px;
   }

   #sec2 .box2 .cancel p {
      padding-top: 15px;
   }
}

/* -- -- */
#sec3 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec3 {
      padding: 24vw 0 16vw;
   }

   #sec3:before {
      content: '';
      width: 15.2vw;
      height: 34.8vw;
      background: url("../img/shared/bg01.jpg") repeat center top;
      position: absolute;
      top: -8vw;
      left: 0;
      z-index: -1;
   }

   #sec3 .wrap {
      width: 73vw;
      padding: 0;
   }

   #sec3 h2 {
      text-align: center;
   }

   #sec3 .feed li {
      padding-top: 8vw;
   }

   #sec3 .feed time {
      display: block;
   }

   #sec3 .more {
      padding-top: 10.8vw;
   }

   #sec3 .more a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 72vw;
      height: 14.8vw;
      font-size: 4.2vw;
      line-height: 1.5;
      letter-spacing: 0.1em;
      border: 1px solid rgba(0, 0, 0, 0.2);
      box-sizing: border-box;
      margin: 0 auto;
      position: relative;
   }

   #sec3 .more a:after {
      content: '';
      width: 13.2vw;
      height: 0;
      border-top: 1px solid rgba(0, 0, 0, 0.2);
      position: absolute;
      top: 50%;
      right: -6.6vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec3:before {
      content: '';
      width: 98px;
      height: 322px;
      background: url("../img/shared/bg01.jpg") repeat center top;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec3 .wrap {
      display: flex;
      padding-bottom: 123px;
      padding-left: 129px;
   }

   #sec3 h2 {
      width: 212px;
      padding-top: 12px;
   }

   #sec3 .feed {
      border-left: 1px solid rgba(0, 0, 0, 0.2);
      padding-left: 55px;
   }

   #sec3 .feed li {
      display: flex;
      gap: 62px;
      position: relative;
      top: -7px;
   }

   #sec3 .feed li+li {
      padding-top: 30px;
   }

   #sec3 .feed li a:hover {
      text-decoration: underline;
   }

   #sec3 .more {
      position: absolute;
      top: 92px;
      left: 150px;
   }

   #sec3 .more a {
      display: block;
      width: 100px;
      box-sizing: border-box;
      border: 1px solid rgba(0, 0, 0, 0.2);
      line-height: 24px;
      text-align: center;
      position: relative;
      padding-bottom: 4px;
   }

   #sec3 .more a:after {
      content: '';
      width: 27px;
      height: 0;
      border-top: 1px solid rgba(0, 0, 0, 0.2);
      position: absolute;
      top: 50%;
      right: -13px;
   }

   #sec3 .more a:hover {
      background-color: #fff;
      opacity: 1;
   }
}

footer .block {
   background: url("../img/index/footer-img.jpg") no-repeat center top/cover;
}

@media only screen and (max-width: 767px) {
   footer .block .wrap {
      display: flex;
      align-items: center;
      height: 100%;
      padding: 0 16vw;
   }

   footer .block h2 {
      width: 9.6vw;
      height: 48vw;
      background: url("../img/index/footer-deco1.png") no-repeat center top/4.8vw auto, url("../img/index/footer-deco2.png") no-repeat center bottom/4.8vw auto;
      padding: 5vw 0;
   }
}

@media only screen and (min-width: 768px) {
   footer .block .wrap {
      width: 630px;
      padding-top: 92px;
   }

   footer .block h2 {
      width: 50px;
      height: 260px;
      background: url("../img/index/footer-deco1.png") no-repeat center top/28px auto, url("../img/index/footer-deco2.png") no-repeat center bottom/28px auto;
      padding: 36px 0 19px;
   }
}

.news_box {
   background: url('../img/shared/bg01.jpg') repeat center top;
   width: 860px;
   margin: 50px auto;
   line-height: 2em;
   padding-bottom: 39px;
   box-shadow: 0px 5px 8px 2px rgba(52, 28, 0, 0.1);
}

.news_box .ttl {
   color: #000;
   padding: 39px 50px 10px;
   text-align: center;
   font-size: 24px;
   width: 660px;
   border-bottom: 1px solid #000;
   margin: 0 auto;
   line-height: 1.6 !important;
}

.news_box .txt {
   color: #000;
   padding: 20px 50px 0;
   text-align: center;
   font-size: 18px;
}

@media only screen and (max-width: 768px) {
   .news_box {
      width: 90%;
      margin: 20px auto;
   }

   .news_box .ttl {
      padding: 39px 10px 10px;
      font-size: 18px;
      width: 70%;
   }

   .news_box .txt {
      padding: 20px 10px 0;
      font-size: 14px;
   }

   .news_box .link a {
      width: 90%;
      font-size: 16px;
   }
}

.blank-box::before {
   content: "";
}

@media only screen and (max-width: 767px) {
   #sec2 .txt-price {
      font-size: 4vw;
      line-height: 1.5;
      letter-spacing: 0.45em;
      padding-top: 6vw;
   }

   #sec2 .txt-price span {
      font-size: 4.8vw;
   }

   #sec2 .note {
      padding-top: 2vw;
   }

   #sec2 .txt {
      padding-top: 6vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec2 .txt-price {
      line-height: 30px;
      letter-spacing: 0.45em;
      padding-top: 15px;
   }

   #sec2 .txt-price span {
      font-size: 20px;
   }

   #sec2 .note {
      padding-top: 2vw;
   }

   #sec2 .txt {
      padding-top: 6vw;
   }
}