/*-----------------------------------------------------	*/
/*	for all						*/
/*-----------------------------------------------------	*/
/* ------ General Settings ------ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap');

.kimonoikimono img {
 max-width: 100%;
 height: auto;
 width: 100%;
}

.kimonoikimono {
 font-family: 'Noto Serif JP', serif;
	font-weight: 400;
	overflow: hidden;
}

.kimonoikimono .g{
    font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
}
    


a:hover {
 opacity: 1;
 text-decoration: none;
}

.sp {
 display: none !important;
}
.br_pc {
 display: inherit;
}
.br_sp {
 display: none;
}
@media screen and (max-width:768px) {
 /* ------ General Settings ------ */
 img {
  max-width: 100%;
  height: auto;
  width: auto\9;
 }
 a:hover {
  opacity: 1;
  text-decoration: none;
 }

 .pc {
  display: none !important;
 }
 .sp {
  display: inherit !important;
 }
 .br_pc {
  display: none !important;
 }
 .br_sp {
  display: inherit !important;
 }
}




/* ------ base ------ */

#contents01 ul{
  margin: 1em 0 0 0!important;
}


/* ------ contents ------ */


.main-area{
	width: 100%;
	background: url("../images/bg_main.jpg") no-repeat left top;
	background-size: cover;
	padding: 12.5vw 0;
	position: relative;
}

.main-area .main-mov{
	width: calc(100% - 12.5vw);
	height: auto;
}

.main-area .main-title{
	position: absolute;
	left: 12.5vw;
	top: 1.916vw;
	width: 30px;
	height: 280px;
	z-index: 10;
}

.main-area .main-title img{
	width: 100%;
	height: auto;
}


	.video-container {
  margin: 0;
		width: calc(100% - 12.5vw);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
		position: relative;
		margin-bottom: 8.3vw;
}

.video-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 50vw;
}

video {
  min-width: 100%;
  height: 50vw;
  position: absolute;
}




.main-read{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.main-read-txt{
	font-size: 24px;
	font-weight: 700;
	color: #fff;
	width: 51vw;
	text-align: center;
	letter-spacing: 4.5px;
}

.main-read-img{width: 48.666vw;}

@media screen and (max-width:768px) {
 
	
.main-area{
	width: 100%;
	background: url("../images/bg_main.jpg") no-repeat left top;
	background-size: cover;
	padding: 15vw 0;
	position: relative;
	overflow: hidden;
	height:145vw;
}

	
	.video-container {
  margin: 0 auto 15vw auto;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.video-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 30vh;
}
	
	.video-container figure img {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 50vh;
		object-fit: cover;
}

video {
  min-width: 100%;
  min-height: 30vh;
  position: absolute;
	max-width: none;
	left: 50%;
    transform: translateX(-50%);
}


.main-area .main-title{
	position: absolute;
	left: 10vw;
	top: 1vw;
	width: 5vw;
	height: 45vw;
	z-index: 10;
}

.main-area .main-title img{
	width: 100%;
	height: auto;
}

.main-mov{margin-bottom: 8.3vw;}

.main-read{
	width: 100%;
	display: block;
}

.main-read-txt{
	font-size: 4vw;
	font-weight: 700;
	color: #fff;
	width: 100%;
	text-align: left;
	letter-spacing: 4.5px;
	padding-left: 8vw;
	margin-bottom: 8vw;
}

.main-read-img{
	width: calc(100% - 20vw);
	float: right;
	}

}


/*scene*/

.k-i-scene{
	width: 100%;
	box-sizing: border-box;
		display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.k-i-scene1{
	background: url("../images/bg_2.jpg") no-repeat left top;
	background-size: cover;
	padding: 11.6vw 0 11.6vw 0;
}

.scene-img1{width: 50vw;}
.scene-img2{width: 50vw;}

.scene-txt-box{width: 50vw;
		display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.scene-txt{width: 30vw;
background: #000;
padding: 2vw 2.4vw;
color: #fff;
font-size: 1.5vw;
line-height: 1.8;
letter-spacing: 0.12vw;
box-sizing:border-box;
}


.k-i-scene2{
	background: url("../images/bg_3.jpg") no-repeat left bottom;
	background-size: 100% auto;
	padding: 11.6vw 0 ;
}

.scene-txt2{width: 27.5vw;
}

.k-i-scene3{
	background: url("../images/bg_4-5.jpg") no-repeat left center;
	background-size: 100% auto;
	padding: 11.6vw 0 ;
}

.k-i-scene3-img{width: 50vw;
position: relative;
height: 37.6666vw;}

.scene-img3_1 {
	width: 33.6vw;
position: absolute;
top: 0;
left: 0}

.scene-img3_2{
	width: 33.6vw;
position: absolute;
bottom: 0;
right: 0}

.scene-txt3{width: 24.666vw;
	text-align: center;
}

.k-i-scene4{
	background: url("../images/img_6.jpg") no-repeat left center;
	background-size: 100% auto;
	padding: 15.5vw 0 ;
	margin-bottom: 8.3vw;
}

.scene-txt4{
	font-size: 2.5vw;
	color: #fff;
	letter-spacing: 3.5px;
	
}

.k-i-scene-b{
		width: 100%;
	position: relative;
	height: 35vw;
	margin-bottom: 5vw;
}

.scene-imgb{
	width: 78.58vw;
	position: absolute;
	top: 0;
	right: 0;
}

.scene-txt-boxb{
	position: absolute;
	left: 2vw;
	top: 14.2vw;
	z-index: 10;
}

.scene-txt5{width: 23.66vw;	text-align: center;}

.scene-imgc{
	width: 78.58vw;
	position: absolute;
	top: 0;
	left: 0;
}

.scene-txt-boxc{
	position: absolute;
	right: 6.6vw;
	top: 14.2vw;
	z-index: 10;
}

.scene-txt6{width: 18.833vw;	text-align: center;}

.k-i-scene-c{
		width: 100%;
	position: relative;
	height: 35vw;
	margin-bottom: 10vw;
}

.scene-txt7{width: 27.25vw;	text-align: center;}



.ityped {

}

.ityped-cursor {
  font-size: 80px;
  font-weight: bold;
  opacity: 1;
  -webkit-animation: blink 0.3s infinite;
  -moz-animation: blink 0.3s infinite;
  animation: blink 0.3s infinite;
  animation-direction: alternate;
}

@keyframes blink {
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  100% {
    opacity: 0;
  }
}
@-moz-keyframes blink {
  100% {
    opacity: 0;
  }
}

@keyframes blink {
    100% {
        opacity: 0;
    }
}


@media screen and (max-width:768px) {
	
	.h1_p{display: none;}
	
	#contents01{
		padding-bottom: 3vw;
	}
 .k-i-scene{
	width: 100%;
	box-sizing: border-box;
		display: block;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.k-i-scene1{
	background: url("../images/bg_2.jpg") no-repeat left top;
	background-size: cover;
	padding: 15vw 0 15vw 0;
	overflow: hidden;
}

.scene-img1{width: calc(100% - 20vw);}
.scene-img2{width: calc(100% - 20vw);
	float: right;}

.scene-txt-box{width: 68vw;
		display: block;
}
.scene-txt{width: 100%;
background: #000;
padding: 2vw 3vw;
color: #fff;
font-size: 4vw;
line-height: 1.8;
letter-spacing: 0.12vw;
box-sizing:border-box;
}
	
	.k-i-scene1 .scene-txt-box{
		float: right;
		margin-top: -40px;
}


.k-i-scene2{
	background: url("../images/bg_3.jpg") no-repeat left bottom;
	background-size: 100% auto;
	padding: 15vw 0 15vw 0 ;
	overflow: hidden;
	position: relative;
}
	
		.k-i-scene2 .scene-txt-box{
		margin-bottom: -40px;
			position: absolute;
			top: 20vw;
			z-index: 10;
}

.scene-txt2{width: 50%;
}

.k-i-scene3{
	background: url("../images/bg_4-5.jpg") no-repeat left center;
	background-size: 100% auto;
	padding: 15vw 0 ;
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
	align-items: center;
}

.k-i-scene3-img{width: 50vw;
position: relative;
height: 44.5vw;}

.scene-img3_1 {
	width: 40vw;
position: absolute;
top: 0;
left: 0}

.scene-img3_2{
	width: 40vw;
position: absolute;
bottom: 0;
right: 0}
	
.k-i-scene3	.scene-txt-box {
  width: 45vw;
  display: block;
}

.scene-txt3{
	width: 80%;
	text-align: center;
}

.k-i-scene4{
	background: url("../images/img_6.jpg") no-repeat left center;
	background-size: 100% auto;
	padding: 15vw 0 ;
	margin-bottom: 15vw;
	text-align: center;
}

.scene-txt4{
	font-size: 4.5vw;
	color: #fff;
	letter-spacing: 3.5px;
	
}

.k-i-scene-b{
		width: 100%;
	position: relative;
	height: 35vw;
	margin-bottom: 10vw;
}

.scene-imgb{
	width: calc(100% - 20vw);
	position: absolute;
	top: 0;
	right: 0;
}

.scene-txt-boxb{
	position: absolute;
	left: 2vw;
	top: 12vw;
	z-index: 10;
}
	
	.scene-txt-boxb .scene-txt {
  width: 100%;
  background: #000;
  padding: 2vw 3vw;
  color: #fff;
  font-size: 4vw;
  line-height: 1.8;
  letter-spacing: 0.12vw;
  box-sizing: border-box;
}
	
	
.scene-txt5{width: 23.66vw;	text-align: center;}

.scene-imgc{
	width: calc(100% - 20vw);
	position: absolute;
	top: 0;
	left: 0;
}

.scene-txt-boxc{
	position: absolute;
	right: 2vw;
	top: 12vw;
	z-index: 10;
}
	
		.scene-txt-boxc .scene-txt {
  width: 100%;
}

.scene-txt6{width: 18.833vw;	text-align: center;}

.k-i-scene-c{
		width: 100%;
	position: relative;
	height: 35vw;
	margin-bottom: 15vw;
}

.scene-txt7{width: 27.25vw;	text-align: center;}

}



/*取り扱い*/
.k-i-kind{
	width: 100%;
}

.kind-list{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items:flex-start;
	border-top: #CCCCCC 1px solid;
	border-bottom: #CCCCCC 1px solid;
	margin-bottom: 5vw;
}

.kind-list-detail{
	width: 49.5%;
	padding: 5vw 0;
	text-align: center;
}

.kind-list div+div{
	border-left: #CCCCCC 1px solid;
}

.kind-list-detail img{width: 29.3vw;
margin-bottom: 3.33vw;}

.kind-list-detail p{
    font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
font-size:16px;
line-height: 2;}


@media screen and (max-width:768px) {
 .k-i-kind{
	width: 100%;
}

.kind-list{
	width: 100%;
	display: block;
	flex-wrap: wrap;
	justify-content: center;
	align-items:flex-start;
	border-top: #CCCCCC 1px solid;
	border-bottom: #CCCCCC 1px solid;
	margin-bottom: 5vw;
}

.kind-list-detail{
	width: 100%;
	padding: 5vw;
	text-align: center;
	box-sizing: border-box;
}

.kind-list div+div{
	border-top: #CCCCCC 1px solid;
}

.kind-list-detail img{width: 65vw;
margin-bottom: 3.33vw;}

.kind-list-detail p{
    font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
font-size:3.8vw;
line-height: 2;}

}




/*詳細*/

.k-i-kimono{
	width: 100%;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
}

.k-i-kimono-list{
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
	padding: 5.4vw 4.16vw 10vw 4.16vw;
}


.k-i-kimono-detail{width: 28.333vw;
text-align: center;}


.k-i-kimono-detail figure{
	margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.k-i-kimono-detail figure img:nth-child(2){
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.k-i-kimono-detail figure:hover img:nth-child(2){
  opacity: 0;
  transition: opacity 1s;
}

.k-i-kimono-detail a:hover,.k-i-kimono-detail a:hover img{
  opacity: 1;
}


.k-i-kimono-detail-ttl{font-size: 16px;
font-weight: 700;
margin-bottom: 10px;}

.k-i-kimono-detail-txt{
	font-size: 16px;
}

.k-i-youtube{width: 560px; margin: 0 auto 10vw auto;}



@media screen and (max-width:768px) {
 
.k-i-kimono{
	width: 100%;
}

.k-i-kimono-list{
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
	padding: 5.4vw 4.16vw 10vw 4.16vw;
}


.k-i-kimono-detail{width:auto;
text-align: center;
	display: block;
	margin-bottom: 8vw;
	}


.k-i-kimono-detail figure{
	width: 50%;
  position: relative;
  overflow: hidden;margin: 0 auto 3vw auto;
}

.k-i-kimono-detail figure img:nth-child(2){
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.k-i-kimono-detail figure:hover img:nth-child(2){
  opacity: 0;
  transition: opacity 1s;
}

.k-i-kimono-detail a:hover,.k-i-kimono-detail a:hover img{
  opacity: 1;
}


.k-i-kimono-detail-ttl{font-size: 4vw;
font-weight: 700;
margin-bottom: 0;}

.k-i-kimono-detail-txt{
	font-size: 3.8vw;
	padding: 2vw 0 0 0;
	margin: 0;
	line-height: 1;
}

.k-i-youtube{width: auto; margin: 0 5vw 10vw 5vw;}
	
.k-i-youtube {
  width: 94vw;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 0 auto 10vw auto;
}
	
.k-i-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


}