*,*::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,h1,h2,h3,h4{
  font-family: "YuMincho", 'Yu Mincho', serif;
  color: #000;
  text-decoration: none;
  font-size: 15px;
  line-height: 2.2;
}
body{
  position: relative;
  -webkit-overflow-scrolling: touch;
}
ul{
  padding: 0;
  margin: 0 auto;
}
li{
  list-style: none;
}
img{
  width: 100%;
}

.pc{
  display: block;
}
.sp{
  display: none;
}

.fade-in-bottom{
   opacity: 0;
   animation-name: fadein-bottom;
   animation-duration: 0.8s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
   animation-delay: 2s;
}
@keyframes fadein-bottom {
   0% {
      opacity: 0;
      transform: translateY(60px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

.fade-in-down{
  opacity: 0;
  animation-name: fadein-down;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: .4s;
}
@keyframes fadein-down{
   0% {
      opacity: 0;
      transform: translateY(-100px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}
.fade-in-left{
  opacity: 0;
  animation-name: fade-in-left;
  animation-duration: 1.8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: 0.6s;
}
header .photo3.fade-in-left{
  animation-duration: 2s;
  animation-delay: 0.8s;
}
@keyframes fade-in-left{
   0% {
      opacity: 0;
      transform: translateX(-100px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}
.fade-in-right{
  opacity: 0;
  animation-name: fade-in-right;
  animation-duration: 1.2s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: 1.2s;
}
@keyframes fade-in-right{
   0% {
      opacity: 0;
      transform: translateX(100px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

/* カラースライド */
header .sec-image {
  position: relative;
}
header .sec-image img {
  opacity: 0;
  -webkit-transition: opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
header .sec-image:before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(114, 186, 185, 0.3);
  opacity: 0.5;
  right: 0;
  top: 0;
  -webkit-transition: width 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: width 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 10;
}
header .sec-image img {
  opacity: 1;
}
header .sec-image.action:before {
  width: 0;
}
header .photo1-sp .sec-image:before{
  background: #d8e3f7;
  mix-blend-mode: multiply;
}
header .photo2-sp .sec-image:before{
  background: #f2e8d8;
  mix-blend-mode: multiply;
}
header .photo3-sp .sec-image:before{
  background: #d9efec;
  mix-blend-mode: multiply;
}
header .photo4-sp .sec-image:before{
  background: #d9efec;
  mix-blend-mode: multiply;
}
header .photo5-sp .sec-image:before{
  background: #f9e0db;
  mix-blend-mode: multiply;
}
header .photo6-sp .sec-image:before{
  background: #d8e3f7;
  mix-blend-mode: multiply;
}









.sec .sec-image {
  position: relative;
}
.sec .sec-image img {
  opacity: 0;
  -webkit-transition: opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.sec .sec-image:before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(114, 186, 185, 0.3);
  opacity: 0.5;
  right: 0;
  top: 0;
  -webkit-transition: width 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: width 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 10;
}
.sec .sec-image.action img {
  opacity: 1;
}
.sec .sec-image.action:before {
  width: 0;
}
.sec .js-slider2 {
  position: relative;
  opacity: 0;
  -webkit-transition: opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.sec .js-slider2:before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #b56b64;
  opacity: 0.5;
  right: 0;
  top: 0;
  -webkit-transition: width 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: width 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 10;
}
.sec .js-slider2.action {
  opacity: 1;
}
.sec .js-slider2.action:before {
  width: 0;
}
/* wrapアニメーション */
.line-ani-top{
	opacity : 0;
	overflow: hidden;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	-webkit-transform: translateY(-30%); /* Safari用 */
	transform: translateY(-30%);
	z-index: -1;
	overflow: hidden;
}
.line-ani-top.active{
	animation: fadeline01 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
	animation-delay: 1s;
}
@keyframes fadeline01{
  0% {
	opacity: 1;
	transform: translate(-100%, 0);
  }
  100% {
	opacity: 1;
	transform: translate(0, 0);
  }
}
.line-ani-top2{
	opacity : 0;
	overflow: hidden;
	width: 100%;
	position: absolute;
	-webkit-transform: translateY(-30%); /* Safari用 */
	transform: translateY(-30%);
	z-index: -1;
	overflow: hidden;
}
.line-ani-top2.active{
	animation: fadeline02 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
	animation-delay: 0;
}
@keyframes fadeline02{
  0% {
	opacity: 1;
	transform: translate(100%, 0);
  }
  100% {
	opacity: 1;
	transform: translate(90%, 0);
  }
}
.item-wrap{
  position: relative;
	width: 100%;
	margin: 0 0 7% 0;
  overflow: hidden;
}

/* 矢印アニメーション */
.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_arrows {
	position: relative;
	display: flex;
	height: 300px;
	margin: -8em auto;
	justify-content: center;
	align-items: center;
  transform: scale(0.4);
}
.cp_arrows .cp_arrow {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	-webkit-transform-origin: 50% 50%;
	        transform-origin: 50% 50%;
	opacity: 0;
}
.cp_arrows .cp_arrowfirst {
	-webkit-animation: arrow-move08 2s ease-in-out infinite;
	        animation: arrow-move08 2s ease-in-out infinite;
}
.cp_arrows .cp_arrowsecond {
	-webkit-animation: arrow-move08 2s 1s ease-in-out infinite;
	        animation: arrow-move08 2s 1s ease-in-out infinite;
}
.cp_arrows .cp_arrowlast {
	-webkit-animation: arrow-move08 2s 2s ease-in-out infinite;
	        animation: arrow-move08 2s 2s ease-in-out infinite;
}
.cp_arrows .cp_arrow:before, .cp_arrows .cp_arrow:after {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 30px;
	height: 3px;
	content: '';
	background: #72c4b9;
}
.cp_arrows .cp_arrow:before {
	-webkit-transform: rotate(30deg) translateX(-39%);
	        transform: rotate(30deg) translateX(-39%);
	-webkit-transform-origin: top left;
	        transform-origin: top left;
}
.cp_arrows .cp_arrow:after {
	-webkit-transform: rotate(-30deg) translateX(39%);
	        transform: rotate(-30deg) translateX(39%);
	-webkit-transform-origin: top right;
	        transform-origin: top right;
}
@-webkit-keyframes arrow-move08 {
	0% {
		top: 40%;
		opacity: 0;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes arrow-move08 {
	0% {
		top: 40%;/
		opacity: 0;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/* マーカー */
.marker-animation.active{
  background-position: -100% 0;
}
.marker-animation {
  background-image: -webkit-linear-gradient(left, transparent 50%, rgba(114,196,185,0.25) 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, rgba(114,196,185,0.25) 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, rgba(114,196,185,0.25) 50%);
  background-image: -o-linear-gradient(left, transparent 50%, rgba(114,196,185,0.25) 50%);
  background-image: linear-gradient(left, transparent 50%, rgba(114,196,185,0.25) 50%);
  background-repeat: repeat-x;
  background-size: 200% 200%;
  background-position: 0 .5em;
  transition: all 2s ease;
}

/* アコーディオン  */
.acd-check{
    display: none;
}
.acd-label{
  position: relative;
  display: block;
  color: #000;
  border-bottom: 1px solid #000;
  line-height: 1rem;
  padding: 3%;
}
.acd-label:after{
  content: '+';
  font-size: 27px;
  position: absolute;
  right: 5%;
  color: #909090;
  bottom: 30%;
}
.acd-content{
  display: block;
  height: 0;
  opacity: 0;
  transition: .5s;
  visibility: hidden;
}
.acd-check:checked + .acd-label:after{
  content: "";
  display: block;
  width: 17px;
  height: 1px;
  background: #909090;
  top: 0.7em;
}
.acd-check:checked + .acd-label + .acd-content{
    height: 100%;
    padding-top: 10px;
    opacity: 1;
    visibility: visible;
}

header{
  position: relative;
  margin-bottom: 6%;
  background-image: url(../img/bgi.jpg);
  z-index: 0;
}
header .header_logo{
  position: absolute;
  top: 1vw;
  left: 2vw;
  width: 5%;
  z-index: 1;
}
header .header_title{
  position: absolute;
  width: 53%;
  bottom: 8.5%;
  left: 40.5%;
  transform: translateX(-40%);
  -webkit-transform: translateX(-40%);
  -ms-transform: translateX(-40%);
  z-index: 4;
}
header .icon{
  width: 86%;
  margin: 5% auto 6% 6%;
}
header ul{
  display: flex;
}
header ul li{
  position: relative;
  padding-bottom: 2%;
}

header ul li:not(:last-child){
  margin-right: 1%;
}
header .photo1{
  width: 104.590163934%;
}
header .photo1::after{
  content: "";
  display: inline-block;
  width: 86%;
  height: 50%;
  background: #d9efec;
  position: absolute;
  bottom: 0;
  z-index: -1;
  mix-blend-mode: multiply;
  opacity: 0.6;
}
header .photo2{
  width: 100%;
}
header .photo2 img{
  position: relative;
  padding-top: 45%;
  z-index: 3;
}
header .photo2::after{
  content: "";
  display: inline-block;
  width: 86%;
  height: 50%;
  background: #f9e0db;
  position: absolute;
  top: 9%;
  left: -7%;
  z-index: 2;
  mix-blend-mode: multiply;
  opacity: 0.6;
}
header .photo3{
  width: 100%;
}
header .photo3 img{
 position: relative;
 z-index: 3;
}
header .photo3::after{
  content: "";
  display: inline-block;
  width: 86%;
  height: 52%;
  background: #d8e3f7;
  position: absolute;
  top: 15%;
  right: -18%;
  z-index: 2;
  mix-blend-mode: multiply;
  opacity: 0.6;
}
header .icon_area{
  width: 101.639344262%
}
header .icon_area ul{
  flex-flow: column;
}
header .photo4{
  position: relative;
  z-index: -1
}
header .photo4::after{
  content: "";
  display: inline-block;
  width: 110%;
  height: 21%;
  background: #f2e8d8;
  position: absolute;
  bottom: -4%;
  left: -32%;
  z-index: -1;
  mix-blend-mode: multiply;
  opacity: 0.6;
}

.lead{
  position: relative;
  width: 70%;
  margin: 5% auto 8%;
  padding-top: 7.5%;
  text-align: center;
}
.lead img{
  position: absolute;
  top: 0;
  left: 8%;
  width: 24%;
  margin: 0 auto 3%;
}
.lead .lead_text{
  text-align: center;
  font-size: 16px;
  font-family: "YuMincho", 'Yu Mincho', serif;
  letter-spacing: 0.1rem;
}

.nav_wrapper{
  position: relative;
  overflow: hidden;
}
.nav_wrapper .nav_bgi{
  position: absolute;
  width: 44%;
  z-index: -1;
  visibility: hidden;
  opacity: 0;
}
.nav_wrapper #nav01_bgi{
  top: -5.5%;
  left: 0;
}
.nav_wrapper #nav02_bgi{
  top: -12%;
  right: 0;
}
.nav_wrapper #nav03_bgi{
  bottom: -0.5%;
  left: 0;
}
.nav_wrapper #nav04_bgi{
  bottom: 6%;
  right: 0;
}
.nav{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  width: 50%;
  margin: 0 auto 3%;
}
.nav div{
  display: block;
  width: 46%;
  margin-bottom: 12%;
}
.nav div a{
  display: block;
  width: 100%;
  height: 100%;
}
.nav_bgi{
  transition: 0.8s;
}
.nav div a:hover + .nav_bgileft{
  visibility: visible;
  animation-name: slideleft;
  opacity: 1;
  transition: 0.8s;
  animation-duration: 1s;
  animation-delay: -0.2s;
  opacity: 1;
}
@keyframes slideleft{
   0% {
      opacity: 0;
      transform: translateX(-50%);
   }
   100% {
      opacity: 1;
      transform: translateX(0);
   }
}
.nav div a:hover + .nav_bgiright{
  visibility: visible;
  animation-name: slidelright;
  opacity: 1;
  transition: 0.8s;
  animation-duration: 1s;
  animation-delay: -0.2s;
  opacity: 1;
}
@keyframes slidelright{
   0% {
      opacity: 0;
      transform: translate(100%, 0);
   }
   100% {
      opacity: 1;
      transform: translateX(100%, 0);
   }
}


.link-box .main{
  padding-bottom: 3%;
  border-bottom: 1px solid #000;
}
.link-box .mix{
  padding-top: 3%;
}
.link-box p{
  text-align: left;
  line-height: 2;
}
.cart-btm{
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.3s ease-in-out;
}
.cart-title{
  width: 100%;
  position: relative;
  letter-spacing: 0.1rem;
}
.cart-yen{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 80%;
  font-size: 15px;
  letter-spacing: 0.06rem;
  font-family: "YuMincho", 'Yu Mincho', serif;
  white-space: nowrap;
}
.cart-yen img{
  width: 17px;
  margin: 0 0.5rem 2px 0;
}
.cart-yen.price img{
  margin-right: 1.03rem;
}
.cart-yen span{
  font-size: 9px;
  margin: 0 0 0 5px;
}
.cart-btm .btn{
  font-size: 12px;
  line-height: 1em;
  padding: 1.2% 4% 1.3%;
  margin: 0 0 0 10px;
  font-family: "Arial", "メイリオ", Arial, sans-serif;
}
.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;
  color: #fff;
  font-size: 10px;
  font-family: "Arial",sans-serif;
  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;
  stroke-color: transparent;
}
.cart-btm:hover .btn-arrow img {
  opacity: 1;
  right: -1rem;
}
.cart-btm:hover .btn{
  background: #e3e3e2;
}
.link-line{
  margin: 3% 0;
}

.item_box{
  position: relative;
  margin-bottom: 6rem;
}
.item_box .box_inner{
  width: 80%;
  margin: auto;
  text-align: center;
}
.item_box .item_title{
  margin: auto;
  display: block;
  text-align: center;
}
.item_box .item_title img{
  width: auto;
  height: 9.75rem;
  margin: 0 auto 4%;
}
.item_box ul{
  display: flex;
  align-items: center;
}
.item_box ul .photo{
  width: 50%;
}
.item_box ul .text_box{
  width: 45%;
}
.item_box ul .text_box .inner{
  width: 78%;
  margin: auto;
}
.item_box .text_box .inner .text{
  margin-bottom: 20%;
  text-align: justify;
}

.column2 {
  display: flex;
  width: 75%;
  margin: auto;
}

.column2 .item_box .box_inner{
  width: 93%;
}
.column2 .item_box ul{
  flex-direction: column;
}
.column2 .item_box ul .photo{
  width: 100%;
  margin: 0 auto 6%;
}
.column2 .item_box ul .text_box{
  width: 80%;
  margin: auto;
}
.column2 .item_box ul .text_box .inner{
  width: 100%;
}
.column2_fade{
  width: 50%;
}

.detail_area .text{
  font-family: "游ゴシック体", YuGothic, "Yu Gothic", sans-serif;
}



#item1{
  position: relative;
  width: 80%;
  margin: 0 auto 4%;
  padding-top: 3%;
  overflow: hidden;
}
#item1 .detail_area{
  width: 80%;
  margin: 0 auto;
  padding-bottom: 1%;
  border-bottom: 1.5px solid #72c4b9;
}
#item1 .title{
  width: 72%;
  margin: auto;
}
#item1 .detail_area .point{
  display: flex;
  width: 92%;
  margin: 1% auto;
}
#item1 .detail_area .point img{
  width: 8%;
  margin-right: 0.5em;
}
#item1 .detail_area .point2 img{
  width: 8.3%;
}

#item-wrap1 .line-ani-top{
  display: block;
  width: 27%;
  height: 43%;
  background: rgba(217,239,236,0.8);
  mix-blend-mode: multiply;
  z-index: 1;
}
#item-wrap1 .line-ani-top2{
  display: inline-block;
  width: 123%;
  background: rgba(217,239,236,0.8);
  mix-blend-mode: multiply;
  position: absolute;
  bottom: 0%;
  z-index: 1;
  padding-bottom: 11%;
  right: 0;
}
#item-wrap1 .textarea{
  position: absolute;
  top: 25%;
  left: 15.75%;
  z-index: 1;
}
#item-wrap1 .title{
  font-size: 2.4em;
  line-height: 1.4;
  margin-bottom: 4%;
}
#item-wrap1 .text{
  margin-bottom: 12%;
  font-size: 16px;
  font-family: a-otf-ryumin-pr6n, serif;
  font-weight: 300;
  font-style: normal;
}
#item-wrap1 .link-box{
  width: 66%;
  margin: 0 auto 0 0;
}
#item-wrap1 .cart-btm .btn{
  background: #bcdcd6;
}
#item-wrap1 .cart-btm .btn span{
  color: #000;
}
#item-wrap1 .main{
  border: none;
}


#sec01 .cart-btm .btn{
  background: #808080;
}

#item1-1 .title{
  width: 74%;
  margin: 0 auto 26% 0;
}
#item1-1 ul .photo{
  width: 54%;
  margin-left: 5%;
}

#item1-2.item_box ul .text_box .inner{
  margin: 0 3% 0 auto;
}
#item1-2 .title{
  width: 74%;
  margin: 0 auto 26% 0;
}
#item1-2 ul .photo{
  width: 54%;
  margin-left: 5%;
}

#item1-3{
  margin-bottom: 10rem;
}
#item1-3 .title{
  width: 72%;
  margin: 0 auto 26% 0;
}
#item1-3 ul .photo{
  width: 54%;
  margin-left: 5%;
}

#item1-4 .title{
  width: 70%;
  margin: 0 auto 10% 0;
}

#item1-5 .title{
  width: 70%;
  margin: 0 auto 10% 0;
}

#item2{
  position: relative;
  width: 80%;
  margin: 0 auto 4%;
  padding-top: 3%;
  overflow: hidden;
}
#item2 .detail_area{
  width: 80%;
  margin: 0 auto;
  padding-bottom: 1%;
  border-bottom: 1.5px solid #72c4b9;
}
#item2 .title{
  width: 43%;
  margin: auto;
}
#item2 .detail_area .point{
  display: flex;
  width: 92%;
  margin: 1% auto;
}
#item2 .detail_area .point img{
  width: 8%;
  margin-right: 0.5em
}
#item1 .detail_area .point2 img{
  width: 8.3%;
}


#item-wrap2 .line-ani-top2{
  display: inline-block;
  width: 290%;
  background: rgba(217,239,236,0.8);
  mix-blend-mode: multiply;
  position: absolute;
  top: 0%;
  right: 0;
  z-index: 1;
  padding-bottom: 27%;
}
#item-wrap2 .textarea{
  position: absolute;
  top: 25%;
  right: 19.75%;
  z-index: 1;
}
#item-wrap2 .title{
  font-size: 2.4em;
  line-height: 1.4;
  margin-bottom: 4%;
}
#item-wrap2 .text{
  margin-bottom: 18%;
  font-size: 16px;
  font-family: a-otf-ryumin-pr6n, serif;
  font-weight: 300;
  font-style: normal;
}
#item-wrap2 .link-box{
  margin: 0 auto 0 0;
}
#item-wrap2 .cart-btm .btn{
  background: #bcdcd6;
}
#item-wrap2 .cart-btm .btn span{
  color: #000;
}
#item-wrap2 .main{
  border: none;
}


#sec02 .cart-btm .btn{
  background: #808080;
}

#item2-1 .title{
  width: 70%;
  margin: 0 auto 26% 0;
}
#item2-1 ul .photo{
  width: 54%;
  margin-left: 5%;
}
#item2-2.item_box ul .text_box .inner{
  margin: 0 3% 0 auto;
}
#item2-2 .title{
  width: 61%;
  margin: 0 auto 26% 0;
}
#item2-2 ul .photo{
  width: 54%;
  margin-left: 5%;
}

#item2-3{
  margin-bottom: 10rem;
}
#item2-3 .title{
  width: 68%;
  margin: 0 auto 26% 0;
}
#item2-3 ul .photo{
  width: 54%;
  margin-left: 5%;
}

#item2-4 .title{
  width: 52%;
  margin: 0 auto 10% 0;
}

#item2-5 .title{
  width: 52%;
  margin: 0 auto 10% 0;
}


#item3{
  position: relative;
  width: 80%;
  margin: 0 auto 4%;
  padding-top: 3%;
  overflow: hidden;
}
#item3 .detail_area{
  width: 80%;
  margin: 0 auto;
  padding-bottom: 1%;
  border-bottom: 1.5px solid #9eb9eb;
}
#item3 .title{
  width: 85%;
  margin: auto;
}
#item3 .detail_area .point{
  display: flex;
  width: 94%;
  margin: 0 auto 0.8%;
}

#item3 .detail_area .point img{
  width: 8%;
  margin-right: 0.5em;
}
#item3 .detail_area .point2 img{
  width: 8.3%;
}
#item3 .marker-animation.active{
  background-position: -100% 0;
}
#item3 .marker-animation {
  background-image: -webkit-linear-gradient(left, transparent 50%, rgba(158,185,235,0.25) 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, rgba(158,185,235,0.25) 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, rgba(158,185,235,0.25) 50%);
  background-image: -o-linear-gradient(left, transparent 50%, rgba(158,185,235,0.25) 50%);
  background-image: linear-gradient(left, transparent 50%, rgba(158,185,235,0.25) 50%);
}
#item3 .cp_arrows .cp_arrow:before, #item3 .cp_arrows .cp_arrow:after{
  background: #9eb9eb;
}

#item-wrap3 .line-ani-top{
  display: block;
  width: 27%;
  height: 43%;
  background: rgba(216,227,247,0.8);
  mix-blend-mode: multiply;
  z-index: 1;
}
#item-wrap3 .line-ani-top2{
  display: inline-block;
  width: 123%;
  background: rgba(216,227,247,0.8);
  mix-blend-mode: multiply;
  position: absolute;
  bottom: 0%;
  z-index: 1;
  padding-bottom: 11%;
  right: 0;
}
#item-wrap3 .textarea{
  position: absolute;
  top: 17%;
  left: 15.75%;
  z-index: 1;
}
#item-wrap3 .title{
  font-size: 2.4em;
  line-height: 1.4;
  margin-bottom: 4%;
}
#item-wrap3 .text{
  margin-bottom: 12%;
  font-size: 16px;
  font-family: a-otf-ryumin-pr6n, serif;
  font-weight: 300;
  font-style: normal;
}
#item-wrap3 .link-box{
  width: 77%;
  margin: 0 auto 0 0;
}
#item-wrap3 .cart-btm .btn{
  background: #d0ddf5;
}
#item-wrap3 .cart-btm .btn span{
  color: #000;
}
#item-wrap3 .main{
  border: none;
}


#sec03 .cart-btm .btn{
  background: #808080;
}
#sec03 .sec-image:before{
  background-color: rgba(158, 185, 235, 0.3);
}
#sec03 .column2 .item_box ul .text_box{
  width: 100%;
}

#item3-1 .title{
  width: 82%;
  margin: 0 auto 26% 0;
}
#item3-1 ul .photo{
  width: 54%;
  margin-left: 5%;
}

#item3-2 .title{
  width: 80%;
  margin: 0 auto 10% 10%;
}
#item3-2 .link-box{
  width: 80%;
  margin: auto;
}

#item3-3 .title{
  width: 80%;
  margin: 0 auto 10% 10%;
}
#item3-3 .link-box{
  width: 80%;
  margin: auto;
}

#item4{
  position: relative;
  width: 80%;
  margin: 0 auto 4%;
  padding-top: 3%;
  overflow: hidden;
}
#item4 .detail_area{
  width: 80%;
  margin: 0 auto;
  padding-bottom: 1%;
  border-bottom: 1.5px solid #eea298;
}
#item4 .title{
  width: 79%;
  margin: auto;
}
#item4 .detail_area .point{
  display: flex;
  width: 96%;
  margin: 1% auto;
}
#item4 .detail_area .point img{
  width: 8%;
  margin-right: 0.5em;
}
#item4 .detail_area .point2 img{
  width: 8.3%;
}
#item4 .marker-animation.active{
  background-position: -100% 0;
}
#item4 .marker-animation {
  background-image: -webkit-linear-gradient(left, transparent 50%, rgba(238,162,152,0.25) 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, rgba(238,162,152,0.25) 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, rgba(238,162,152,0.25) 50%);
  background-image: -o-linear-gradient(left, transparent 50%, rgba(238,162,152,0.25) 50%);
  background-image: linear-gradient(left, transparent 50%, rgba(238,162,152,0.25) 50%);
}
#item4 .cp_arrows .cp_arrow:before, #item4 .cp_arrows .cp_arrow:after{
  background: #eea298;
}

#item-wrap4 .line-ani-top{
  display: block;
  width: 27%;
  height: 43%;
  background: rgba(249,224,219,0.8);
  mix-blend-mode: multiply;
  z-index: 1;
}
#item-wrap4 .textarea{
  position: absolute;
  top: 23%;
  left: 15.75%;
  z-index: 1;
}
#item-wrap4 .title{
  font-size: 2.4em;
  line-height: 1.4;
  margin-bottom: 4%;
}
#item-wrap4 .text{
  margin-bottom: 12%;
  font-size: 16px;
  font-family: a-otf-ryumin-pr6n, serif;
  font-weight: 300;
  font-style: normal;
}
#item-wrap4 .link-box{
  margin: 0 auto 0 0;
}
#item-wrap4 .cart-btm .btn{
  background: #f6d3cc;
}
#item-wrap4 .cart-btm .btn span{
  color: #000;
}
#item-wrap4 .main{
  border: none;
}

#sec04 .cart-btm .btn{
  background: #808080;
}
#sec04 .sec-image:before{
  background-color: rgba(238,162,152,0.8);
}

#item4-1 .title{
  width: 72%;
  margin: 0 auto 10% 0;
}

#item4-2 .title{
  width: 72%;
  margin: 0 auto 10% 0;
}
#item4-3 .title{
  width: 72%;
  margin: 0 auto 10% 0;
}
#item4-4 .title{
  width: 72%;
  margin: 0 auto 10% 0;
}
#item4-5 ul{
  display: flex;
  align-items: center;
  flex-direction: column;
}
#item4-5 ul .photo{
  margin-bottom: 3%;
}
#item4-5 .title{
  width: 72%;
  margin: 0 auto 10% 0;
}

#item5{
  position: relative;
  width: 80%;
  margin: 0 auto 4%;
  padding-top: 3%;
  overflow: hidden;
}
#item5 .detail_area{
  width: 80%;
  margin: 0 auto;
  padding-bottom: 1%;
  border-bottom: 1.5px solid #d6bb8c;
}
#item5 .title{
  width: 59%;
  margin: auto;
}
#item5 .detail_area .point{
  display: flex;
  width: 92%;
  margin: 1% auto;
}
#item5 .detail_area .point img{
  width: 8%;
  margin-right: 0.5em;
}
#item5 .detail_area .point2 img{
  width: 8.3%;
}
#item5 .marker-animation.active{
  background-position: -100% 0;
}
#item5 .marker-animation {
  background-image: -webkit-linear-gradient(left, transparent 50%, rgba(214,187,140,0.3) 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, rgba(214,187,140,0.3) 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, rgba(214,187,140,0.3) 50%);
  background-image: -o-linear-gradient(left, transparent 50%, rgba(214,187,140,0.3) 50%);
  background-image: linear-gradient(left, transparent 50%, rgba(214,187,140,0.3) 50%);
}
#item5 .cp_arrows .cp_arrow:before, #item5 .cp_arrows .cp_arrow:after{
  background: #d6bb8c;
}

#item-wrap5 .line-ani-top{
  display: block;
  top: auto;
  bottom: 0;
  width: 10%;
  height: 16%;
  background: rgba(242,232,216,0.8);
  mix-blend-mode: multiply;
  z-index: 1;
}
#item-wrap5 .line-ani-top2{
  display: inline-block;
  width: 271%;
  background: rgba(242,232,216,0.8);
  mix-blend-mode: multiply;
  position: absolute;
  top: 0%;
  z-index: 1;
  padding-bottom: 26%;
  right: 0;
}
#item-wrap5 .textarea{
  position: absolute;
  top: 14%;
  right: 15.75%;
  z-index: 1;
}
#item-wrap5 .title{
  font-size: 2.4em;
  line-height: 1.4;
  margin-bottom: 4%;
}
#item-wrap5 .text{
  margin-bottom: 12%;
  font-size: 16px;
  font-family: a-otf-ryumin-pr6n, serif;
  font-weight: 300;
  font-style: normal;
}
#item-wrap5 .link-box{
  margin: 0 auto 0 0;
}
#item-wrap5 .cart-btm .btn{
  background: #ebdbc2;
}
#item-wrap5 .cart-btm .btn span{
  color: #000;
}
#item-wrap5 .main{
  border: none;
}

#sec05 .cart-btm .btn{
  background: #808080;
}
#sec05 .sec-image:before{
  background-color: rgba(214,187,140,0.3);
}

#item5-1 .title{
  width: 54%;
  margin: 0 auto 26% 0;
}
#item5-1 ul .photo{
  width: 54%;
  margin-left: 5%;
}

#item5-2.item_box ul .text_box .inner{
  margin: 0 3% 0 auto;
}
#item5-2 .title{
  width: 70%;
  margin: 0 auto 26% 0;
}
#item5-2 ul .photo{
  width: 54%;
  margin-left: 5%;
}

#item5-3 .title{
  width: 80%;
  margin: 0 auto 10% 0;
}

#item5-4 .title{
  width: 80%;
  margin: 0 auto 10% 0;
}

/*banner-block*/
.banner-block{
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}
.c-btn01{
  width: 70%;
  margin: 0 auto 5% auto;
  border: 1px solid #ccc;
  display: block;
}
.c-btn01:hover{
  border: 1px solid #000;
}

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

#sidenav{
  position: fixed;
  right: 0;
  top: 8vh;
  width: 7vw;
  z-index: 99;
}

#sidenav img{
  margin-bottom: 10%;
  transition: 0.6s ease-in-out;
}
#sidenav img:hover{
  opacity: 0.8;
  transition: 0.6s ease-in-out;
}

.end-box{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 4% auto;
}
.end-box .txt{
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 2.5em;
  text-align: center;
  color: #595757;
  font-family: 'EB Garamond', serif;
}
.foot_banner{
  margin: 6% auto 10%;
}

.footer {
  color: #000;
  letter-spacing: 0.3em;
  padding: 0 0 2% 0;
  position: relative;
  text-align: center;
}
.footer .insta{
  display: block;
  width: 150px;
  margin: 0 auto 5% auto;
}
.footer_sns{
  margin: 26px 0 0;
}
.footer_snsNode {
  display: inline-block;
  margin: 0 10px;
  width: 30px;
}
.f-ow {
  width: 120px;
  margin: 25px auto 0 auto;
}
.footer_copyright {
  font-family: "Helvetica",serif;
  font-size: 10px;
  letter-spacing: 0.02em;
  margin: 34px 0 0;
}


.item_box .photo{
  overflow: hidden;
}
.main_imgBox {
  height: 100vh;
  overflow: hidden;
  position: relative;
}
#item3-3 .main_imgBox{
  height: 47vw;
}
.main_img {
  z-index:10;
  opacity: 0;
  width: 100%;
  height: 100vh;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 18s 0s infinite;
  animation: anime 18s 0s infinite;
  background-position:top;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
 }
 .main_img:nth-of-type(2) {
  -webkit-animation-delay: 9s;
  animation-delay: 9s;
}
@keyframes anime {
  0% {
        opacity: 0;
    }
    17% {
        opacity: 1;
    }
    34% {
        opacity: 1;
    }
    67% {
        opacity: 0;
        transform: scale(1.2) ;
        z-index:9;
    }
    100% { opacity: 0 }
}

.staff{text-align: center;
    letter-spacing: 0.08rem;
    margin-bottom: -5%;
    font-size: 17px;
  }

@media screen and (min-width:950px) and (max-width:1100px){
  body, a, p, h1, h2, h3, h4,.cart-yen{
    font-size: 14px;
  }
  .item_box .box_inner{
    width: 96%;
  }
  #item-wrap5 .textarea{
    top: 1%;
    right: 8.75%;
  }
}
@media screen and (min-width:767px) and (max-width:950px){
  body, a, p, h1, h2, h3, h4, .cart-yen{
    font-size: 0.85rem;
  }
  .cart-title{
    font-size: 0.8rem;
  }
  .cart-btm .btn{
    font-size: 0.7rem;
    margin-left: 0.3rem;
  }
  .item_box .box_inner{
    width: 100%;
  }
  .item_box ul .text_box .inner{
    width: 84%;
  }
  .item_box .item_title img{
    transform: scale(0.8);
  }
  #item1 .detail_area,#item2 .detail_area,#item3 .detail_area,#item4 .detail_area,#item5 .detail_area{
    width: 100%;
  }
  #item-wrap1 .title,#item-wrap2 .title,#item-wrap3 .title,#item-wrap4 .title,#item-wrap5 .title{
    font-size: 1.8rem;
  }
  #item-wrap1 .text,#item-wrap2 .text,#item-wrap3 .text,#item-wrap4 .text,#item-wrap5 .text{
    font-size: 0.9rem;
  }
  #item-wrap1 .textarea{
    top: 17%;
    left: 7.75%;
  }
  #item-wrap2 .textarea{
    top: 14%;
    right: 12.75%;
  }
  #item-wrap3 .textarea{
    left: 4.75%;
  }
  #item-wrap3 .link-box{
    width: 90%;
  }
  #item-wrap4 .textarea{
    top: 10%;
    left: 8.75%;
  }
  #item-wrap5 .textarea{
    top: 3%;
    right: 8.75%;
  }
}
@media screen and (max-width:766px){
  .pc{
    display: none;
  }
  .sp{
    display: block;
  }
  body, a, p, h1, h2, h3, h4, .cart-yen{
    font-size: 0.85rem;
  }

  header .icon{
    width: 64%;
    margin-top: -12%;
    position: relative;
    margin-left: 3%;
  }
  header .title{
    position: relative;
    width: 87%;
    margin: -25% auto 8%;
    z-index: 10;
  }
  header .header_logo{
    position: static;
    display: block;
    top: auto;
    left: auto;
    margin: 0 auto 6%;
    width: 20%;
  }
  header .header_logo img{
    margin-bottom: 6%;
  }
  header ul li{
    padding-bottom: 0;
  }
  header .swiper-slide{
    background-image: url(../img/bgi.jpg);
  }

  .lead{
    width: 88%;
    margin: 0 auto 18%;
    padding: 0;
  }
  .lead img{
    position: static;
    width: 60%;
    margin: 0 auto 2% 0;
  }
  .lead .lead_text{
    width: 100%;
    margin: auto;
    font-size: 0.85rem;
    line-height: 2.2;
  }

  .nav{
    width: 80%;
    gap: inherit;
  }
  .nav_wrapper .nav_bgi{
    visibility: inherit;
    opacity: 1;
  }
  .nav div{
    padding-top: 10%;
  }
  .nav_wrapper #nav01_bgi{
    top: 0.5%;
    left: -26%;
    width: 67%;
    padding-top: 1%;
  }
  .nav_wrapper #nav02_bgi{
    width: 67%;
    top: -4%;
    right: -26%;
  }
  .nav_wrapper #nav03_bgi{
    left: -26%;
    width: 67%;
    bottom: 8%;
  }
  .nav_wrapper #nav04_bgi{
    width: 67%;
    right: -26%;
    bottom: 13%;
  }

  .column2{
    flex-direction: column;
    width: 100%;
  }
  .column2 .item_box .box_inner{
    width: 100%;
  }
  .column2 .item_box ul .text_box{
    width: 88%;
  }

  .link-box{
    width: 100%;
    margin: auto;
  }
  .link-box .cart-btm{
    margin-bottom: 0;
  }
  .cart-title{
    font-size: 0.9rem;
    line-height: 1.2;
  }
  .cart-yen{
    font-size: 0.95rem;
    line-height: 1.2;
  }
  .cart-yen img{
    width: 1.05rem;
    margin: 0 0.5rem 0;
  }
  .cart-yen.price img {
    margin-right: 1.07rem;
  }
  .link-line{
    margin: 4% 0;
  }

  #item-wrap1 .text, #item-wrap2 .text, #item-wrap3 .text,#item-wrap4 .text, #item-wrap5 .text{
    font-size: 0.9rem;
    line-height: 1.8;
  }

  #item1,#item2,#item3,#item4,#item5{
    width: 100%;
  }
  #item1 .detail_area,#item2 .detail_area,#item3 .detail_area,#item4 .detail_area,#item5 .detail_area{
    width: 88%;
    margin: 0 auto 12%;
  }
  #item1 .detail_area .point,#item2 .detail_area .point,#item3 .detail_area .point,#item4 .detail_area .point,#item5 .detail_area .point{
    flex-direction: column;
    margin: 6% auto;
  }
  #item1 .detail_area .point img, #item2 .detail_area .point img,#item3 .detail_area .point img,#item4 .detail_area .point img,#item5 .detail_area .point img{
    width:27%;
  }
  #item1 .detail_area .point2 img,#item2 .detail_area .point2 img,#item3 .detail_area .point2 img,#item4 .detail_area .point2 img,#item5 .detail_area .point img{
    width: 27%;
  }
  #item-wrap1 .textarea, #item-wrap2 .textarea,#item-wrap3 .textarea,#item-wrap4 .textarea,#item-wrap5 .textarea{
    position: static;
    top: auto;
    left: auto;
    width: 88%;
    margin: 4% auto;
  }
  #item-wrap1 .link-box,#item-wrap2 .link-box,#item-wrap3 .link-box,#item-wrap4 .link-box,#item-wrap5 .link-box{
    width: 100%;
  }

  .item_box{
    margin-bottom: 12%;
  }
  .item_box .box_inner{
    width: 100%;
  }
  .item_box ul{
    flex-direction: column;
  }
  .item_box ul .text_box{
    width: 88%;
    margin: 6% auto;
  }
  .item_box ul .text_box .inner{
    width: 100%;
  }
  .item_box ul .photo{
    width: 100%;
  }

  #sec01, #sec02, #sec03, #sec04{
    margin-bottom: 10%;
  }

  #item1 .title{
    width: 80%;
  }
  .item1_icon{
    position: relative;
    width: 54%;
    margin: 0 auto -24% 5%;
    z-index: 10;
  }

  #item-wrap1 .title{
    position: absolute;
    top: 18%;
    left: 10%;
    font-size: 1.45rem;
    line-height: 1.6;
  }
  #item-wrap1 .line-ani-top{
    width: 33%;
    height: 21%;
  }
  #item-wrap1 .line-ani-top2{
    top: 17.6rem;
    bottom: auto;
    mix-blend-mode: inherit;
  }
  #item-wrap1 .item_icon{
    position: absolute;
    top: 3%;
    left: 3%;
    width: 27%;
    z-index: 10;
  }
  #item1-1 ul .photo{
    width: 100%;
    margin-left: 0;
  }
  #item1-1 .title{
    margin-bottom: 12%;
  }

  #item1-2.item_box ul{
    flex-direction: column-reverse;
  }
  #item1-2 ul .photo,#item1-3 ul .photo{
    width: 100%;
    margin: 0 auto;
  }
  #item1-2 .title,#item1-3 .title,#item1-5 .title{
    margin-bottom: 12%;
  }
  #item1-3{
    margin-bottom: 0;
  }

  #item2 .title{
    width: 72%;
  }
  .item2_icon{
    position: relative;
    width: 54%;
    margin: 0 2% -12% auto;
    z-index: 10;
  }
  #item-wrap2 .line-ani-top2 {
    width: 335%;
    padding-bottom: 34%;
  }
  #item-wrap2 .title{
    position: absolute;
    top: 16%;
    right: 10.5%;
    font-size: 1.45rem;
    line-height: 1.6;
  }
  #item-wrap2 .text{
    margin-bottom: 12%;
  }
  #item2-1 ul .photo{
    width: 100%;
    margin: auto;
  }
  #item2-1 .title{
    margin-bottom: 12%;
  }
  #item2-2 ul{
    flex-direction: column-reverse;
  }
  #item2-2 .title, #item2-3 .title{
    margin-bottom: 12%;
  }
  #item2-2 ul .photo, #item2-3 ul .photo{
    width: 100%;
    margin: auto;
  }
  #item2-3{
    margin-bottom: 12%;
  }
  #item2-4 .title{
    margin-bottom: 12%;
  }
  #item2-5 .title{
    margin-bottom: 12%;
  }
  .item3_icon{
    position: relative;
    width: 54%;
    margin: 0 auto -13% 5%;
    z-index: 10;
  }
  #item-wrap3 .line-ani-top{
    width: 33%;
    height: 19%;
  }
  #item-wrap3 .line-ani-top2{
    bottom: auto;
    top: 17.4rem;
  }
  #item-wrap3 .title{
    position: absolute;
    top: 16%;
    left: 9.5%;
    font-size: 1.45rem;
    line-height: 1.6;
  }
  #item3-1 ul .photo{
    width: 100%;
    margin: auto;
  }
  #item3-1 .title{
    margin-bottom: 12%;
  }
  #item3-2 .title,#item3-3 .title{
    width: 68%;
    margin: 0 auto 12% 6%;
  }
  #item3-2 .link-box, #item3-3 .link-box{
    width: 88%;
  }

  .item4_icon{
    position: relative;
    width: 54%;
    margin: 0 auto -13% 5%;
    z-index: 10;
  }
  #item-wrap4 .line-ani-top{
    width: 34%;
    height: 18%;
  }
  #item-wrap4 .title{
    position: absolute;
    top: 16%;
    left: 8.5%;
    font-size: 1.45rem;
    line-height: 1.6;
  }
  #item4-1 .title,#item4-2 .title,#item4-3 .title,#item4-4 .title,#item4-5 .title{
    margin-bottom: 12%;
  }


  #item5 .title{
    width: 64%;
  }
  .item5_icon{
    position: relative;
    width: 54%;
    margin: 0 5% -20% auto;
    z-index: 10;
  }
  #item-wrap5 .title{
    position: absolute;
    top: 15%;
    right: 9.5%;
    font-size: 1.45rem;
    line-height: 1.6;
  }
  #item-wrap5 .line-ani-top{
    bottom: auto;
    top: 19.2rem;
    height: 6%;
  }
  #item-wrap5 .line-ani-top2{
    width: 317%;
    padding-bottom: 35%;
  }
  #item5-1 ul .photo{
    width: 100%;
    margin: auto;
  }
  #item5-1 .title{
    width: 64%;
    margin-bottom: 12%;
  }
  #item5-2.item_box ul{
    flex-direction: column-reverse;
  }
  #item5-2 ul .photo{
    width: 100%;
    margin: auto;
  }
  #item5-2 .title{
    margin-bottom: 12%;
  }
  #sec05{
    margin-bottom: 18%;
  }

  .end-box{
    margin-bottom: 3rem;
  }

  #pagetop{
    position: fixed;
    right: 0;
    bottom: 7%;
    width: 10%;
    z-index: 99;
  }

  #footnav{
    display: flex;
    position: fixed;
    right:auto;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 99;
  }

  .foot_banner{
    width: 100%;
    margin: 8% auto 14%;
  }

  footer{
    margin-bottom: 18%;
  }
.main_img{height: 100% ;}
.link-box .mix{padding-top: 0;}
.main_imgBox,#item3-3 .main_imgBox{height: 31.5365rem;}
.column2_fade{ width: 100%;}

.staff {
    font-size: 13px;
    margin-top: 3%;
}
.main_img{
  animation:anime 12s 0s infinite;
}
.main_img:nth-of-type(2){
  animation-delay: 6s;
}
@keyframes anime {
  0% {
        opacity: 0;
    }
    17% {
        opacity: 1;
    }
    34% {
        opacity: 1;
    }
    97% {
        opacity: 0;
        transform: scale(1) ;
        z-index:9;
    }
    100% { opacity: 0 }
}
}