:root {
  --font-shipporminchoB1: "Shippori Mincho B1", serif;
}
*, *::before, *::after {
  box-sizing: border-box;
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
  color: #a23044;
}
ul[role=list], ol[role=list] {
  list-style: none;
}
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}
img, picture {
  max-width: 100%;
  height: auto;
  display: block;
}
input, button, textarea, select {
  font: inherit;
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body, a, p {
  font-style: normal;
  text-decoration: none;
  line-height: 1;
}
body {
  position: relative;
  overflow-anchor: none;
  background: #e9e6e2;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.image{
  width: 100%;
}
.slide-box{
  overflow: hidden;
}
/*animation*/
.fade{
  opacity: 0;
}
.fade.active{
  animation-name: fade;
  animation-duration: 1.6s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.slideleft{
  translate: -6% 0;
  opacity: 0;
}
.slideleft.active{
  animation-name: slideleft;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-delay: 0.4s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes slideleft {
  0% {
    translate: -6% 0;
    opacity: 1;
  }
  100% {
    translate: 0 0;
    opacity: 1;
  }
}
.clippath-top{
  opacity: 0;
}
.clippath-top.active{
  animation-name: clippath-top;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  will-change: clippath;
}
@keyframes clippath-top {
  0% {
    opacity: 1;
    clip-path: inset(0 0 100% 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0);
  }
}
.clippath-topleft{
  opacity: 0;
}
.clippath-topleft.active{
  animation-name: clippath-topleft;
  animation-duration: 1.6s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes clippath-topleft {
  0% {
    opacity: 1;
    clip-path: polygon(0 0, 0 0, 0 0);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0 0, 200% 0, 0 200%);
  }
}
.clippath-left{
  opacity: 0;
}
.clippath-left.active{
  animation-name: clippath-left;
  animation-duration: 1.6s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes clippath-left {
  0% {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0);
  }
}
/*link*/
.link {
  position: relative;
  width: calc(275.4239 / 1280 * 100vw);
  margin-bottom: 0.6%;
  z-index: 2;
}
.link-other{
  margin-top: 6%;
  padding-top: 6%;
  border-top: 1px solid #a23044;
}
.link .cart{
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.3s;
}
.link .cart:not(:last-child) {
  margin-bottom: 3%;
}
.link .carttitle {
  font-family: var(--font-shipporminchoB1);
  font-size: calc(14 / 1280 * 100vw);
  letter-spacing: 0.04em;
}
.link .carttitle span {
  display: inline-block;
}
.link .cartprice {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-family: var(--font-shipporminchoB1);
  font-size: calc(14 / 1280 * 100vw);
}
.link .cartprice-yen {
  position: relative;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.link .cartprice-yen.size-l,
.link .cartprice-yen.size-s{
  padding-left: 1.3em;
}
.link .cartprice-yen.size-l::before,
.link .cartprice-yen.size-s::before{
  display: block;
  width: 1em;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: 0 auto;
}
.link .cartprice-yen.size-l::before{
  content: url(../img/sizeL.svg);
}
.link .cartprice-yen.size-s::before{
  content: url(../img/sizeS.svg);
}
.link .cartprice-yen.price-space{
  padding-left: 2.1em;
}
.link .cartprice-yen .tax{
  margin-left: 0.5em;
  font-size: calc(9 / 1280 * 100vw);
}
.link .cartprice-btn {
  position: relative;
  display: inline-block;
  margin-left: 0.5em;
  padding: 3% 4%;
  border: 1px solid #a23044;
  background: #a23044;
  color: #fff;
  font-family: var(--font-shipporminchoB1);
  font-size: calc(10 / 1280 * 100vw);
  line-height: 1;
  transition: 0.2s;
} 
.link-other .cartprice-btn{
  background: transparent;
  color: #a23044;
}
.link .cart:hover .cartprice-btn{
  background: #fff;
  color: #a23044;
}
/* 共通*/
.pc {
  display: block;
}
.sp {
  display: none;
}
/*header*/
.header{
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 718;
  background-image: url('../img/mv-bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}
@supports (background-image: url('image.webp')) {
  .item-box._01 .text-box{
    background-image: url('../img/mv-bg.webp');
  }
}
.header .photo{
  animation-duration: 1.6s;
}
.header .title01{
  position: absolute;
  top: 31.4%;
  left: 27%;
  width: calc(256 / 1280 * 100%);
  z-index: 2;
}
.header .title01 .image{
  animation-duration: 0.6s;
  animation-delay: 1s;
}
.header .line{
  position: absolute;
  top: 50.7%;
  left: 27%;
  width: calc(46 / 1280 * 100%);
  height: 1px;
  background: #a23044;
  z-index: 2;
  animation-duration: 0.6s;
  animation-delay: 1.4s;
}
.header .title02{
  position: absolute;
  top: 56.7%;
  left: 26.8%;
  width: calc(312.5757 / 1280 * 100%);
  z-index: 2;
  animation-duration: 1s;
  animation-delay: 1s;
}
.header .title02 .image{
  animation-duration: 0.6s;
  animation-delay: 1.8s;
}
.header .title03{
  position: absolute;
  top: 71.5%;
  left: 26%;
  width: calc(553.9937 / 1280 * 100%);
  z-index: 2;
}
.header .title03 .image{
  animation-duration: 1.4s;
  animation-delay: 2s;
}
.header .title04{
  position: absolute;
  top: 86.4%;
  left: 26.1%;
  width: calc(408.2988 / 1280 * 100%);
  z-index: 2;
}
.header .title04 .image{
  animation-duration: 0.8s;
  animation-delay: 2.4s;
}
.header .logo {
  position: absolute;
  top: 2.5%;
  left: 1.8%;
  width: calc(72 / 1280 * 100%);
}
/*lead*/
.lead{
  position: relative;
}
.lead .text{
  position: absolute;
  top: 33%;
  left: 13.5%;
  width: calc(582.3345 / 1280 * 100%);
}
.lead .title01{
  position: absolute;
  top: 22%;
  left: 70%;
  width: calc(304.9517 / 1280 * 100%);
}
.lead .title02{
  position: absolute;
  top: 78%;
  left: 14%;
  width: calc(139.8721 / 1280 * 100%);
}
.lead .scroll-box{
  position: absolute;
  top: 76%;
  left: 92%;
}
.lead .scroll{
  position: relative;
  width: 2%;
  margin: 0 auto;
}
.lead .scroll::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 176px;
  background: rgb(162 48 68 / 0.2);
  z-index: 1;
}
.lead .scroll::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 176px;
  background: rgb(162 48 68 / 1);
  animation: sdl 2s cubic-bezier(1, 0, 0, 1) infinite;
  z-index: 1;
}
@keyframes sdl{
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
/* main ------------------- */
.main{
  padding-top: 1%;
}
/* item-box---------------------- */
.item-box{
  position: relative;
  right: 2%;
  margin-top: 8%;
}
.item-box .number{
  width: calc(201 / 1280 * 100%);
}
.item-box .title-box{
  position: absolute;
  z-index: 2;
}
.item-box .main-box{
  display: flex;
  justify-content: space-between;
  margin-inline: auto;
}
.item-box .box01{
  position: relative;
  width: calc(500 / 970 * 100%);
}
.item-box .text{
  font-family: var(--font-shipporminchoB1);
  font-size: calc(15 / 1280 * 100vw);
  line-height: calc(28 / 16);
  letter-spacing: 0;
}
.item-box .title02{
  position: relative;
  margin-top: 5%;
}
.item-box .title02 .title{
  position: relative;
  z-index: 2;
  animation-delay: 0.4s;
}
.item-box .title02 .line{
  position: absolute;
  top: 0;
  left: 0;
}
.item-box .text._02{
  margin-top: 5%;
}
.item-box .photo02{
  margin-top: 15%;
  outline: calc(4 / 1280 * 100vw) solid #fff;
}
/*item01----------------------*/
.item01 .number{
  margin-left: calc(calc(1280 - 970) / 1280 * 50%);
}
.item01 .title-box{
  top: 5%;
  left: 46%;
  width: calc(516.1134 / 1280 * 100%);
}
.item01 .title01{
  width: calc(280.9844 / 516.1134 * 100%);
}
.item01 .itemname{
  margin-top: 4%;
}
.item01 .main-box{
  width: calc(970 / 1280 * 100%);
}  
.item01 .photo01{
  margin-top: 6%;
}
.item01 .box02{
  width: calc(390 / 970 * 100%);
  margin-top: 20%;
}
.item01 .title02{
  position: relative;
  right: 8%;
  width: calc(295.6291 / 390 * 100%);
}
.item01 .text{
  position: relative;
  right: 8%;
}
.item01 .photo02{
  margin-top: 15%;
}  
.item01 .link{
  margin: 6% 0 0 auto;
}
/*item02----------------------*/
.item02{
  margin-top: 10%;
}
.item02 .number{
  margin-left: auto;
  margin-right: 9%;
}
.item02 .title-box{
  top: 11%;
  left: 47%;
  width: calc(269.9971 / 1280 * 100%);
}
.item02 .title01{
  width: calc(257.1465 / 269.9971 * 100%);
}
.item02 .itemname{
  margin-top: 8%;
}
.item02 .main-box{
  width: calc(965 / 1280 * 100%);
}
.item02 .box02{
  width: calc(430 / 965 * 100%);
  margin-top: 27%;
}
.item02 .title02{
  position: relative;
  right: 20%;
  width: calc(298 / 430 * 100%);
}
.item02 .text._01{
  position: relative;
  right: 20%;
}
.item02 .text._02{
  width: 87%;
}
.item02 .photo02{
  margin-top: 10%;
} 
.item02 .link{
  position: absolute;
  bottom: 1%;
  right: 0;
}
/*item03----------------------*/
.item03 .number{
  margin-left: calc(calc(1280 - 970) / 1280 * 50%);
}
.item03 .title-box{
  top: 6%;
  left: 46%;
  width: calc(559.2521 / 1280 * 100%);
}
.item03 .title01{
  width: calc(297.0791 / 559.2521 * 100%);
}
.item03 .itemname{
  margin-top: 4%;
}
.item03 .main-box{
  width: calc(971 / 1280 * 100%);
}
.item03 .photo01{
  margin-top: 6%;
}
.item03 .box02{
  width: calc(391 / 970 * 100%);
  margin-top: 22%;
}
.item03 .title02{
  width: calc(340 / 391 * 100%);
}
.item03 .text._02{
  width: 92%;
}
.item03 .photo02{
  margin-top: 26%;
}  
.item03 .link{
  margin: 6% 0 0 auto;
}
/*item04----------------------*/
.item04 .number{
  margin-left: calc(calc(1280 - 970) / 1280 * 50%);
}
.item04 .title-box{
  top: 5%;
  left: 47%;
  width: calc(575.3311 / 1280 * 100%);
}
.item04 .title01{
  width: calc(253.3882 / 575.3311 * 100%);
}
.item04 .itemname{
  margin-top: 4%;
}
.item04 .main-box{
  width: calc(990 / 1280 * 100%);
}
.item04 .photo01{
  margin-top: 6%;
}
.item04 .box02{
  width: calc(430 / 990 * 100%);
  margin-top: 21%;
}
.item04 .title02{
  width: calc(246 / 430 * 100%);
}
.item04 .text._02{
  width: 84%;
}
.item04 .photo02{
  margin-top: 12%;
}  
.item04 .link{
  margin: 6% 0 0 auto;
}
/*item05----------------------*/
.item05{
  margin-top: 10%;
}
.item05 .number{
  margin-left: auto;
  margin-right: 9%;
}
.item05 .title-box{
  top: 11%;
  left: 47%;
  width: calc(507.4733 / 1280 * 100%);
}
.item05 .title01{
  width: calc(289.0215 / 507.4733 * 100%);
}
.item05 .itemname{
  margin-top: 4%;
}
.item05 .main-box{
  width: calc(965 / 1280 * 100%);
}
.item05 .box02{
  width: calc(390 / 965 * 100%);
  margin-top: 28%;
}
.item05 .title02{
  position: relative;
  right: 32%;
  width: calc(272 / 390 * 100%);
}
.item05 .text._01{
  position: relative;
  right: 32%;
}
.item05 .text._02{
  position: relative;
  right: 7%;
  width: 90%;
}
.item05 .photo02{
  margin-top: 14%;
} 
.item05 .link{
  position: absolute;
  bottom: 1%;
  right: 0;
}
/* all-btn */
.all-btn{
  position: relative;
  width: calc(664 / 1280 * 100%);
  margin: 12% auto 0;
}
.all-btn .text{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
/* pickup */
.pickup{
  margin-top: 6%;
}
.pickup .title{
  width: calc(170.1587 / 1280 * 100%);
  margin-inline: auto;
}
.pickup .photo{
  width: calc(520 / 1280 * 100%);
  margin: 2% auto 0;
}
/*banner-staff*/
.banner-staff {
  margin: 6% auto 0;
}
.banner-staff .text{
  text-align: center;
  font-family: "Cardo", serif;
  font-size: calc(14 / 1280 * 100vw);
  line-height: calc(25 / 14);
  letter-spacing: 0.03em;
}
/*banner*/
.banner {
  width: calc(603 / 1280 * 100%);
  margin: 4% auto 0;
}
.banner-item {
  display: block;
  margin-top: 3%;
  border: 1px solid #a23044;
  transition: 0.6s ease-in-out;
}
/*footer*/
.footer {
  padding-bottom: 2%;
  text-align: center;
}
.footer-sns {
  display: block;
  width: calc(30 / 1280 * 100%);
  min-width: 30px;
  margin: 4% auto 0;
}
.footer-logo {
  display: block;
  width: calc(102 / 1280 * 100%);
  margin: 3% auto 0;
}
.footer-logo .image{
  width: 100%;
}
.footer-copyright {
  margin: 34px 0 0;
  color: #000;
  font-family: "Helvetica", serif;
  font-size: calc(8 / 1280 * 100vw);
  letter-spacing: 0.02em;
}
/*stepnav*/
.stepnav{
  position: fixed;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: calc(36.583 / 1280 * 100vw);
  z-index: 9999;
}
.stepnav .list {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.stepnav .list .title{
  width: 100%;
  margin-bottom: 30%;
}
.stepnav .list .item{
  width: 100%;
}
.stepnav .list .item:not(:last-of-type){
  margin-bottom: 80%;
}
.stepnav .list .item .image{
  opacity: 0.6;
  scale: 0.6;
  transition: 0.1s ease;
}
.stepnav .list a.current .image{
  opacity: 1;
  scale: 1;
}
/*pagetop*/
.pagetop {
  position: fixed;
  right: 1vw;
  bottom: 30px;
  width: calc(46 / 1280 * 100%);
  z-index: 99;
}
.pagetop .image{
  width: 100%;
}
/*footnav*/
.footnav {
  display: none;
}

@media (max-width: 768px) {
  /* アニメーション */
  .clippath-topleft.active{
    animation-duration: 1s;
  }
  .clippath-left.active{
    animation-duration: 1s;
  }
  .slideleft.active{
    animation-timing-function: ease-in-out;
  }
  /* link------------------------ */
  section[class*="item0"] .link{
    position: relative;
    bottom: auto;
    left: auto;
    width: calc(305.8691 / 375 * 100%);
    margin: 12% auto 10%;
  }
  .link-other{
    margin-top: 4%;
    padding-top: 4%;
  }
  .link .carttitle {
    font-size: calc(15 / 375 * 100vw);
  }
  .link .cartprice,
  .link .cartprice-yen-size{
    font-size: calc(15 / 375 * 100vw);
  }
  .link .cartprice-yen.size-l::before, .link .cartprice-yen.size-s::before{
    width: 3.8vw;
  }
  .link .cartprice-yen .tax{
    font-size: calc(10 / 375 * 100vw);
  }
  .link .cartprice-btn {
    padding: 4% 6%;
    font-size: calc(10 / 375 * 100vw);
  }
  .link .cart:hover .cartprice-btn{
    background: #a23044;
    color: #fff;
  }
  .link-other .cart:hover .cartprice-btn{
    background: transparent;
    color: #a23044;
  }
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  /* header------------------------ */
  .header{
    aspect-ratio: inherit;
    background-image: none;
  }
  .header .list .item:nth-last-child(2){
    position: absolute;
    top: 0;
    left: 0;
  }
  .header .title01{
    top: 64%;
    left: 50%;
    translate: -50% 0;
    width: calc(279.4554 / 375 * 100%);
  }
  .header .title01 .image{
    animation-delay: 0.4s;
  }
  .header .title02{
    top: 70%;
    left: 50%;
    translate: -50% 0;
    width: calc(333.9788 / 375 * 100%);
  }
  .header .title02 .image{
    animation-duration: 1s;
    animation-delay: 0.8s;
  }
  .header .title03{
    top: 76%;
    left: 50%;
    translate: -50% 0;
    width: calc(336.0561 / 375 * 100%);
  }
  .header .title03 .image{
    animation-duration: 1s;
    animation-delay: 1s;
  }
  .header .title04{
    top: 88.5%;
    left: 11%;
    width: calc(210.7349 / 375 * 100%);
  }
  .header .title04 .image{
    animation-delay: 1.4s;
  }
  /* lead */
  .lead .logo{
    position: absolute;
    top: 4.5%;
    left: 50%;
    translate: -50% 0;
    width: calc(66 / 375 * 100%);
  }
  .lead .title01{
    top: 24%;
    left: 50%;
    translate: -50% 0;
    width: calc(288.6533 / 375 * 100vw);
  }
  .lead .text{
    top: 41%;
    left: 50%;
    translate: -50% 0;
    width: calc(301.7324 / 375 * 100%);
  }
  .lead .title02{
    top: 83%;
    left: 57%;
    width: calc(139.8721 / 375 * 100vw);
  }

  /* item-box */
  section[class*="item0"]{
    right: auto;
    margin-top: 12%;
  }
  .item-box .number{
    margin-left: calc(calc(375 - 335) / 375 * 50%);
    width: calc(204 / 375 * 100%);
  }
  section[class*="item0"] .title-box{
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: calc(335 / 375 * 100%);
    margin-top: 8%;
    margin-left: calc(calc(375 - 335) / 375 * 50%);
  }
  section[class*="item0"] .itemname{
    margin-top: 6%;
  }
  section[class*="item0"] .main-box{
    flex-direction: column;
    width: 100%;
  }
  .item-box .box01,
  .item-box .box02{
    display: contents;
    width: 100%;
  }
  section[class*="item0"] .photo01{
    width: 100%;
    margin-top: 6%;
    order: 1;
  }
  section[class*="item0"] .photo02{
    width: calc(335 / 375 * 100%);
    margin: 8% auto 0;
    outline: calc(6 / 375 * 100vw) solid #fff;
    order: 2;
  }
  section[class*="item0"] .text{
    right: auto;
    width: calc(347 / 375 * 100%);
    margin: 6% auto 0;
    padding-left: 0.25em;
    font-size: calc(16 / 375 * 100vw);
    line-height: calc(30 / 17);
    order: 3;
  }
  section[class*="item0"] .title02{
    right: 1%;
    margin-left: calc(calc(375 - 335) / 375 * 50%);
    order: 4;
  }
  section[class*="item0"] .text._01{
    right: auto;
  }
  section[class*="item0"] .text._02{
    right: auto;
    width: calc(347 / 375 * 100%);
    order: 5;
  }
  .link{
    order: 6;
  }
  /*item1----------------------*/
  .item01 .title01{
    width: calc(225.3906 / 375 * 100%);
  }
  .item01 .itemname{
    width: calc(224.8804 / 375 * 100%);
  }
  .item01 .title02{
    width: calc(295.6291 / 375 * 100%);
  }
  /*item02----------------------*/
  .item02 .title01{
    width: calc(206.2695 / 375 * 100%);
  }
  .item02 .itemname{
    width: calc(216.001 / 375 * 100%);
  }
  .item02 .title02{
    width: calc(298 / 375 * 100%);
  }
  /*item03----------------------*/
  .item03 .title01{
    width: calc(238.1851 / 375 * 100%);
  }
  .item03 .itemname{
    width: calc(259.7271 / 375 * 100%);
  }
  .item03 .title02{
    width: calc(340 / 375 * 100%);
  }
  /*item04----------------------*/
  .item04 .title01{
    width: calc(203.2607 / 375 * 100%);
  }
  .item04 .itemname{
    width: calc(247.0557 / 375 * 100%);
  }
  .item04 .title02{
    width: calc(246 / 375 * 100%);
  }
  /*item05----------------------*/
  .item05 .title01{
    width: calc(231.7808 / 375 * 100%);
  }
  .item05 .itemname{
    width: calc(217.8721 / 375 * 100%);
  }
  .item05 .title02{
    width: calc(272 / 375 * 100%);
  }
  /* all-btn */
  .all-btn{
    width: calc(335 / 375 * 100%);
    margin-top: 17%;
  }
  .all-btn .bg{
    display: none;
  }
  .all-btn .text{
    position: relative;
    top: auto;
    left: auto;
  }
  /* pickup */
  .pickup{
    margin-top: 24%;
  }
  .pickup .title{
    width: calc(111.8286 / 375 * 96%);
  }
  .pickup .photo{
    width: calc(320 / 375 * 100%);
    margin-top: 6%;
  }
  /* bottom-block------------------ */
  .banner-staff{
    margin-top: 14%;
  }
  .banner-staff .text{
    font-size: calc(12 / 375 * 100vw);
  }
  .banner {
    width: 80%;
    margin-top: 12%;
  }
  .banner .title{
    width: calc(368 / 1280 * 100%);
  }
  .banner-item {
    margin-top: 6%;
  }
  .footer {
    padding-bottom: 18%;
  }
  .footer-sns {
    width: calc(35.1563 / 375 * 100%);
    margin-top: 10%;
  }
  .footer-logo {
    width: calc(119.5312 / 375 * 100%);
    margin-top: 6%;
  }
  .footer-copyright{
    font-size: calc(8.2032 / 375 * 100vw);
  }
  /* stepnav */
  .stepnav{
    top: auto;
    bottom: 0;
    right: auto;
    left: 0;
    width: 100%;
    padding: 3% 4%;
    transform: translateY(0);
    background: #e9e6e2;  
  }
  .stepnav .list{
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }
  .stepnav .list .title{
    width: calc(42 / 375 * 100%);
    margin: 0 2% 0 0;
  }
  .stepnav .list .item{
    width: calc(40 / 375 * 100%);
    margin: 0 2%;
  }
  .stepnav .list .item:not(:last-of-type){
    margin-bottom: 0;
  }
  .stepnav .sp-pagetop{
    width: calc(22 / 375 * 100%);
    margin: 0 0 0 5%;
  }
}