/**
 * Concept page settings
 * -----------------------------------------------------------------------------
 */



 
html, body{height: 100%}

.pageTop{
	position:relative;
	display:block;
	width:20%;/*128*/
	height:auto;
	margin:auto auto 10%;
	border-radius:50%;
	background-color:#00425f;
	overflow:hidden;
	text-align:center;
}
.pageTop img{
	width:100%;
	height:auto;
}


#header{
	position:fixed;
	width:100%;
	height:15%;
	z-index:100;
}
#header .logo{
	position:absolute;
	width:12.34%;/*79px*/
	max-width:79px;
	
	top:20%;/*20px*/
	left:3.125%;/*20px*/
}

#header .logo a,
#btnShop a{
	display:block;
	width:100%;
	height:100%;
}
#header .logo a img,
#btnShop a img{
	width:100%;
	height:auto;
}

#btnShop{
	position:absolute;
	width:53.75%;/*344*/
	max-width:344px;
	top:15px;
	right:0;
	z-index:100;
}


#btnShopS{
	position:fixed;
	width:8.75%;/*56*/
	max-width:56px;
	height:auto;
	top:0;
	right:5%;
	z-index:150;
	
	-webkit-animation:shopBtnSDefault 1s 1 forwards;
	animation:shopBtnSDefault 1s 1 forwards;
	

	
}
#btnShopS.active{
	display:block !important;
	-webkit-animation:shopBtnSActive 0.5s ease-out 1 forwards;
	animation:shopBtnSActive 0.5s ease-out 1 forwards;
	
}
#btnShopS a{
	display:block;
	width:100%;
}
#btnShopS a img{
	width:100%;
	height:auto;
}
@-webkit-keyframes shopBtnSActive {
    0%	{top:-100px; opacity:0;}
    100%	{top:0; opacity:1;}
}

/* Standard syntax */
@keyframes shopBtnSActive {
    0%	{top:-100px; opacity:0;}
    100%	{top:0; opacity:1;}
}

@-webkit-keyframes shopBtnSDefault {
    0%	{top:0; opacity:0.4;}
    100%	{top:0; opacity:0;}
}

/* Standard syntax */
@keyframes shopBtnSDefault {
    0%	{top:0; opacity:0.4;}
    100%	{top:0; opacity:0;}
}




#pageNav{
	position:fixed;
	width:7%;/*38px*/
	height:auto;
	z-index:100;
	top:40%;
	right:0;
	/*
	margin-top:-76px;
	*/
}
#pageNav li{
	margin-bottom:20%;
}
#pageNav a{
	display:block;
	width:100%;
	height:auto;
	overflow:hidden;
	border-style:none;
	outline: none;
	
}
#pageNav a img{
	width:100%;
	height:auto;
	border-style:none;
}
#pageNav a:hover img{
	-webkit-animation:currentDot 1s ease-out 3 alternate;
	animation:currentDot 1s ease-out 3 alternate;
}


#pageNav a .current{display:none;}


/*BrandV*/
#pageNav.navBrandV #navBrandV .current{
	display:block;
	-webkit-animation:currentDot 1s ease-out 3 alternate;
	animation:currentDot 1s ease-out 3 alternate;
}
#pageNav.navBrandV #navBrandV .dot{display:none;}

/*MainV*/
#pageNav.navMainV #navMainV .current{
	display:block;
	-webkit-animation:currentDot 1s ease-out 3 alternate;
	animation:currentDot 1s ease-out 3 alternate;
}
#pageNav.navMainV #navMainV .dot{display:none;}

#pageNav.navMainV.navBrandV #navBrandV .current{display:none;}
#pageNav.navMainV.navBrandV #navBrandV .dot{display:block;}


/*#Sec1*/
#pageNav.navMainV.navSec1 #navMainV .current{
	display:none;
}
#pageNav.navMainV.navSec1 #navMainV .dot{display:block;}

#pageNav.navMainV.navSec1 #navSec1 .current{
	display:block;
	-webkit-animation:currentDot 1s ease-out 3 alternate;
	animation:currentDot 1s ease-out 3 alternate;
}
#pageNav.navMainV.navSec1 #navSec1 .dot{display:none;}

/*#Sec2*/
#pageNav.navMainV.navSec1.navSec2 #navMainV .current{display:none;}
#pageNav.navMainV.navSec1.navSec2 #navMainV .dot{display:block;}
#pageNav.navMainV.navSec1.navSec2 #navSec1 .current{display:none;}
#pageNav.navMainV.navSec1.navSec2 #navSec1 .dot{display:block;}

#pageNav.navMainV.navSec1.navSec2 #navSec2 .current{
	display:block;
	-webkit-animation:currentDot 1s ease-out 3 alternate;
	animation:currentDot 1s ease-out 3 alternate;
}
#pageNav.navMainV.navSec1.navSec2 #navSec2 .dot{display:none;}

/*#Sec3*/
#pageNav.navMainV.navSec1.navSec2.navSec3 #navMainV .current{display:none;}
#pageNav.navMainV.navSec1.navSec2.navSec3 #navMainV .dot{display:block;}
#pageNav.navMainV.navSec1.navSec2.navSec3 #navSec1 .current{display:none;}
#pageNav.navMainV.navSec1.navSec2.navSec3 #navSec1 .dot{display:block;}
#pageNav.navMainV.navSec1.navSec2.navSec3 #navSec2 .current{display:none;}
#pageNav.navMainV.navSec1.navSec2.navSec3 #navSec2 .dot{display:block;}

#pageNav.navSec3 #navSec3 .current{
	display:block;
	-webkit-animation:currentDot 1s ease-out 3 alternate;
	animation:currentDot 1s ease-out 3 alternate;
}
#pageNav.navSec3 #navSec3 .dot{display:none;}

/*#Sec4*/
#pageNav.navMainV.navSec1.navSec2.navSec3.navSec4 #navSec3 .current{display:none;}
#pageNav.navMainV.navSec1.navSec2.navSec3.navSec4 #navSec3 .dot{display:block;}

#pageNav.navSec4 #navSec4 .current{
	display:block;
	-webkit-animation:currentDot 1s ease-out 3 alternate;
	animation:currentDot 1s ease-out 3 alternate;
}
#pageNav.navSec4 #navSec4 .dot{display:none;}




/*
#pageNav li.current .dot{display:none;}

#pageNav li.current .current{
	display:block;
	-webkit-animation:currentDot 1s ease-out 3 alternate;
	animation:currentDot 1s ease-out 3 alternate;

}
*/
@-webkit-keyframes currentDot {
    0%	{transform: scale(2); opacity:0.5;}
    100%	{transform: scale(1); opacity:1;}
}


/* Standard syntax */
@keyframes currentDot {
    0%	{transform: scale(2); opacity:0.5;}
    100%	{transform: scale(1); opacity:1;}
}



/*-----------------------------------------------------brandV*/


#brandV{
	background:#c3e6fa url('../img/keyv-bg.gif') repeat-y;
	background-size:100% auto;
	
}
#brandV img{
	width: 100%;
	height: auto;
}
#brandV .keyvArea{
	width:100%;
	
	margin:0 auto;
	position:relative;
	overflow: hidden;
}
#brandV .copySet{
	position:absolute;
	top:20.94%;
	right: 16.4%;
	width: 7.2%;
	max-width: 54px;
}




/*-----------------------------------------------------mainV*/



#mainV{
	/*background: #eeedec url("../img/mainv-bg.jpg") center top no-repeat;*/
	background-color:#eeedec;
	background-size:100% auto;
	
}
#mainV .keyArea{
	width:100%;
	/*max-width:640px;*/
	/*max-width:1024px;*/
	height:auto;
	/*height:790px;*/
	margin:0 auto;
	position:relative;
	overflow:hidden;
	
}
#mainV .areaHolder,
#mainV .keyArea .mainvitem img{
	width:100%;
	height:auto;
}
#mainV .keyArea .mainvitem{
	position:absolute;
	background-repeat:no-repeat;
}
#mainV .keyArea .mainvitem .product,
#mainV .keyArea .mainvitem .shadow{
	position:absolute;
}
#product1{
	width:37.66%;/*241px*/
	height:auto;/*433px;*/
	top:11.00%;/*90px*/
	left:-2.97%;/*-19px*/
	
}
#product2{
	width:39.84%;/*255px*/
	height:auto;
	top:62.66%;/*495px*/
	left:5.94%;/*38px*/
	
}
#product3{
	width:37.1875%;/*238px*/
	height:auto;
	top:70.1265%;/*554px*/
	left:43.125%;/*276px*/
	
}

#product4{
	width:25%;
	height:auto;/*397px*/
	top:34%;/*292px*/
	left:75%;/*502px*/
	
}
#product5{
	width:28.59375%;/*183px*/
	height:auto;/*169px*/
	top:13.00%;/*90px*/
	left:70.78%;/*453px*/
	
}
.mainvitem .product,
.mainvitem .shadow{
	top:0;
	left:0;
}


#mainTitle{
	top:18%;
	left:29%;
	width:54%;
	height:auto;
	z-index:100;
}
#mainTitle .char{
	float:left;
	height:auto;
}
#mainTitle .char img,
#mainTitle p.subline img{
	width:100%;
	height:auto;
}
#mainTitle .clearfix{
	content: "";
  display: table;
  clear: both;
}
#mainTitle .char1,
#mainTitle .char2{width:18.36%;/*65px*/}

#mainTitle .char3{width:24.29%;/*86px*/}
#mainTitle .char4{width:16.67%;/*59px*/}

#mainTitle .char5{width:22.32%;/*30px*/ }

#mainTitle .char6{width:21.47%;/*76px*/}
#mainTitle .char7{width:17.51%;/*62px*/}
#mainTitle .char8{width:22.03%;/*82px*/}
#mainTitle .char9{width:38.99%;/*55px*/}

#mainTitle p.subline {width:100%;/*354*/}


#mainV .copyArea{
	width:87.5%;
	margin:0 auto;
	position:relative;	
}

#mainV .copyArea p{}

#mainV .copyArea .conceptline{
	width:100%;
	height:auto;
}

#mainV .footerArea{
	width:100%;
	height:auto;
	background: url("../img/main-footer-bg.png") repeat-x center bottom;
}
#mainV .footerArea .inner{
	width:68.75%;/*440px*/
	max-width:440px;
	height:100%;
	position:relative;	
	margin:18% auto 25% auto;
}





#mainV .footerArea .subvitem,
#mainV .footerArea .product,
#mainV .footerArea .shadow{
		position:absolute;
}
#mainV .footerArea .subvitem{
	height:100%;/*320px*/
}
#mainV .footerArea .subvitem img{
	width:100%;
	height:auto;
}


#subv1{
	width:29.77%;/*131px*/
	top:0;
	left:0;
}
#subv1 .product{
	bottom:2.5%;
	left:0;
}
#subv1 .shadow{
	bottom:0;
	left:0;
}

#subv2{
	width:16.36%;/*72px*/
	top:0;
	left:34.77%;/*152px*/
}
#subv2 .product{
	bottom:3.2%;
	left:0;
}
#subv2 .shadow{
	bottom:0;
	left:0;
}


#subv3{
	width:12.5%;/*55px*/
	top:0;
	left:56.82%;/*250px*/
}
#subv3 .product{
	bottom:3.2%;
	left:0;
}
#subv3 .shadow{
	bottom:0;
	left:0;
}

#subv4{
	width:27.04%;/*119px*/
	top:0;
	left:72.5%;/*319px*/
}
#subv4 .product{
	bottom:3.2%;
	left:0;
}
#subv4 .shadow{
	bottom:0;
	left:0;
}



/*-----------------------------------------------------sec often used */
.inner.narrow{
	width:87.5%;/*560 area*/
	margin:0 auto;
	position:relative;
}

hr.solid {
    border: 0;
		width:100%;
    height: 1px;
    background: #ccd7dd;
		margin:10% 0;
		/*
    background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
    background-image:    -moz-linear-gradient(left, #ccc, #333, #ccc);
    background-image:     -ms-linear-gradient(left, #ccc, #333, #ccc);
    background-image:      -o-linear-gradient(left, #ccc, #333, #ccc);
		*/
}
p.bodyText{
	font-size:16x;
	line-height:32px;
	margin-bottom:65px;
}
p.bodyText span.note{
	font-size:0.8em;
	line-height:1.4;
}
.visualSet{
	position:relative;
	width:100%;
	margin-bottom:65px;
}
.vis{
	position:relative;
	overflow:visible;
}
.fullContainer{width:100%; margin:auto;}
.leftContainer{width:50%; height:auto;}
.fullContainer img.full,
.leftContainer img.full{width:100%; height:auto;}
/*-----------------------------------------------------sec1 */

#sec1{padding-top:10%;}

#sec1 h2{
}
#sec1 h3{
	margin-bottom:10%;
}
#sec1 h2 img,
#sec1 h3 img{
	width:100%;
	height:auto;
}

#sec1 .vis{
	overflow:hidden;
}

#sec1 .vis .logo{
	position:absolute;
	top:50%;
	left:50%;
	width:27.8%;
	height:auto;/*36%*/
	/*
	max-width:178px;
	*/
	margin-top:-26%;
	margin-left:-13.9%;/*-89px*/
}
#sec1 #para2{
	background: url("../img/sec1-v2.jpg") no-repeat 0 0;
	background-size:100% auto;
	
}
#sec1 #para3{
	background: #959fa8;
	
}


#sec1 .textSet{
	width:50%;
	min-width:440px;
	height:auto;
	position:absolute;
	top:0;
	left:50%;
}
#sec1 .textSet h3{
	margin:65px 0 36px 50px;
}
#sec1 .textSet p.bodyText{
	margin-left:50px;
}
/*クリームイラスト*/
#sec1 .illustCream{
	position:absolute;
	top:20%;
	right:2%;
	width:33%;
	max-width:350px;
	height:auto;
	z-index:90;
}





/*セラミドボタン*/
#ceramideTrigger{
	position:absolute;
	width:22.86%;/*22.86%*/
	height:auto;
	bottom:0;
	right:0;
	border-radius:50%;
	background-color:#0f74b4;
	overflow:hidden;
		
}
#ceramideTrigger img{width:100%; height:auto;}

#ceramideTrigger img.txt,
#ceramideTrigger img.bg{
	position:absolute; top:0; left:0; 
}
#ceramideTrigger img.bg{
	/*--------------------Loop animation*/
	border-radius:50%;
	overflow:hidden;
	
	-webkit-animation:ceramideAnm 3s ease-out infinite;
	animation:ceramideAnm 3s ease-out infinite;
	
}

/* Chrome, Safari, Opera */
@-webkit-keyframes ceramideAnm {
    0%	{opacity:0;}
		50%	{opacity:1.0;}
    100%	{opacity:0;}
}

/* Standard syntax */
@keyframes ceramideAnm {
    0%	{opacity:0;}
		50%	{opacity:1.0;}
    100%	{opacity:0;}
}

#sec1 .logoGry{
	float:right;
	margin-left:5%;
	width:25.36%;
	max-width:142px;
	height:auto;
}


/*-------------------------------------------modal*/

#ceramideContent{
	
	/*HIDE*/
	
	display:none;
	
	
}
#ceramideContent .ceramideWrap{
	
	background-color:#0f74b4 !important;
	width:100%;
	padding-top:8%;
	margin-bottom:20px;
	
	
}


#ceramideContent .btnClose{
	width:100%;
	text-align:center;
	padding:5% 0;
}


#ceramideContent h3{
	width:70%;
	display:block;
	margin-left:9%;
	margin-bottom:0;
	
}

#ceramideContent .visWrap{
	width:100%;

}
#ceramideContent .ceramide{
	width:50%;
	float:left;
	text-align:center;
	margin:0;
}
#ceramideContent .ceramide p{
	text-align:left;
	color:#FFF;
	padding:0 8%;
	font-size:0.8em;
	line-height:1.4;
}

#ceramideContent .ceramide img{
	width:66.25%;
	height:auto;
	
}
#ceramideContent .ceramide h4 img{
	width:80%;
	margin: 0.6em auto 0.4em auto;
}





/*---------------------------------------KOSEが発見*/

#sec1 .hakkenSet{
	width:100%;
	margin-bottom:65px;
}

#sec1 .hakkenSet .nutshell{
	width:100%;
	margin:0 0 0.5% 0;
	height:auto;
	overflow:hidden;
	position:relative;
	background:#ebebeb url(../img/sec1-skincare-bg-v.png) no-repeat;
	background-size:auto auto;
	
	
		

}
#sec1 .hakkenSet#hakkenSkincare .nutshell.hakken1{
	background-position:-40% 50%;
		-webkit-animation:nutshellDefault1 1.5s ease-out forwards;
		animation:nutshellDefault1 1.5s ease-out forwards;
}
#sec1  .hakkenSet#hakkenSkincare .nutshell.hakken2{
	background-image:url(../img/sec1-skincare-bg-h.png);
	background-position:50% 50%;
	
			-webkit-animation:nutshellDefault2 1.5s ease-out forwards;
		animation:nutshellDefault2 1.5s ease-out forwards;

}

#sec1  .hakkenSet#hakkenSkincare .nutshell.hakken3{
	background-position:120% 30%;
	margin-right:0;
		-webkit-animation:nutshellDefault3 1.5s ease-out forwards;
		animation:nutshellDefault3 1.5s ease-out forwards;

}
#sec1 .hakkenSet .nutshell img.full{
	width:100%; height:auto;
}
#sec1 .hakkenSet .nutshell img.abs{
	position:absolute;
	top:0;
	left:0;
}
#sec1 .hakkenSet .nutshell .accContents{
	width:100%;
	height:auto;
	display:none;/*--------------------------------------should be hidden by js*/
}
#sec1 .hakkenSet .nutshell .accContents p{
	padding:0 8% 8% 8%;
}
#sec1 .hakkenSet .nutshell .icon{
	position:absolute;
	bottom:4%;
	right:3%;
	width:8%;/*43px*/
	height:auto;
	background: url("../img/icon-plus-blue.png") no-repeat 0 0;
	background-size:100% auto;
}

#sec1 .hakkenSet .nutshell .icon .iconArea{
	width:100%; height:auto;
}
#sec1 #hakkenSkincare.hakkenSet .nutshell .accContents p{
	color:#0084cd;
}
#sec1 #hakkenSkincare.hakkenSet .nutshell .accContents{
	
}

#sec1 .hakkenSet#hakkenAging{
	clear:both;
}
#sec1 .hakkenSet#hakkenAging .nutshell.hakken1{
	background-image:url(../img/sec1-aging-bg1.png);
	
	background-position:-40% 50%;
		-webkit-animation:nutshellDefault1 1.5s ease-out forwards;
		animation:nutshellDefault1 1.5s ease-out forwards;

}
#sec1 .hakkenSet#hakkenAging .nutshell.hakken2{
	background-image:url(../img/sec1-aging-bg2.png);
	background-position:50% 50%;
	
			-webkit-animation:nutshellDefault2 1.5s ease-out forwards;
		animation:nutshellDefault2 1.5s ease-out forwards;

}

#sec1 .hakkenSet#hakkenAging .nutshell.hakken3{
	background-image:url(../img/sec1-aging-bg3.png);

	background-position:120% 30%;
	margin-right:0;
		-webkit-animation:nutshellDefault3 1.5s ease-out forwards;
		animation:nutshellDefault3 1.5s ease-out forwards;

}


#sec1 .hakkenSet#hakkenAging .nutshell .icon{
	position:absolute;
	bottom:4%;
	right:3%;
	width:8%;/*43px*/
	height:auto;
	background: url("../img/icon-plus-orange.png") no-repeat 0 0;
	background-size:100% auto;
	
	
		
}
#sec1 #hakkenAging.hakkenSet .nutshell .accContents p{
	color:#ff7800;
}

#sec1 .hakkenSet .nutshell.active .icon{
	background-position: 0 100%!important;
}


#sec1 .hakkenSet .nutshell:hover {
	cursor:pointer;		
}

/*
#sec1 .hakkenSet .nutshell:hover .icon{
		-webkit-animation:iconHover 0.2s ease-out forwards;
		animation:iconHover 0.2s ease-out forwards;
		
}
*/

#sec1 .hakkenSet#hakkenSkincare .nutshell.active,
#sec1 .hakkenSet#hakkenAging .nutshell.active {
		-webkit-animation:nutshellActive 1.5s ease-out forwards;
		animation:nutshellActive 1.5s ease-out forwards;
		
		
}
/* Chrome, Safari, Opera */
@-webkit-keyframes nutshellActive {
    0%	{background-size: 100% auto; background-position:-40% 50%;}
    100%	{background-size: 200% auto;background-position:50% 50%;}
}

/* Standard syntax */
@keyframes nutshellActive {
    0%	{background-size: 100% auto; background-position:-40% 50%;}
    100%	{background-size: 200% auto;background-position:50% 50%;}
}

@-webkit-keyframes nutshellDefault1 {
    0%	{background-size: 200% auto; background-position:50% 50%;}
    100%	{background-size: auto auto; background-position:-40% 50%;}
}

/* Standard syntax */
@keyframes nutshellDefault1 {
    0%	{background-size: 200% auto;background-position:50% 50%;}
    100%	{background-size: auto auto; background-position:-40% 50%;}
}

@-webkit-keyframes nutshellDefault2 {
    0%	{background-size: 200% auto;}
    100%	{background-size: auto auto;}
}

/* Standard syntax */
@keyframes nutshellDefault2 {
    0%	{background-size: 200% auto;}
    100%	{background-size: auto auto;}
}

@-webkit-keyframes nutshellDefault3 {
    0%	{background-size: 200% auto; background-position:50% 50%;}
    100%	{background-size: auto auto; background-position:120% 30%;}
}

/* Standard syntax */
@keyframes nutshellDefault3 {
    0%	{background-size: 200% auto;background-position:50% 50%;}
    100%	{background-size: auto auto; background-position:120% 30%;}
}


@-webkit-keyframes iconHover {
    0%	{transform: scale(1);}
    100%	{transform: scale(1.3);}
}

/* Standard syntax */
@keyframes iconHover {
    0%	{transform: scale(1);}
    100%	{transform: scale(1.3);}
}


/*-----------------------------------------------------sec2 */

#sec2{
	padding-top:10%;
	margin-bottom:15%
}

#sec2 h2{}
#sec2 p.lead{margin:10% 0;}

#sec2 h2 img,
#sec2 p.lead img{
	width:100%;
	height:auto;
}
#sec2 .visualSet{
	position:relative;
}

#sec2 .vis.fullContainer{position:relative;}

#sec2 .vis.fullContainer .onethird{
	width:100%;
	height:auto;
	position:relative;
	overflow:hidden;
	margin-bottom:0.2%;
}

#sec2 .vis.fullContainer img{
	width:100%;
	height:auto;
}
#sec2 .illust{
	position:absolute;
	top:10%;
	right:3%;
	width:50%;
	max-width:251px;
	height:auto;
	z-index:90;
}
#sec2 .illust img{
	width:100%;
	height:auto;
}
/*-----------------------------------------------------sec2 - 3つの発酵エキス */

#sec2feature{
	margin:80px auto auto auto;
	position:relative;
}
#sec2feature .fig{
	width:92.86%;
	height:auto;
	margin:0 auto;
	padding-top: 2em;
}
#sec2feature .fig h4{
	width:80%;
	margin:0 auto 2em;;
}

#sec2feature .fig .animationArea{
	width:100%;
	height:auto;
	position:relative;
}
#sec2feature .fig img{
	width:100%;
	height:auto;
}
#sec2feature .fig .animationArea .elm{
	position:absolute;
	width:22.85%;
}
#sec2feature .fig .animationArea .elm1{top:0; left:38.46%;}
#sec2feature .fig .animationArea .elm2{top:29.38%; left:77.15%;}
#sec2feature .fig .animationArea .elm3{bottom:0; left:61.76%;}
#sec2feature .fig .animationArea .elm4{bottom:0; left:15.84%;}
#sec2feature .fig .animationArea .elm5{top:29.38%; left:0;}
#sec2feature .fig p{
	display:block;
	width:73.57%;
	margin:0 auto;
	text-align:center;
	margin-bottom:10%;
}

#sec2feature .feature{
	margin-bottom:52px;
}
#sec2feature .feature .headerWrap{margin-bottom:34px;}

#sec2feature .feature .icon,
#sec2feature .feature .nutshell .thumb{
	width:20%;
	height:auto;
	margin-right:3%;
display: inline-block;
vertical-align: middle;
*zoom: 1; /* IE6-7 */
*display: inline; /* IE6-7 */
}
#sec2feature .feature.feature2 .icon,
#sec2feature .feature.feature2 .nutshell .thumb{
vertical-align: top;
}

#sec2feature .feature h3,
#sec2feature .feature .nutshell p{
display: inline-block;
vertical-align: middle;
width:75%;
*zoom: 1; /* IE6-7 */
*display: inline; /* IE6-7 */
}


#sec2feature .feature h3 img,
#sec2feature .feature .nutshell .smallheader img,
#sec2feature .feature .nutshell p img{
	width:100%;
	height:auto;
}
#sec2feature .feature .nutshell{
	width:100%;
	margin-bottom:10%;
	vertical-align:middle;
}

#sec2feature .feature .nutshell .text{
	font-size:0.8em;
	line-height:1.4;
	display:block;
}







/*-----------------------------------------------------sec3 */

#sec3{ position:relative;
width:100%;
overflow:hidden;
}

#sec3 h2{
}
#sec3 h3{
	margin-bottom:10%;
}
#sec3 h2 img,
#sec3 h3 img,
#sec3 .vis.drop img{
width:100%;
height:auto;

}
#sec3 p{
	margin-bottom:10%;
}


#sec3A p{
	margin-top:75%;
}
#sec3 .inner.narrow{
	margin-bottom:10%;
}

#sec3 .vis.drop{position:absolute;top:150px; right:0; width:56.8125%}

#sec3 .vis .half{width:100%; height:auto; overflow:hidden; margin-bottom:0.4%}
#sec3 .vis .half img{width:100%; height:auto;}


#sec3B{margin:20% auto;}
#sec3B .vis{margin-bottom:10%;}



/*-----------------------------------------------------sec4 */

#sec4{
	width:100%;
	margin:0 auto 65px;
}
#sec4 img.fit{
	width:100%;
	height:auto;
}
#sec4 h2{
	width:89.3%;
	margin:0 auto 4.8%;
}
#sec4 .series{
	width:100%;
	margin-bottom:0.2%;
	position:relative;
	overflow: hidden;
    display: block;
}

#sec4 .series h3,
#sec4 .series p,
#sec4 .series .cta{
	position: absolute;
	display: block;
}
#sec4 .series h3{
	left: 6.13%;
	top:12.69%;
}
#sec4 .series p.copy{
	left: 6.13%;
	top:29.23%;
}
#sec4 .series p.sub{
	left: 6.13%;
	top:48.71794872%;
}
#sec4 .series .cta{
	left: 50%;
	bottom:7.6%;
	width: 40%;
	background-color: rgba(0,66,95,1.00);
	border-radius: 36px;
	margin-left: -20%;
}

#sec4 .series.hadajun{background-color:#bde6ff;}
#sec4 .series.katsujun{background-color:#fffadd;}
/*#sec4 .series.sumihada{background-color:#f4f7f8;}*/
#sec4 .series.hadajunbihaku{background-color:#fff;}
#sec4 .series.tsuyashizuku{background-color:#f8e9db;}


#sec4 .series.hadajun h3{width: 25.33%;}
#sec4 .series.katsujun h3{width: 24.93%;}
/*#sec4 .series.sumihada h3{width: 25.73%;}*/
#sec4 .series.hadajunbihaku h3{width: 47.06%;}
#sec4 .series.tsuyashizuku h3{width: 49.6%;}

#sec4 .series.hadajun p.copy{width: 24.53%;}
#sec4 .series.katsujun p.copy{width: 44.66%;}
/*#sec4 .series.sumihada p.copy{width: 46.66%;}*/
#sec4 .series.hadajunbihaku p.copy{width: 46.53%;}
#sec4 .series.tsuyashizuku p.copy{width: 33.6%;}

#sec4 .series.hadajun p.sub{width: 45.33333333%;}
#sec4 .series.katsujun p.sub{width: 45.06666667%;}
/*#sec4 .series.sumihada p.sub{width: 51.06666667%;}*/
#sec4 .series.hadajunbihaku p.sub{width: 37.6%;}
#sec4 .series.tsuyashizuku p.sub{width: 48.0%;}