/*--------------------------------------------
カミカができるまで専用 story.css
--------------------------------------------*/
  .page_contents {
    max-width: initial;
    width: 100% !important;
    margin: 0 auto 140px;
  }
  .story_contents {
    background-size: cover;
  }

  .pankuzu {
    position: absolute;
    /*top: 0;*/
    left: 0;
    z-index: 10;
  }
  .page_ttl {
    display: none;
  }

	
.story_contents p{
	font-size: 15px;
	line-height: 2em;
}
  .story_contents {
    background: url("/wp-content/themes/theme_kamika/images/top/top_bg2.jpg") no-repeat center top fixed;
    background-size: cover;
  }	
.story_contents h2 {
	font-size: 34px;
	font-family: 'Noto Serif JP',"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
	line-height: 1.5;
	margin-bottom: 20px;
}

/*メインビジュアル*/
.story_eyecatch{
	background: url("/wp-content/themes/theme_kamika/images/page/story/story_eyecatch_pc.jpg");
	height: 550px;
	background-size:cover;
	position: relative;
	background-position: center center;
}

	
.story_leadtxt h1 {
    font-size: 34px;
    font-weight: normal;
    font-family: 'Noto Serif JP',"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif" !important;
    line-height: 1.6;
    text-align: left;
    position: absolute;
    left: 10%;
    top: 35%;
	display: block;
  }
	
/*原点から見直したシャンプー*/
.story_start {
	padding: 114px 0 0;
  }
.story_start .txt1 {
    text-align: center;
    margin: 0 auto 120px;
    position: relative;
    z-index: 100;
  }

.story_start .story_img1 {
    position: absolute;
    top: 42px;
    left: -19px;
	width:30%;
  }
.story_start .story_img2 {
    position: absolute;
    bottom: -300px;
    right: 43px;
	width:22%;
  }
	
/*研究に熱が入ったオーダー*/
.lr_inner {
	position: relative;
}
.lr_inner .lr-img {
	float: left;
	width: 52%;
}
	
.lr_inner .lr-img img{
	display:block;
	width:100%;
	z-index: 200;
	padding-left:50px;
}
.lr_inner .lr-img .story_img3{
}
	
.lr_inner .lr-img .story_img4{
	width: 60%;
	padding-left: 200px;
	padding-top: 50px;
	z-index: 100;
}
	
.lr_inner .story_img5 {
	position: absolute;
	bottom: -80px;
	right: -10px;
	z-index: 10;
	width:15%;
}	
.lr_inner .lr_txt {
	box-sizing: border-box;
	float: left;
	width: 50%;
	margin: 70px 0 0 -90px;
	padding: 100px 4% 100px 4%;
	background: #67727b;
	color: #ffffff;
}

/*泡立たないシャンプーへのこだわり*/	
 .story_cream {
	background-image: url(https://kamikacosmetics.jp/wp-content/themes/theme_kamika/images/top/top_bg2.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
	background-size: cover;
	padding-top:90px;
	padding-bottom:90px;
	margin: 100px 0 92px; 
  }
	
.story_cream h2 {
	text-align: center;
}
.story_cream p {
	text-align: center;
  }



/*KAMIKAのクリームシャンプーは繊細*/
.lr02_inner {
	position: relative;
	padding-bottom:120px;
}
.lr02_inner .lr02-img {
	float: left;
}
.lr02_inner .lr02-img .story_img6{
	display:block;
	width:52%;
	z-index: 200;
	padding-right:50px;
	position: absolute;
    top: 0px;
    right: 0px;
}
	
.lr02_inner .story_img7 {
	position: absolute;
	z-index: 500;
	top: 75%;
	right: -117px;
	width:20%;
}
	
.lr02_txt {
	box-sizing: border-box;
	float: left;
	width: 48%;
	margin: 150px 0 0 50px;
	padding: 100px 4% 100px 4%;
	background: #67727b;
	color: #ffffff;
	z-index: 100;
}

/*KAMIKAのクリームシャンプーは繊細*/
.story_end{
	background: url("/wp-content/themes/theme_kamika/images/page/story/story_bottom_pc.jpg");
	height: 590px;
	background-size:cover;
	position: relative;
	background-position: center center;
	overflow: hidden;
}
  .txt4 {
    position: absolute;
    top: 25%;
    margin: auto;
    padding-left: 5%;
  }
  .txt4 p {
    font-size: 15px;
    line-height: 2.66;
  }
	
  .story_outer {
    background: #fff;
  }
  .story_inner {
    margin: auto;
    position: relative;
  }
  .story_inner img {
    display: block;
  }

.sp_img{
	display: none;
}


@media (max-width: 1080px) and (min-width: 768px)  {
	.story_eyecatch{
		background: url("https://kamikacosmetics.jp/wp-content/themes/theme_kamika/images/page/story/story_eyecatch_pc.jpg");
		height: 450px;
		background-size:cover;
		position: relative;
		background-position: center center;
	}
	
	.story_end{
		background: url("/wp-content/themes/theme_kamika/images/page/story/story_bottom_pc.jpg");
		height: 500px;
		background-size:cover;
		position: relative;
		background-position: right -250px bottom 0px;
	}
	
	.lr_inner .lr-img .story_img4{
		width:80%;
	}
}


@media screen and (max-width: 767px) {
	
	.story_contents h2 {
		font-size: 5.3vw;
		font-family: 'Noto Serif JP',"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho",'Noto Serif JP', "serif";
		text-align: center;
		margin-bottom: 3.2vw;
	  }
	  .story_contents p {
		font-size: 3.46vw;
		line-height: 2;
		text-align: center;
	  }
	 .js_sp_bg {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	  }
	  .contents {
		padding-bottom: 0;
	  }
	  .story_contents img {
		width: 100%;
		height: auto;
	  }
	  .page_contents {
		margin: 0;
	  }
	  .pankuzu {
	  }
	  .story_eyecatch {
		position: relative;
	  }
	  .page_ttl {
		display: none;
	  }
	  .story_leadtxt h1 {
		width: 60vw;
		font-size: 5.3vw;
		font-family: 'Noto Serif JP',"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho",'Noto Serif JP', "serif" !important;
		line-height: 1.6;
		text-align: left;
		position: absolute;
		top: 18vw;
		left: 3.3vw;
	  }
	  .story_leadtxt .page_ttl:after {
		display: none;
	  }
	  .story_inner {
		position: relative;
	  }
	/*原点から見直したシャンプー*/
	.story_start {
		padding: 15vw 0;
	  }
	.story_start .story_img1 {
		position: absolute;
		top: 10px;
		left: -5px;
		width:50%;
	  }
	.story_start .story_img2 {
		position: absolute;
		bottom: -16vw;
		right: 0;
		width:40%;
	  }
	  .story_contents .txt1 {
		margin: 0 4%;
		position: relative;
		z-index: 10;
		width:92%;
	  }
    .story_contents .txt1 h2 {
    text-align: left!important;
		/*margin: 0 4%;
		position: relative;
		z-index: 10;
		width:92%;*/
	  }	
		.story_contents .txt1 p{
			text-align: left;
		}	

	.story_eyecatch{
		background: url("https://kamikacosmetics.jp/wp-content/themes/theme_kamika/images/page/story/story_eyecatch_sp.jpg");
		background-size:100% auto;
		position: relative;
		background-position: center center;
		background-repeat: no-repeat;
		height: 50vw;
		margin-top:14%;
	}

	/*研究に熱が入ったオーダー*/	
	.lr_inner {
		position: relative;
		margin-bottom:15vw;
	}
	.lr_inner .lr-img {
		float: left;
		width: 100%;
	}

	.lr_inner .lr-img img{
		display:block;
		width:100%;
		padding-left:50px;
		position: relative;
	}
	.lr_inner .lr-img .story_img3{
		width:80%;
		position: absolute;
		top:0;
		right:0;
		z-index:300;
	}
	.lr_inner .lr-img .story_img4{
		width:100%;
		position: absolute;
		top:20vw;
		right:50vw;
		z-index:500;
	}
	.lr_inner .lr_txt {
		box-sizing: border-box;
		float: left;
		width: 94%;
		margin: 52vw 6% 0 0;
		padding: 20vw 5% 14vw ;
		background: #67727b;
		color: #ffffff;
	}
	.lr_inner .lr_txt h2,
	.lr_inner .lr_txt p{
		text-align: left;
	}	

	.lr_inner .story_img5 {
		position: absolute;
		bottom: -9vw;
		right: 0vw;
		z-index: 10;
		width:30%;
	}	
	/*泡立たないシャンプーへのこだわり*/	
	.story_cream {
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		padding:10vw 0;
		margin: 15vw 0;
	  }	
	
	/*.story_cream:before{
	content: "";
    display: block;
    position: fixed;
    -webkit-transform: translate3d(0, 0, -1px);
    transform: translate3d(0, 0, -1px);
    width: 100%;
    min-height: 100%;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
	background: url(https://kamikacosmetics.jp/wp-content/themes/theme_kamika/images/top/top_bg2.jpg);
	}*/
	
	/*KAMIKAのクリームシャンプーは繊細*/
	.lr02_inner {
		position: relative;
		padding-bottom:20vw;
	}
	.lr02_inner .lr02-img {
		float: left;
	}
	.lr02_inner .lr02-img .story_img6{
		width:100%;
	}
	.lr02_txt {
		box-sizing: border-box;
		float: left;
		width: 94%;
		margin: 32vw 0 0 6%;
		padding: 32vw 5% 14vw ;
		background: #67727b;
		color: #ffffff;
	}
	.lr02_inner .lr02_txt h2,
	.lr02_inner .lr02_txt p{
		text-align: left;
	}	
	.story_end{
		background-color: #ebedf6;
		height:70vw;
		background-image: none;
		width:50
	}
	  .txt4 {
		position: absolute;
		top: 5vw;
		margin: auto;
	  }

	  .stroy_inner4 {
		background: #ebedf6;
		position: relative;
		border-bottom: 24vw solid #fff;
	  }
	  .txt4 p {
		font-size: 3.46vw;
		line-height: 2;
		text-align: center;
		padding: 10.4vw 0 4.2vw;
	  }	

		.sp_img{
		display: block;
		width: auto;
		vertical-align: bottom;
		padding-bottom:20vw;
	}		
}