.KV_area {
    position: relative;
    margin: 0 auto;
    padding: 56% 0 0 0;
    width: 100%;
    height: 0;
    background: #fff;
}

.kv_main{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.kv_main[data-state="load"] .kv_main__list,
.kv_main[data-state="load"] .kv_main__mark,
.kv_main[data-state="load"] .kv_arrow{
    opacity: 0;
}
.kv_main[data-state="load"] .kv_load{
    position: fixed;
    opacity: 1;
    z-index: 10000;
}
.kv_main[data-state="load"] .kv_load_img{
    opacity: 1;
}

.kv_main[data-state="open"] .kv_main__list,
.kv_main[data-state="open"] .kv_main__mark,
.kv_main[data-state="open"] .kv_arrow{
    transition: all 800ms ease-out;
    opacity: 1;
}
.kv_main[data-state="open"] .kv_load{
    position: fixed;
    opacity: 1;
    z-index: 10000;
}
.kv_main[data-state="open"] .kv_load_img{
    opacity: 1;
}
.kv_main[data-state="open"] .kv_load_img img{
    opacity: 1;
    transform: translateY(0%);
}

.kv_main[data-state="start"] .kv_main__list,
.kv_main[data-state="start"] .kv_main__mark,
.kv_main[data-state="start"] .kv_arrow{
    opacity: 1;
}
.kv_main[data-state="start"] .kv_load{
    display: none;
    opacity: 0;
}
.kv_main[data-state="start"] .kv_load_img{
    opacity: 0;
    transform: translateY(0%);
}
.kv_main[data-state="start"] .kv_load_img img{
    opacity: 1;
    transform: translateY(0%);
}


.kv_load{
    display: none;
    opacity: 0;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: -10;
    transition: all 800ms ease-out;
}
.kv_load_img{
    display: inline-block;
    width: 12%;
    height: auto;
    transition: all 800ms ease-out;
    overflow: hidden;
}
.kv_load_img img{
    width: 100%;
    transition: all 300ms ease-out;
    transform: translateY(101%);
    opacity: 0;
}
.kv_load_border{
    position: absolute;
    padding: 14.2% 0 0;
    width: 100%;
    height: 0;
    border-bottom: 4px solid #000;
    transition: all 50ms ease-out;
    transform-origin: center bottom;
}


.kv_main__list{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 87.5%;
}
.kv_main__list li{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: all 600ms ease-out;
}
.kv_main__list li img{
    max-width: 100%;
}
.kv_main[data-select-id="1"] .kv_main__list li:nth-child(1),
.kv_main[data-select-id="2"] .kv_main__list li:nth-child(2),
.kv_main[data-select-id="3"] .kv_main__list li:nth-child(3),
.kv_main[data-select-id="4"] .kv_main__list li:nth-child(4),
.kv_main[data-select-id="5"] .kv_main__list li:nth-child(5),
.kv_main[data-select-id="6"] .kv_main__list li:nth-child(6),
.kv_main[data-select-id="7"] .kv_main__list li:nth-child(7),
.kv_main[data-select-id="8"] .kv_main__list li:nth-child(8),
.kv_main[data-select-id="9"] .kv_main__list li:nth-child(9),
.kv_main[data-select-id="10"] .kv_main__list li:nth-child(10),
.kv_main[data-select-id="11"] .kv_main__list li:nth-child(11),
.kv_main[data-select-id="12"] .kv_main__list li:nth-child(12),
.kv_main[data-select-id="13"] .kv_main__list li:nth-child(13),
.kv_main[data-select-id="14"] .kv_main__list li:nth-child(14),
.kv_main[data-select-id="15"] .kv_main__list li:nth-child(15),
.kv_main[data-select-id="16"] .kv_main__list li:nth-child(16),
.kv_main[data-select-id="17"] .kv_main__list li:nth-child(17),
.kv_main[data-select-id="18"] .kv_main__list li:nth-child(18){opacity: 1;}





.kv_main__mark{
    position: absolute;
    top: 87.5%;
    left: 0;
    padding: 1% 0 0;
    width: 100%;
    height:12.5%;
    font-size: 0;
    text-align: center;
}

.kv_main__mark li{
    display: inline-block;
    margin: 0 10px;
    width: 16px;
    height: 16px;
    border-radius: 10px;
    border: 1px solid #989898;
	
    /* background-color: red; */
    cursor: pointer;
    transition: all 300ms ease-out;
}
.kv_main__mark li:nth-child(9){margin-right: 40px;}
.kv_main__mark li:nth-child(10){margin-left: 40px;}

.kv_main__mark li:nth-child(1){background-color: #2F220D;}
.kv_main__mark li:nth-child(2){background-color: #00ccff;}
.kv_main__mark li:nth-child(3){background-color: #ff99cc;}
.kv_main__mark li:nth-child(4){background-color: #ff8400;}
.kv_main__mark li:nth-child(5){background-color: #26bc69;}
.kv_main__mark li:nth-child(6){background-color: #ffcc00;}
.kv_main__mark li:nth-child(7){background-color: #c8a5e9;}
.kv_main__mark li:nth-child(8){background-color: #d6ff43;}
.kv_main__mark li:nth-child(9){background-color: #adc7ca;}
.kv_main__mark li:nth-child(10){background-color: #ff4e00;}
.kv_main__mark li:nth-child(11){background-color: #ffffff;}
.kv_main__mark li:nth-child(12){background-color: #70007a;}
.kv_main__mark li:nth-child(13){background-color: #3e76d4;}
.kv_main__mark li:nth-child(14){background-color: #128c82;}
.kv_main__mark li:nth-child(15){background-color: #ffcec7;}
.kv_main__mark li:nth-child(16){background-color: #8ee3ce;}
.kv_main__mark li:nth-child(17){background-color: #ffffcc;}
.kv_main__mark li:nth-child(18){background-color: #2F220D;}

.kv_main[data-select-id="1"] .kv_main__mark li:nth-child(1),
.kv_main[data-select-id="2"] .kv_main__mark li:nth-child(2),
.kv_main[data-select-id="3"] .kv_main__mark li:nth-child(3),
.kv_main[data-select-id="4"] .kv_main__mark li:nth-child(4),
.kv_main[data-select-id="5"] .kv_main__mark li:nth-child(5),
.kv_main[data-select-id="6"] .kv_main__mark li:nth-child(6),
.kv_main[data-select-id="7"] .kv_main__mark li:nth-child(7),
.kv_main[data-select-id="8"] .kv_main__mark li:nth-child(8),
.kv_main[data-select-id="9"] .kv_main__mark li:nth-child(9),
.kv_main[data-select-id="10"] .kv_main__mark li:nth-child(10),
.kv_main[data-select-id="11"] .kv_main__mark li:nth-child(11),
.kv_main[data-select-id="12"] .kv_main__mark li:nth-child(12),
.kv_main[data-select-id="13"] .kv_main__mark li:nth-child(13),
.kv_main[data-select-id="14"] .kv_main__mark li:nth-child(14),
.kv_main[data-select-id="15"] .kv_main__mark li:nth-child(15),
.kv_main[data-select-id="16"] .kv_main__mark li:nth-child(16),
.kv_main[data-select-id="17"] .kv_main__mark li:nth-child(17),
.kv_main[data-select-id="18"] .kv_main__mark li:nth-child(18){
    transform: scale(1.2);
}

.product_area{

}
.kv_arrow{
    position: absolute;
    top: 87.5%;
    left: 50%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 0 0;
    width: 870px;
    height: 50px;
    font-size: 0;
    text-align: center;
    transform: translateX(-50%);
    pointer-events: none;
}
.btn_arrow_l,
.btn_arrow_r{
    pointer-events: auto;
}



.product_area{
    position: relative;
    min-width: 1200px;
}

.frame {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
            justify-content: space-between;
    width: 100%;
  }
  
  .frame__main {
    position: relative;
    padding: 41.4% 0 0 0;
    width: 54%;
    height: 0;
  }
  .frame__main li {
    position: absolute;
    top: 0;
    opacity: 0;
    -webkit-transition: opacity 300ms ease-out;
    transition: opacity 300ms ease-out;
  }
  .frame__main li img {
    max-width: 100%;
  }
  .frame__main[data-img="1"] li[data-id="1"] {
    opacity: 1;
  }
  .frame__main[data-img="1"] li[data-id="1"] {
    opacity: 1;
  }
  .frame__main[data-img="2"] li[data-id="2"] {
    opacity: 1;
  }
  .frame__main[data-img="3"] li[data-id="3"] {
    opacity: 1;
  }
  .frame__main[data-img="4"] li[data-id="4"] {
    opacity: 1;
  }
  .frame__main[data-img="5"] li[data-id="5"] {
    opacity: 1;
  }
  
  .thumb__list {
    width: 46%;
    font-size: 0;
    text-align: right;
  }
  .thumb__list li {
    position: relative;
    display: inline-block;
    right: 0;
    margin: 0 0 2% 62%;
    padding: 24.8% 0 0 0;
    width: 38%;
    height: 0;
    pointer-events: none;
  }
  .thumb__list li button {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 0;
    border: none;
    cursor: pointer;
    pointer-events: auto;
  }
  .thumb__list li button img {
    max-width: 100%;
    pointer-events: none;
  }
  .thumb__list li button:hover .svg_frame {
    stroke-dasharray: 1000 0;
  }
  .thumb__list li button img {
    max-width: 100%;
    -webkit-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
  }
  .thumb__list li button .svg_frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    fill: transparent;
    stroke: #b49969;
    stroke-width: 10px;
    stroke-dasharray: 0 1000;
    -webkit-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
    pointer-events: none;
  }
  .thumb__list li button .svg_frame rect {
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  

.product_main{
    position: absolute;
    top: 10%;
    left: 44%;
    padding: 0 0 2% 12%;
    width: 25%;
    border: 4px solid #2F220D;
    /* border-top: none; */
    z-index: -1;
}
.product_main h3{
    margin: -1.4vw 0 1em -5vw;

}
.product_main h3::before{
    content: none;
}
.product_main p{
    font-size: 1.6rem;
    line-height: 2.6;
}
.product_main ul{
    padding: 0 0 0 1vw;
    border-left: 6px solid #b49969;
    line-height: 2;
}
.product_main ul li{
    font-size: 1.4rem;
    color: #b49969;
}
.product_main p.product_main-caution{
    padding: 1rem 0 0;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: normal;
}


.product_sub{
    position: relative;
    margin: -30% auto 0;   
    width: 100%;
    max-width: 1200px;
    z-index: -2;
}
.product_sub div{
    position: relative;
    padding: 7.8% 3% 2% 3%;
    width: 70%;
    height: 100%;
    background-color: #f1f1f1;
    box-sizing: border-box;
}
.product_sub h3{  
    display: inline-block;
    margin: 0 0 1em;
    padding: 0 0 0 1em;
    font-size: 2.4rem;
    width: auto;
    letter-spacing: 0.4em;
    border-left: 6px solid #2F220D;
}
.product_sub h3::before{
    content: none;
}
.product_sub p{
    font-size: 1.6rem;
    line-height: 2.6;
}

/*追記-1*/
.product_main h3{
margin:-1.4vw 0 0 ;
}
.product_main h3 img{
background:#fff;
padding: 0 10px 0 10px
}

@media screen and (max-width: 767px) {
    body{
        height: auto;
        overflow-x: hidden;
    }
    .KV_area {
        padding: 172% 0 0 0;
    }
    .kv_load_img{
        width: 38%;
    }
    .kv_load_border{
        padding: 43.2% 0 0;
    }
	
    .kv_main__mark li{
        margin: 0 3vw 3vw;
        width: 2vw;
        height: 2vw;
        border-radius: 2vw;
    }
    .kv_main__mark li:nth-child(9){margin-right: 3vw;}
    .kv_main__mark li:nth-child(10){margin-left: 3vw;}

    .kv_main__list li img{
        max-width: initial;
        width: 100%;
    }

    .kv_arrow {
        transform: translateX(-50%);
        left: 0;
        padding: 0 0 0;
        width: 100%;
        height: 50px;
        transform: translateX(0);
    }


    .product_area{
        position: relative;
        min-width: 100%;
    }

    .frame {
      display: -webkit-box;
      display: flex;
      flex-wrap: wrap;
    }
  
    .frame__main {
      width: 100%;
      padding: 70% 0 0;
    }
  
    .thumb__list {
      width: 100%;
    }
    .thumb__list li {
      padding: 18% 0 0 0;
      width: 27%;
    }

    .product_main{
        top: 20%;
        left: 0px;
        padding: 0 0 2% 12%;
        width: 55%;
        z-index: 1;
        border-left: none;
    }
	
/*追記-2*/
 .product_area{
     display: flex;
	 flex-direction: column;
    }

.kv_main__mark{
width:90%;
padding:1% 5% 0;
}

 .product_area section:nth-child(2){
 height: auto;
 }

.product_main {width:60%;}
.product_main h3 img{
padding: 0 5%;
margin-left: -50px;
}
	.product_main p{
    font-size: 1.4rem;
    line-height: 2.6;
	letter-spacing: 0.5rem;
}

	.product_sub{
    position: relative;
    margin: 35% auto 0; 
	padding-top: 3em;

    width: 100%;
    max-width: 100%;
    z-index: -2;
}
.product_sub div{
    position: relative;
    padding: 10% 6% 10%;
    width: 100%;
	margin-top: 3em;
    
}
.product_sub h3{  
    display: inline-block;
    margin: 0 0 1em;
    padding: 0 0 0 1em;
    font-size: 2.4rem;
    width: auto;
    letter-spacing: 0.4em;
    border-left: 6px solid #2F220D;
}
.product_sub h3::before{
    content: none;
}
.product_sub p{
    font-size: 1.6rem;
    line-height: 2.6;
}

}

/*追記-320px用*/
@media screen and (max-width: 320px)  {
  
/*追記-2*/
 .product_area{
     display: flex;
	 flex-direction: column;
    }


.product_main {width:60%;}
.product_main h3 img{
padding: 0 5%;
margin-left: -50px;
}
	.product_main p{
    font-size: 1.4rem;
    line-height: 2.6;
	letter-spacing: 0.5rem;
}

	.product_sub{
    position: relative;
    margin: 100% auto 0; 
	padding-top: 5em;

    width: 100%;
    max-width: 100%;
    z-index: -2;
}
.product_sub div{
    position: relative;
    padding: 10% 6% 10%;
    width: 100%;
	margin-top: 3em;
    
}
.product_sub h3{  
    display: inline-block;
    margin: 0 0 1em;
    padding: 0 0 0 1em;
    font-size: 2.4rem;
    width: auto;
    letter-spacing: 0.4em;
    border-left: 6px solid #2F220D;
}



}
/*追記-tab用*/
@media screen and (min-width: 767px) and ( max-width:1024px) {
    body{
        height: auto;
        overflow-x: hidden;
    }
    .KV_area {
        padding: 172% 0 0 0;
    }
	
    .kv_main__mark li{
        margin: 0 3vw 3vw;
        width: 2vw;
        height: 2vw;
        border-radius: 2vw;
    }
    .kv_main__mark li:nth-child(9){margin-right: 3vw;}
    .kv_main__mark li:nth-child(10){margin-left: 3vw;}

    .kv_main__list li img{
        max-width: initial;
        width: 100%;
    }

    .kv_arrow {
        transform: translateX(-50%);
        left: 0;
        padding: 0 0 0;
        width: 100%;
        height: 50px;
        transform: translateX(0);
    }


    .product_area{
        position: relative;
        min-width: 100%;
    }

    .frame {
      display: -webkit-box;
      display: flex;
      flex-wrap: wrap;
    }
  
    .frame__main {
      width: 100%;
      padding: 70% 0 0;
    }
  
    .thumb__list {
      width: 100%;
    }
    .thumb__list li {
      padding: 18% 0 0 0;
      width: 27%;
    }

    .product_main{
        top: 20%;
        left: 0px;
        padding: 0 0 2% 12%;
        width: 55%;
        z-index: 1;
        border-left: none;
    }
	
/*追記-2*/	
.kv_main__mark{
width:90%;
padding:1% 5% 0;
}
.product_main{
        top: 25%;
		margin-top: 10%;
        
    }

.product_main h3 img{
padding: 0 5%;
margin-left: -50px;
}
	.product_main p{
    font-size: 1.4rem;
    line-height: 2.6;
	letter-spacing: 0.5rem;
}

	.product_sub{
    position: relative;
    margin: 10% auto 0;   
    width: 100%;
    max-width: 100%;
    z-index: -2;
}
.product_sub div{
    position: relative;
    padding: 7.8% 6% 10%;
    width: 100%;
    height: 100%;
    background-color: #f1f1f1;
    box-sizing: border-box;
	margin-bottom: 10%;
}
.product_sub h3{  
    display: inline-block;
    margin: 0 0 1em;
    padding: 0 0 0 1em;
    font-size: 2.4rem;
    width: auto;
    letter-spacing: 0.4em;
    border-left: 6px solid #2F220D;
}
.product_sub h3::before{
    content: none;
}
.product_sub p{
    font-size: 1.6rem;
    line-height: 2.6;
}

}