*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul[role="list"],ol[role="list"]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

body,a,p{
  font-family: 'Shippori Mincho', serif;
  font-weight: 400;
  font-style: normal;
  color: #000;
  text-decoration: none;
  line-height: 2.2;
  letter-spacing: 0.08rem;
}
body{
  position: relative;
  -webkit-overflow-scrolling: touch;
  overflow-anchor: none;
  display: none;
}
ul{
  padding: 0;
}
li{
  list-style: none;
}
img{
  width: 100%;
}

.pc{
  display: block;
}
.sp{
  display: none;
}
.flex-box{
  display: flex;
}
.slide-box{
  max-width: 100%;
  overflow: hidden;
}

/* アニメーション */
.clippath-left{
  opacity: 0;
}
.header-clippath-left,
.clippath-left.active{
  animation-name: clippath-left;
  animation-duration: 1.4s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
  will-change: clippath;
}
@keyframes clippath-left{
  0% {
    opacity: 1;
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }
  100% {
    opacity: 1;
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
  }
}
.clippath-right{
  opacity: 0;
}
.clippath-right.active{
  animation-name: clippath-right;
  animation-duration: 1.4s;
  animation-timing-function: ease-in-out;
  animation-delay: 1.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes clippath-right{
  0% {
    opacity: 1;
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%);
  }
  100% {
    opacity: 1;
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
  }
}
.mask-out{
  animation-name: mask-out;
  animation-duration: 1.2s;
  animation-timing-function: linear;
  animation-delay: 0.4s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes mask-out{
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}
.header-zoom{
  animation: header-zoom;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
  will-change: transform;
}
@keyframes header-zoom{
  0%{
    opacity: 0;
    filter: blur(6px);
    transform: scale(1.3);
  }
  100%{
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}
.fade{
  opacity: 0;
}
.header-fade,
.fade.active{
  animation-name: fade;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fade{
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.zoomin-left{
  opacity: 0;
  transform: scale(1.2) translateX(-10%);
}
.zoomin-left.active{
  opacity: 1;
  transform: scale(1) translateX(0);
  transition: opacity 2350ms cubic-bezier(0.25, 0.46, 0.45, 0.94),transform 3000ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-delay: 1s;
}
.zoomin-right{
  opacity: 0;
  transform: scale(1.2) translateX(10%);
}
.zoomin-right.active{
  opacity: 1;
  transform: scale(1) translateX(0);
  transition: opacity 2350ms cubic-bezier(0.25, 0.46, 0.45, 0.94),transform 3000ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-delay: 1s;
}
.zoomin-fade{
  opacity: 0;
  transform: scale(1.2);
}
.zoomin-fade.active{
  opacity: 1;
  transform: scale(1);
  transition: opacity 2350ms cubic-bezier(0.25, 0.46, 0.45, 0.94),transform 3000ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-delay: 1s;
}
.zoomin{
  opacity: 0;
}
.zoomin.active{
  animation: zoom;
  animation-duration: 1.4s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.6s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes zoom{
  0%{
    opacity: 0;
    filter: blur(6px);
  }
  100%{
    opacity: 1;
    filter: blur(0);
  }
}

.header-slideup{
  animation: slideup;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 1.4s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  transition: ease-out;
  opacity: 0;
}
@keyframes slideup{
  0% {
    opacity: 0;
    transform: translate(0, 30px) rotate(4deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
}
.slideright{
  animation: slideright;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-delay: 0.6s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  transition: ease-out;
  opacity: 0;
}
@keyframes slideright{
  0% {
    opacity: 0;
    transform: translate(80px, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
.slideleft{
  opacity: 0;
}
.slideleft.active{
  animation: slideleft;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0.6s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  transition: ease-out;
}
@keyframes slideleft{
  0% {
    opacity: 0;
    transform: translate(-80px, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
/* header */
#header{
  position: relative;
  width: 100%;
  overflow: hidden;
}
#header .title-area{
  display: flex;
  justify-content: center;
}
#header .line{
  position: absolute;
  top: 29%;
  left: 43.4%;
  width: 27.2%;
  animation-delay: 1s;
}
#header .title01{
  position: absolute;
  top: 26%;
  left: 44%;
  width: 25.8%;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 1.2s;
}
#header .title02{
  position: absolute;
  top: 33%;
  left: 46.8%;
  width: 42.9%;
  animation-delay: 2.2s;
}
#header .title04{
  position: absolute;
  top: 68.5%;
  left: 52.1%;
  width: 4.6%;
  animation-duration: 0.4s;
  animation-delay: 2.9s;
}
#header .slash01{
  position: absolute;
  top: 68%;
  left: 57.7%;
  width: 0.55%;
  animation-duration: 0.4s;
  animation-delay: 3s;
}
#header .title05{
  position: absolute;
  top: 68%;
  left: 59.3%;
  width: 4%;
  animation-duration: 0.4s;
  animation-delay: 3.1s;
}
#header .slash02{
  position: absolute;
  top: 67.4%;
  left: 64.3%;
  width: 0.55%;
  animation-duration: 0.4s;
  animation-delay: 3.2s;
}
#header .title06{
  position: absolute;
  top: 66.8%;
  left: 65.9%;
  width: 10%;
  animation-duration: 0.4s;
  animation-delay: 3.3s;
}
#header .slash03{
  position: absolute;
  top: 66.4%;
  left: 76.8%;
  width: 0.55%;
  animation-duration: 0.4s;
  animation-delay: 3.4s;
}
#header .title07{
  position: absolute;
  top: 66.1%;
  left: 78.5%;
  width: 5.23%;
  animation-duration: 0.4s;
  animation-delay: 3.5s;
}
#header .header-logo{
  position: absolute;
  top: 2%;
  right: 2%;
  width: 7%;
  z-index: 1;
}
#header .mask{
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
}
/* スクロール */
#header .scroll-box{
  position: absolute;
  right: 2%;
  bottom: 17%;
  display: block;
  width: 1%;
  margin: 0;
  padding: 0;
  animation-delay: 3s;
}
#header .scroll{
  position: relative;
  display: block;
  width: 76%;
  margin: 0;
  padding: 0;
}
#header .scroll::before {
  content: '';
  position: absolute;
  top: 0;
  left: -70%;
  transform: translateX(-50%);
  width: 2px;
  height: 160px;
  background: rgba(228,169,98, 0.2);
  z-index: 1;
}
#header .scroll::after {
  content: '';
  position: absolute;
  top: 0;
  left: -70%;
  transform: translateX(-50%);
  width: 2px;
  height: 160px;
  background: #e4a962;
  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%;
  }
}
/* リード */
#lead{
  margin: auto;
  padding: 6% 0 8% 0;
  text-align: center;
}
#lead .line{
  width: 7.6%;
  margin: 0 auto;
}
#lead .text{
  margin-top: 2%;
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 400;
  font-style: normal;
}
/* アイテム共通 */
.wrapper{
  overflow: hidden;
}
.item-box{
  position: relative;
  padding-bottom: 200px;
}
.number-box{
  justify-content: flex-start;
  align-items: center;
  margin: 0 auto 30px 17.5%;
}
.number{
  width: auto;
  height: 5vw;
  min-height: 44px;
  margin-right: 40px;
}
.name-box{
  flex-direction: column;
}
.name-en{
  font-family: "adobe-garamond-pro", serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(40px, 5vw, 77px);
  line-height: 1;
  letter-spacing: 0.1rem;
}
.name-ja{
  text-align: center;
  font-family: yu-gothic-pr6n, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(12px, 0.9vw, 18px);
  line-height: 1;
}
.item-box .wide-box{
  width: 48.4%;
}
.item-box .narrow-box{
  position: relative;
  width: 35.9%;
  margin-top: 140px;
  text-align: center;
  z-index: 2;
}
.item-box .title-box{
  margin-bottom: 100px;
}
.item-box .title{
  position: relative;
  display: inline-block;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.8;
}
.item-box .title::before,
.item-box .title::after{
  position: absolute;
  display: block;
  width: 1em;
  height: 1em;
  mix-blend-mode: multiply;
}
.item-box .title::before{
  top: -1em;
  left: -1.5em;
}
.item-box .title::after{
  bottom: 1em;
  right: -2em;
}
.item-box .item-line{
  width: 16.6%;
  margin: 44px auto;
}
.item-box .text{
  width: 77%;
  margin: 0 auto;
  text-align: justify;
  font-family: yu-gothic-pr6n, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.8;
}

/* item01 */
#item01 .back-color{
  position: absolute;
  top: 19%;
  left: -44%;
  display: block;
  width: 200%;
  height: 98vh;
  background-color: rgba(193,151,121,0.05);
  transform: rotate(-13deg);
  z-index: -1;
  animation-duration: 3s;
  animation-delay: 1.2s;
}
#item01 .title::before{
  content: url(../img/item-icon01-1.svg);
}
#item01 .title::after{
  content: url(../img/item-icon01-2.svg);
}
#item01 .name-en,
#item01 .name-ja,
#item01 .title{
  color: #c19779;
}
#item01 .narrow-box{
  margin-left: 2%;
}
#item01 .link-box{
  margin: 3% 0 0 auto;
}
#item01 .main .cart-btm .btn{
  background: #c19779;
  border: 1px solid #c19779;
}
/* item02 */
#item02 .back-color{
  position: absolute;
  top: 40%;
  left: -44%;
  display: block;
  width: 300%;
  height: 50rem;
  background-color: rgba(168,174,124,0.05);
  transform: rotate(13deg);
  z-index: -1;
  animation-duration: 3s;
  animation-delay: 2.6s;
}
#item02 .number-box{
  margin-left: 16%;
}
#item02 .name-en,
#item02 .name-ja,
#item02 .title{
  color: #a8ae7c;
}
#item02 .inner{
  flex-direction: row-reverse;
}
#item02 .inner .narrow-box{
  margin-right: 2%;
}
#item02 .title-box{
  margin-right: -10%;
}
#item02 .item-line{
  margin-right: 40%;
}
#item02 .text{
  width: 67%;
  margin-bottom: 160px;
}
#item02 .title {
  margin-left: 5%;
}
#item02 .title::before{
  content: url(../img/item-icon02-1.svg);
}
#item02 .title::after{
  content: url(../img/item-icon02-2.svg);
}
#item02 .link-box{
  margin: 6% auto 0 3%;
}
#item02 .main .cart-btm .btn{
  background: #a8ae7c;
  border: 1px solid #a8ae7c;
}
/* item03 */
#item03 .back-color{
  position: absolute;
  top: -16%;
  left: -44%;
  display: block;
  width: 300%;
  height: 50rem;
  background-color: rgba(193,151,121,0.05);
  transform: rotate(-13deg);
  z-index: -1;
  animation-duration: 3s;
  animation-delay: 2s;
}
#item03 .wide-box{
  margin-left: 10%;
}
#item03 .narrow-box{
  margin-left: -5%;
}
#item03 .number-box{
  flex-direction: column;
  align-items: flex-end;
}
#item03 .number{
  margin-bottom: 2em;
}
#item03 .number,
#item03 .name-box{
  margin-right: 14%;
}
#item03 .name-ja{
  text-align: right;
}
#item03 .title{
  margin-left: -21%;
}
#item03 .title::before{
  content: url(../img/item-icon03-1.svg);
}
#item03 .title::after{
  content: url(../img/item-icon03-2.svg);
}
#item03 .item-line{
  margin-left: 36%;
}
#item03 .name-en,
#item03 .name-ja,
#item03 .title{
  color: #e4a962;
}
#item03 .text{
  margin-bottom: 120px;
}
#item03 .link-box{
  margin: 8% 16% 0 auto
}
#item03 .main .cart-btm .btn{
  background: #e4a962;
  border: 1px solid #e4a962;
}
/* item04 */
#item04 .back-color{
  position: absolute;
  top: 39%;
  left: -44%;
  display: block;
  width: 300%;
  height: 50rem;
  background-color: rgba(98,114,152,0.05);
  transform: rotate(13deg);
  z-index: -1;
  animation-duration: 3s;
  animation-delay: 1.2s;
}
#item04 .title::before{
  content: url(../img/item-icon04-1.svg);
}
#item04 .title::after{
  content: url(../img/item-icon04-2.svg);
}
#item04 .name-en,
#item04 .name-ja,
#item04 .title{
  color: #627298;
}
#item04 .inner{
  flex-direction: row-reverse;
}
#item04 .inner .narrow-box{
  margin-right: 2%;
}
#item04 .title-box{
  margin-right: -10%;
}
#item04 .title{
  margin-left: -6%;
}
#item04 .item-line{
  margin-right: 35%;
}
#item04 .text{
  width: 67%;
  margin-right: 15%;
}
#item04 .link-box{
  margin: 6% auto 0 6%;
}
#item04 .main .cart-btm .btn{
  background: #627298;
  border: 1px solid #627298;
}

/* リンクボックス */
.link-box{
  width: 24.1875rem;
  margin: 0 auto;
}
.link-box .main{
  padding-bottom: calc(4% - 0.7rem);
  border-bottom: 1px solid #6e6e6e;
}
.link-box .other{
  padding-top: 4%;
}
.cart-btm{
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.3s ease-in-out;
  margin-bottom: 0.4em;
  color: #fff;
}
.accordion .cart-btm .btn{
  background: #fff;
  border: 1px solid #808080;
  color: #808080;
}
.cart-title{
  position: relative;
  width: 100%;
  font-size: clamp(14px,0.9vw,16px);
  line-height: 1.4;
  letter-spacing: 0.02rem;
  font-weight: 400;
  font-style: normal;
}
.cart-btm.size1 .cart-title{
  padding-top: 1.5em;
}
.cart-yen{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 30%;
  line-height: 1.4;
  font-size: clamp(14px, 0.9vw, 16px);
  letter-spacing: 0.06rem;
  font-weight: 400;
  font-style: normal;
  white-space: nowrap;
}
.cart-yen img{
  width: clamp(12px, 1vw, 16px);
  margin: 0 0.5rem 0 0;
}
.cart-yen span{
  margin: 0 0 -2px 3%;
  font-size: clamp(10px, 0.6vw, 15px);
}
.cart-btm .btn{
  margin: 0 0 0 1%;
  padding: 0.4em 1em;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(10px, 0.6vw, 15px);
  line-height: 1em;
}
.btn-arrow{
  position: relative;
  -webkit-transition: background-color 300ms ease-out;
  transition: background-color 300ms ease-out;
}
.btn-arrow span {
  display: inline-block;
  position: relative;
  letter-spacing: 0.02rem;
  -webkit-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  will-change: transform;
}
.btn-arrow img{
  position: absolute;
  width: 1.1em;
  right: 0px;
  right: 0rem;
  opacity: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  will-change: right, opacity;
}
.cart-btm:hover .btn-arrow span {
  -webkit-transform: translate3d(-.5rem, 0, 0);
  transform: translate3d(-.5rem, 0, 0);
}
.btn-arrow img{
  position: absolute;
  width: 1.1em;
  right: 0px;
  right: 0rem;
  opacity: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
  -webkit-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  will-change: right, opacity;
}
.btn-arrow img *{
  stroke-width: 5;
  -webkit-text-stroke-color: transparent;
}
.cart-btm:hover .btn-arrow img {
  opacity: 1;
  right: -1rem;
}
/* アコーディオン */
.accordion .toggle{
  display: none;
}
.accordion .option{
  margin-top: -1px;
}
.accordion .accordion-btn,
.accordion .text-area{
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all 0.3s;
}
.accordion .accordion-btn{
  position: relative;
  display: block;
  margin: 3% auto;
  padding-right: 2em;
  text-align: center;
  font-family: yu-gothic-pr6n, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(13px,0.8vw,18px);
  cursor:pointer;
  transition: all 0.6s;
}
.accordion .accordion-btn::before,
.accordion .accordion-btn::after{
  content: "";
  display: block;
  width: 3.5%;
  height: 1px;
  background: #303e5b;
  position: absolute;
  left: 76%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.6s;
}
.accordion .accordion-btn::before{
  transform: translate(-50%, -50%) rotate(90deg);
}
.accordion .text-area{
  margin-top: -1px;
  max-height: 0;
  overflow: hidden;
}
.accordion .text-area p,
.toggle:checked + .accordion-btn + .text-area{
  max-height: 500px;
  transition: all 1.5s;
}
.toggle:checked + .accordion-btn::before{
  transform: translate(-50%, -50%) rotate(0deg);
}

#footer{
  color: #000;
  letter-spacing: 0.3em;
  padding: 0 0 2% 0;
  position: relative;
  text-align: center;
}
#footer a{
  transition: 0.3s ease-in-out;
}
#footer a:hover img{
  opacity: 0.6;
  transition: 0.3s ease-in-out;
}
.footer_sns {
  display: inline-block;
  width: 2.5%;
  margin: auto;
}
.f-ow {
  width: 120px;
  margin: 25px auto 0 auto;
}
.copyright {
  font-family: "Helvetica",serif;
  font-size: 10px;
  letter-spacing: 0.02em;
  margin: 34px 0 0;
}

#pagetop{
  position: fixed;
  right: 30px;
  bottom: 20px;
  width: 35px;
  z-index: 99;
}

/* ナビ */
#sidenav {
  display: none;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4.5vw;
  max-width: 180px;
  margin-top: -0.8vw;
  z-index: 99;
}
#sidenav .flex-box {
  flex-direction: column;
}
#sidenav ul li {
  position: relative;
  width: 100%;
  margin: 0;
}
#sidenav ul li:not(:last-child) {
  margin-bottom: 0.5vw;
}
#sidenav ul li .photo{
  opacity: 1;
  transition: 0.6s ease-in-out;
}
#sidenav ul li a:hover .photo{
  opacity: 0.8;
}
#sidenav ul li .line {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 11.25%;
  opacity: 0;
  transition: 0.6s ease-in-out;
}
#sidenav ul li a:hover .line{
  opacity: 1;
}

@media screen and (max-width:767px){
  .pc{
    display: none;
  }
  .sp{
    display: block;
  }
  .flex-box{
    flex-direction: column;
  }
  /* アニメーション */
  .zoomin.active{
    animation-delay: 0.2s;
  }
  @keyframes header-zoom{
  0%{
    opacity: 0;
    filter: blur(6px);
    transform: scale(1.2);
    }
    100%{
      opacity: 1;
      filter: blur(0);
      transform: scale(1);
    }
  }
  /* header ヘッダー */
  #header{
    overflow: hidden;
  }
  #header .line{
    position: absolute;
    top: 67%;
    left: 5.4%;
    width: 55.2%;
    animation-delay: 1.4s;
  }
  #header .title01{
    position: absolute;
    top: 65.5%;
    left: 6.1%;
    width: 51.8%;
    animation-duration: 0.6s;
    animation-delay: 1.8s;
  }
  #header .title02{
    position: absolute;
    top: 70%;
    left: 7.8%;
    width: 86%;
    animation-delay: 2.6s;
  }
  #header .title04{
    position: absolute;
    top: 92.5%;
    left: 18.1%;
    width: 10.4%;
  }
  #header .title05{
    position: absolute;
    top: 92.1%;
    left: 34%;
    width: 8.9%;
  }
  #header .title06{
    position: absolute;
    top: 91.3%;
    left: 48.3%;
    width: 22%;
  }
  #header .title07{
    position: absolute;
    top: 91%;
    left: 76%;
    width: 11.3%;
  }
  #header .slash01{
    position: absolute;
    top: 92.2%;
    left: 30.3%;
    width: 1.25%;
  }
  #header .slash02{
    position: absolute;
    top: 91.6%;
    left: 45%;
    width: 1.25%;
  }
  #header .slash03{
    position: absolute;
    top: 91%;
    left: 72.4%;
    width: 1.25%;
  }
  #header .header-logo{
    top: 1.8%;
    right: 4.25%;
    width: 18%;
  }
  /* lead　リード */
  #lead{
   margin: 10% auto 16%;
   padding: 0;
  }
  #lead .line{
    width: 24%;
    margin-bottom: 6%;
  }
  #lead .text{
    width: 96%;
    margin: auto;
    text-align: center;
    font-size: 0.9rem;
  }
  /* トップナビ */
  .topnav{
    padding-bottom: 24%;
  }
  .topnav ul{
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8%;
    width: 80%;
    margin: auto;
  }
  .topnav ul li{
    position: relative;
    width: 34.3%;
    margin-bottom: 6%;
    overflow: hidden;
  }
  .topnav ul li:nth-child(1){
    animation-delay: 0.2s;
  }
  .topnav ul li:nth-child(2){
    animation-delay: 0.4s;
  }
  .topnav ul li:nth-child(3){
    margin-left: 22.7%;
    animation-delay: 0.2s;
  }
  .topnav ul li:nth-child(4){
    animation-delay: 0.4s;
  }
  .topnav ul li .photo{
    opacity: 1;
    transition: 0.6s ease-in-out;
  }
  .topnav ul li a:hover .photo{
    opacity: 0.8;
  }
  .topnav ul li .line {
    position: absolute;
    bottom: -3%;
    right: 0;
    width: 11.8%;
    opacity: 0;
    transition: 0.6s ease-in-out;
  }
  .topnav ul li a:hover .line{
    opacity: 1;
  }
  /* item box 共通 */
  .item-box{
    padding-bottom: 16%;
  }
  .item-box:nth-child(even) .inner{
    flex-direction: column-reverse;
  }

  .item-box .wide-box,
  .item-box .narrow-box,
  .item-box:nth-child(even) .narrow-box,
  .item-box:nth-child(odd) .narrow-box,
  #item03 .narrow-box{
    width: 100%;
    margin: 0 auto;
  }
  .item-box .name-box{
    margin-bottom: -0.25em;
  }
  .item-box .title-box,
  #item02 .title-box,
  #item04 .title-box{
    margin-bottom: 0;
    margin-right: auto;
  }
  .item-box .title::before{
    left: -1em;
  }
  .item-box .title::after {
    right: -1.5em;
  }
  .item-box:nth-child(even) .title{
    margin: 0 auto;
  }
  .item-box .item-line,
  #item02 .item-line,
  #item03 .item-line{
    width: 24%;
    margin: 6% auto 8%;
  }
  .item-box .text,
  #item02 .text,
  #item04 .text,
  #item03 .text{
    width: 78.7%;
    margin: 0 auto 10%;
  }
  .item-box .photo01{
    margin-bottom: 10%;
  }
  .item-box .photo02{
    width: 86%;
    margin: 0 auto;
  }
  /* item01 */
  #item01 .back-color{
    top: 1%;
  }
  #item01 .number-box{
    align-items: flex-end;
    flex-direction: row;
    margin: 0 auto 6% 10%;
  }
  #item01 .number{
    margin-right: 6%;
  }
  #item01 .narrow-box{
    margin-left: auto;
  }
  /* item02 */
  #item02 .back-color{
    top: 8%;
    animation-delay: 1.2s;
  }
  #item02 .number-box{
    align-items: flex-start;
    margin: 0 auto 6% 4%;
  }
  #item02 .name-box{
    margin-top: 6%;
    margin-left: 6%;
  }
  #item02 .name-en{
    line-height: 0.8;
  }
  #item02 .inner{
    flex-direction: column-reverse;
  }
  #item02 .title{
    margin: auto;
  }
  /* item03 */
  #item03 .back-color{
    top: -2%;
    animation-delay: 1.2s;
  }
  #item03 .wide-box{
    margin-left: auto;
  }
  #item03 .number-box{
    margin: 0 auto 6%;
  }
  #item03 .number, #item03 .name-box{
    margin-right: 6%;
  }
  #item03 .title{
    margin: auto;
  }
  /* item04 */
  #item04 .back-color{
    top: 5%;
  }
  #item04 .number-box{
    flex-direction: row;
    margin-left: 6%;
  }
  #item04 .inner{
    flex-direction: column-reverse;
  }
  #item04 .title{
    margin-left: auto;
  }

  /* リンクボックス */
  .link-box{
    width: 88% !important;
    margin: 6% auto 0 !important;
  }
  .link-box .main{
    padding-bottom: 2%;
  }
  .link-box .mix{
    padding-top: 5%;
  }
  .link-box .cart-btm{
    margin-bottom: 3%;
    border-bottom: 1px solid rgba(0,0,0,0);
  }
  .cart-title{
    font-size: 0.9rem;
    line-height: 1.2;
    letter-spacing: 0.06rem;
  }
  .cart-yen{
    font-size: 0.95rem;
    line-height: 1.2;
    letter-spacing: 0.04rem;
  }
  .cart-yen img{
    width: 0.95rem;
    margin: 0 0.3rem 0 0;
  }
  .cart-yen.price img {
    margin-right: 0.81rem
  }
  .cart-yen span{
    font-size: 0.7rem;
    margin: 2px;
  }
  .cart-btm .btn{
    margin-left: 1%;
    padding: 1.2% 1%;
    font-size: 0.5rem;
  }
  /* アコーディオン */
  .accordion .accordion-btn::before,
  .accordion .accordion-btn::after{
    width: 4%;
    height: 1px;
    top: 48%;
    left: 80%;
  }
  /* フッター */
  .end-box{
    margin-bottom: 12%;
  }
  .end-box .txt{
    font-size: 0.75rem;
  }
  #footer{
    padding-bottom: 18%;
  }
  .footer_sns {
    width: 8%;
  }
  .f-ow {
    width: 120px;
    margin: 25px auto 0 auto;
  }
  .footer_copyright{
    font-size: 10px;
    letter-spacing: 0.02em;
    margin: 5% 0 0 0;
  }
  #footnav{
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    z-index: 99;
  }


}