@charset "utf-8";
/* CSS Document モバイルファーストで記述 */

/*打ち消し*/
ul{list-style: none;}
/*リセット*/
h1,h2,h3,h4,h5,h6,p,ul,li,ol,dl,dt,dd{margin:0; padding:0;}
*{box-sizing: border-box;} 
img{max-width:100% ; vertical-align: bottom;}


/*共通
---------------------------------*/



body{
	color:#4d4d4d;
	font-size: 15px;
    font-family: 'Shippori Mincho', serif;
    text-align: center;
    margin: 0 auto;
}

.japan-container{
    width: 100%; 
}

.japan-main-wrapper{
	background:#fff;

}

section{
	margin:60px 0;
}

.section-inner{
	padding:0 4%;
}



.section-ttl{
	font-size:21px;
	letter-spacing: 2px;
	font-family:  'Shippori Mincho', serif;
}

.section-ttl.w-side{
	line-height: 1.7;
	margin-bottom:30px;

}

.section-ttl.w-vertical{
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	line-height: 1;
}

.sec-des{
	letter-spacing: 2px;
	margin-top:30px;
	line-height: 1.5;
}

.wh-txt{
	color:#fff;
}

.sec-des.first{
	margin-top:0;
}

.ttl-vertical-box{
width:calc(21px + 1px);
height:100px;
margin:0 auto;
}

.vertical-span{
	position: relative;
	z-index: 1;
}

.vertical-span:after{
	content: '';
	position: absolute;
	right: -4px;
	top: 0;
	width: 1px;
	height: 0px;
	background: #4d4d4d;
	z-index: -1;
	transition: all 1.5s;	
	transition-delay: 0.5s;
	transform: translateZ(0);
}

.vertical-span.isActive:after {
	height: 100px;
	/* animation-duration: 2s; */
  }

  .fadein {
	opacity : 0;
	transform : translate(0, 30px);
	transition:all 1s;
	display:block;
	/* text-align:center; */
	}
	
	.fadein.scrollin {
		opacity : 1;
		transform : translate(0, 0);
	}

	.ani-blur{
		filter: blur(10px);	
		transition:all 1.5s;
		opacity: 0;
		transition-delay: 0.5s;
		transform: translateZ(0);
	}
 
	/*デュレーションなし*/
	.ani-blur-nodelay{
		filter: blur(10px);	
		transition:all 1.5s;
		opacity: 0;
		transform: translateZ(0);
	}

	.ani-blur.scrollin, .ani-blur-nodelay.scrollin{
		filter: blur(0px);	
		opacity: 1;
	}
	
	.br-pc{
		display: none;
	}


/*商品には個体差があります 追記*/	
	.image-hosoku{
		display: block;
		font-size:10px;
		transform: scale(0.8);
		transform-origin: 0,0;
		color:#808080;
	}

	.hosoku-posi{
		position: relative;
	}

	.hosoku-posi .image-hosoku{
		position: absolute;
		color:rgb(255, 255, 255,0.8);
		bottom:1px;
		left:0;
		right:0;
		margin:auto;
		z-index: 99999;
	}

	.hosoku-posi .image-hosoku.right{
	margin:inherit;
	right:0;
	left: inherit;
	bottom:-35px;
	}


@media screen and (min-width: 450px) {  /*-------PC版-------*/
	
.japan-container{
	position: relative;
    min-height: 100%;
    background:url(https://john.itembox.design/item/lp/japan/img/pc-bg.jpg) no-repeat center center/cover;
    background-attachment: fixed; 
	padding-bottom: 60px;
}

	.japan-main-wrapper{
        max-width:450px;
		box-shadow: -15px 0 15px rgb(0, 0, 0, 0.2);
		position:static;
		z-index:1000 !important;
		margin:0 auto;
	}

	.br-pc{
		display: block;
	}

	.br-sp{
		display: none;
	}

	



}

/*キービジュアル
---------------------------------*/

.kv-image{
	height:calc(90vh - 37px);
	background:url(https://john.itembox.design/item/lp/japan/img/key.jpg) no-repeat center bottom/cover;
	position: relative;
	margin-bottom:37px;
}

.kv-image::before{
display: block;
content:"";
width:76px;
height:76px;
background:url(https://john.itembox.design/item/lp/japan/img/japan_logo_circle.png) no-repeat center center/contain;
position: absolute;
right:0;
left:0;
bottom:-37px;
margin:auto;
}


.japan-ttl{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	width:100%;
	height:70px;
	background:url(https://john.itembox.design/item/lp/japan/img/japan_logo_s.png) no-repeat center center/contain;
	position: absolute;
	bottom:50px;
}

@media screen and (min-width: 450px) {  /*-------PC版-------*/

.kv-image{
	height:calc(75vh - 37px);
}
.japan-ttl{
	height:80px;
}

}

/*商品コンセプト
---------------------------------*/

.concept{
	width:100%;
	position: relative;
	background:url(https://john.itembox.design/item/lp/japan/img/hajimari_re.jpg) no-repeat top left/cover;
}

.concept-inner{
	width:90%;
	margin:0 auto;
	padding:260px  0 60px;
}

.concept-logo{
	margin-bottom:10px;
}

.concept-ttl-wrapper{
	width:43%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom:40px;
}

.section-ttl.concept-ttl{
	color:#fff;
}

.section-ttl.concept-ttl .vertical-span:after{
	background:#fff;
}

video{
	max-width:100%;
}

/*ビデオエリア
---------------------------------*/
section.video-block{
	margin:0;
}

.video-wrapper{
	position: relative;
}

.video-play-btn{
	position: absolute;
	z-index:2;
	top:0;
	bottom:0;
	right:0;
	left:0;
	margin:auto;
	cursor: pointer;
}



/*ヒノキ説明
---------------------------------*/
section.hinoki{
	position: relative;
	padding-top:40px;
}

.hinoki-logo{
	width:100%;
	height:390px;
	position: absolute;
	top:-40px;
	margin-top:40px;
	right:0;
	background: url(https://john.itembox.design/item/lp/japan/img/hinoki_logo.png) no-repeat center right/contain;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.hinoki-image{
	margin-top:40px;
}

.ttl-vertical-box.feature-ttl{
	margin-bottom:40px;
}

/*特徴：香り・佇まい
---------------------------------*/


.image-scroll-list {
	overflow-x: auto;
	white-space: nowrap;
	padding-left:4%;
    padding-bottom:20px;
	margin-top:50px;
	/* border:1px solid #ccc; */
}
.image-scroll-list li{
	display: inline-block;
	width: 80%;
	margin-right:4%;
}


/*特徴：想い
---------------------------------*/
.omoi-image-wrapper{
	display: flex;
	justify-content: flex-start;
	margin-top:30px;
}

.omoi-image-wrapper.center{
	justify-content: flex-start;
	padding:0 4%;
}

.omoi-image{
	width:65%;
	margin-left:-4%;
}

.omoi-image-wrapper.right{
	justify-content: flex-end !important;
	margin-right:-4%;

}

/*商品
---------------------------------*/
.japan-item-block{
	font-size:16px;
	margin:60px 0 0;
	padding-bottom: 60px;
}

.japan-item-name{
line-height: 1;
position: relative;
}

.item-ttl-wrapper{
	max-width:80%;
	margin:0 auto;
}

.japan-item-image{
	max-width:320px;
	margin:30px auto;
}

.japan-item-name::after{
	content:"";
	width:100%;
	height:1px;
	display: block;
	position: absolute;
	bottom:-8px;
	background:#4d4d4d;
}

.item-ttl-wrapper p{
	margin-top:8px;
}

.japan-item-spec li span{
	font-size:12px;
}

.japan-buy-link{
	max-width:200px;
	margin:30px auto 0;
	background:#4D4D4D;
	border:1px solid #4d4d4d;

}

.japan-buy-link a{
	display: block;
	color:#fff;
	padding:8px 16px;
}

.japan-item-hosoku{
font-size:10px;
color:#808080;
}

.limited-box{
	border:1px solid #4d4d4d;
	max-width:13em;
	margin:0 auto;
	font-size:14px;
	padding:3px 8px;
}