@charset "UTF-8";

/* learn-more-uv css */
/*------------------------------------------------------------------------
Basic Layout (PC Layout)
------------------------------------------------------------------------*/

article.clm_body {
	border-bottom: 1px solid #b5dcff;
	padding-bottom: 30px;
	margin-bottom: 60px;
}
.nvNavWrapper {
	height: 65px;
	margin-bottom: 60px;
}

#uvNav {
	margin-bottom:60px;
	padding-top:5px;
	height:65px;
	background:url(common/bg_uv_nav.png) repeat-x left top;
	text-align:center;
	position: relative;
	z-index: 9999;
}

.nvNavWrapper #uvNav {
	margin-bottom:0;
}

#uvNav ul {
	overflow: hidden;
	width: 940px;
	margin: 0 auto;
}
#uvNav li {
	display:block;
	float: left;
}

#uvNav li a {
	display:inline-block;
	width:223px;
	height:60px;
	text-indent:-9999px;
	font-size: 1.6rem;
}

#uvNav .btnProductList a {
	width:224px;
}

#uvNav .btnApproach a:link,#uvNav .btnApproach a:visited {
	background:url(common/btn_approach.png) no-repeat left top;
}

#uvNav .btnColumnList a:link,#uvNav .btnColumnList a:visited {
	background:url(common/btn_column_list.png) no-repeat left top;
}

#uvNav .btnProductList a:link,#uvNav .btnProductList a:visited {
	background:url(common/btn_product.png) no-repeat left top;
}

#uvNav .btnHistory a:link,#uvNav .btnHistory a:visited {
	background:url(common/btn_history.png) no-repeat left top;
}

#uvNav .btnApproach a:hover,#uvNav .btnApproach a:active,#uvNav .btnApproach a.current:link,#uvNav .btnApproach a.current:visited,#uvNav .btnApproach a.current:hover,#uvNav .btnApproach a.current:active {
	background:url(common/btn_approach_over.png) no-repeat left top;
}

#uvNav .btnColumnList a:hover,#uvNav .btnColumnList a:active,#uvNav .btnColumnList a.current:link,#uvNav .btnColumnList a.current:visited,#uvNav .btnColumnList a.current:hover,#uvNav .btnColumnList a.current:active {
	background:url(common/btn_column_list_over.png) no-repeat left top;
}

#uvNav .btnProductList a:hover,#uvNav .btnProductList a:active {
	background:url(common/btn_product_over.png) no-repeat left top;
}

#uvNav .btnHistory a:hover,#uvNav .btnHistory a:active,#uvNav .btnHistory a.current:link,#uvNav .btnHistory a.current:visited,#uvNav .btnHistory a.current:hover,#uvNav .btnHistory a.current:active {
	background:url(common/btn_history_over.png) no-repeat left top;
}

/* top
---------------------------------------------------------- */
.mainimg01 {
	width:100%;
}

.mainimg01 img {
	margin:0 auto;
}

.columnListtop {
	padding-top: 60px;
}

#columnList.boxList01 li {
	margin:0 15px 15px 0;
}

#columnList.boxList01 li.lastchild {
	margin-right:0;
}

#columnList .columnBox {
	position:relative;
	border:1px solid #7a7a7a;
}

#columnList .columnBox .image {
	padding:2px;
}

#columnList .columnBox .ribbon {
	position:absolute;
	top:-4px;
	left:8px;
}

#columnList .columnBox .detail {
	padding:15px;
}

#columnList .columnBox .detail h3 {
	margin:0 0 20px;
	font-size:15px;
}

#columnList .columnBox .detail p {
	color:#000;
	font-size:12px;
}

/* uv_column
---------------------------------------------------------- */
.uv_column {
	margin:0 0 60px;
	padding:0 0 50px;
	border-bottom:2px solid #666;
}

.uv_column_lastchild {
	margin-bottom:0;
	padding-bottom:20px;
	border-bottom:none;
}

.uv_column_wrapper {
	margin:0 auto;
	width:940px;
}

.uv_column .h2_uv_column_title,.uv_column .h3_uv_column_title,.uv_column .h2_uv_column_basic {
	margin-bottom:35px;
	padding-top:60px;
	background:url(common/bg_column_sun.png) no-repeat center top;
	color:#00a2ff;
	text-align:center;
	font-weight:700;
	font-size:3rem;
	font-family:"游ゴシック体","Yu Gothic",YuGothic,sans-serif;
	line-height:1.5;
}

.uv_column .h2_uv_column_title strong {
	color:#686868;
}

.uv_column .h2_uv_column_title span {
	display:block;
	padding-top:8px;
	font-size:1.4rem;
}

.uv_column .h3_uv_column_title span {
	display:block;
	padding:0 10px;
	color:#686868;
	text-align:center;
	font-weight:700;
	font-size:1.8rem;
	font-family:"游ゴシック体","Yu Gothic",YuGothic,sans-serif;
}

.uv_column .h3_uv_column_basic {
	margin-bottom:35px;
	padding-top:50px;
	color:#00a2ff;
	text-align:center;
	font-weight:700;
	font-size:1.8rem;
	font-family:"游ゴシック体","Yu Gothic",YuGothic,sans-serif;
	line-height:1.5;
}

.uv_column .h3_uv_column_basic strong {
	display:block;
	padding:10px 10px 0;
	background:#FFF;
	background:url(common/bg_column_line.png) repeat-x 50% 70%;
}

.uv_column .h3_uv_column_basic strong span {
	padding:0 10px;
	background:#FFF;
	color:#686868;
	text-align:center;
	font-weight:700;
	font-size:122.3%;
	font-family:"游ゴシック体","Yu Gothic",YuGothic,sans-serif;
	line-height:1.5;
}

.uv_column p {
	margin-bottom:25px;
	font-size: 1.6rem;
	line-height:1.8;
}

.uv_column .bordered {
	display:inline-block;
	border:1px solid #666;
}

.uv_column .image-c {
	clear:both;
	margin:40px auto 10px;
	text-align:center;
}

.uv_column .image-c img {
	display:inline;
}

.uv_column .image-c img.img_fix {
	width:50%;
}

.uv_column .uv_column_num_list01 li {
	position:relative;
	padding-left:1.75em;
}

.uv_column .uv_column_num_list01 li span {
	position:absolute;
	left:0;
}

.uv_column .uv_column_def_type01 dt {
	margin-bottom:15px;
	color:#00a2ff;
	font-weight:700;
	font-size:1.8rem;
}

.uv_column .uv_column_def_type01 dd {
	margin-bottom:30px;
	font-size:1.6rem;
}

.uv_column table {
	margin:0 auto;
	padding:0;
	width:auto;
	border-spacing:0;
	border-collapse:collapse;
	color:#666;
	text-align:left;
}

.uv_column table th,.uv_column table td {
	padding:10px;
	border:2px solid #fff;
	background:#e0efff;
}

.uv_column table .bg01 {
	background:#ffffe0;
}

.uv_column table .bg02 {
	background:#fff3f3;
}

.uv_column table th {
	text-align:center;
}

.uv_column table .th01 {
	background:#cacaff;
}

.uv_column table .th02 {
	background:#ffffb8;
}

.uv_column table .th03 {
	background:#ffe0e9;
}

.uv_column .notice1 {
	text-align:center;
	font-weight:400;
	font-size:87%;
}

.uv_column .uv_column_def_ex {
	overflow:hidden;
	width:40%;
	background:#F6F6F6;
	font-size: 14px;
}

.uv_column .uv_column_def_ex dt {
	float:left;
	padding:15px 20px 15px 30px;
	width:3rem;
	height:45px;
	background:#EDEDED;
	line-height:45px;
	box-sizing: content-box;
}

.uv_column .uv_column_def_ex dd {
	float:left;
	padding:15px 20px 15px 30px;
	height:45px;
	background:#F6F6F6;
	box-sizing: content-box;
}

.uv_column_recommend {
	position:relative;
	overflow:hidden;
	margin:0 auto;
	padding:50px 45px;
	width:846px;
	border:2px solid #555;
}

.uv_column_recommend dl dt {
	margin-bottom:15px;
	color:#626262;
	font-weight:700;
	font-size:1.7rem;
}

.uv_column_recommend dl dd {
	margin-bottom:30px;
}

.uv_column_recommend_box .imgProduct01 {
	float:left;
	width:140px;
}

.uv_column_recommend_box .boxProduct01 {
	margin-left:180px;
}

.uv_column_recommend_box .boxTtl01 {
	margin-bottom:10px;
	font-weight:700;
	font-size:1.8rem;
}

.uv_column_recommend_box .txtDetail01 {
	margin-bottom:6px;
	padding-top:15px;
	color:#1258b2;
	font-weight:700;
}

.uv_column_recommend_box .txtLink {
	position:absolute;
	bottom:55px;
	left:225px;
}

.uv_column_recommend_box .txtLink a {
	padding-left:15px;
	background:url(common/bg_column_right_arrow.png) no-repeat left center;
}

.btn_column_top {
	clear: both;
	margin:30px auto 30px;
	text-align:center;
}

.btn_column_top img {
	display:inline;
}

.btn_column_top span {
	display:none;
}

/* history
---------------------------------------------------------- */
.history{
	font-size: 14px;
	font-weight: normal;
}
.history .btnbox_pageback.box-header{
	max-width: 1000px;
	width: 100%;
	margin: -30px auto 0;
	padding: 0 20px;
}
.history .sp {
	display: none;
}
.history .uv_column {
	margin:0;
	padding:0 0 50px;
	border-bottom: none;
}
.history .uv_column h2 {
	background: none;
	padding-top: 0;
	margin-bottom: 25px;
}
.history .uv_column p {
	text-align: center;
}
.history .btn_column_top {
	margin-top: 75px;
}
.history .history_content .ttl {
	background: #023692;
	text-align: center;
}
.history .history_content .ttl h3 {
	width: 940px;
	margin: 0 auto;
	display: table;
}
.history .history_content .ttl.img h3 {
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 120px;
}
.history .history_content .ttl h3 span {
	display: table-cell;
	vertical-align: middle;
	height: 120px;
	line-height: 1.6;
	font-size: 1.8rem;
	font-weight: bold;
	color: #fff;
}
.history .history_content .inner {
	width: 940px;
	margin: 0 auto;
	background: url(history/bg_line01.png) repeat-y center top;
	position: relative;
}
.history .history_content .age {
	width: 420px;
	position: absolute;
	top: 45px;
	opacity: 0;
}

.history .history_content .age.left {
	left: 0;
}
.history .history_content .age.right {
	right: 0;
}
.history .history_content .age .txt_age {
	margin-bottom: 20px;
	margin-top: 30px;
}
.history .history_content .age.left .txt_age {
	text-align: right;
	margin-right: -55px;
	padding-right: 55px;
	background: url(history/bg_age01.png) no-repeat right 27px;
}
.history .history_content .age.right .txt_age {
	margin-left: -54px;
	padding-left: 54px;
	background: url(history/bg_age02.png) no-repeat left 27px;
}
.history .history_content .age .txt_age img {
	display: inline-block;
	width: auto;
	height: 36px;
}
.history .history_content .age .box + .box {
	margin-top: 30px;
}
.history .history_content .age .box .name {
	color: #023692;
	font-weight: bold;
	font-size: 1.8rem;
	margin-bottom: 15px;
}
.history .history_content .age.left .box .name {
	text-align: right;
}
.history .history_content .age .box .img {
	position: relative;
}
.history .history_content .age .box .img > img {
	border: 4px solid #c6d5e4;
	border-radius: 8px;
	max-width: inherit;
	width: 100%;
	box-sizing: border-box;
}
.history .history_content .age .box .balloon {
	width: 80px;
	position: absolute;
	top: -10px;
	right: -10px;
}
.history .history_content .age .box .txt {
	margin-top: 10px;
}
.history .history_content .age .box .txt sup {
	font-size: 50%;
}
.history .history_content .age .box .txt .notes {
	margin-top: 2px;
	display: block;
	font-size: 1rem;
}

/* sunburn */
.history #sunburn .ttl.img h3 {
	background-image: url(history/img_sunburn.jpg);
}
.history #sunburn .inner {
	min-height: 890px;
}
.history #sunburn #age1993 {
	top: 213px;
}

/* whitening */
.history #whitening .ttl.img h3 {
	background-image: url(history/img_whitening.jpg);
}
.history #whitening .inner {
	min-height: 860px;
}
.history #whitening #age2004 {
	top: 285px;
}
.history #whitening #age2005 {
	top: 789px;
}

/* spf50 */
.history #spf50 .inner {
	min-height: 1175px;
}
.history #spf50 #age2008 {
	top: 157px;
}

/* uvcare */
.history #uvcare{
	margin: 0 0 80px;
}
.history #uvcare .ttl.img h3 {
	background-image: url(history/img_uvcare.jpg);
}
.history #uvcare .inner {
	min-height: 770px;
}
.history #uvcare #age2016 {
	top: 213px;
}


/*----------------------- BREAK POINT ------------------------------------
Tablet Layout
------------------------- BREAK POINT ----------------------------------*/
@media screen and (max-width:768px) {
	.nvNavWrapper {
		height: auto;
	}

	#uvNav {
		margin-bottom:35px;
		padding-top:15px;
		padding-bottom:15px;
		height:auto;
		border-top:1px solid #666;
		border-bottom:1px solid #666;
		background:#fff300;
		background-image:none;
		box-shadow:0 0 0 2px #fff300,0px 0 0 1px #666,0px 0 0 5px gray;
		text-align:center;
		position: relative !important;
	}

	.nvNavWrapper #uvNav {
		margin-bottom:0;
	}

	#uvNav ul {
		width: auto;
	}

	#uvNav li {
		display:block;
		margin:0 15px;
		border-top:1px solid #666;
		float: none;
	}

	#uvNav li:last-child {
		border-bottom:1px solid #666;
	}

	#uvNav li a {
		width:auto!important;
		height:40px;
		background:url(common/bg_uv_nav02.png) no-repeat left center!important;
		background-size:7px 10px!important;
		text-indent:18px!important;
		line-height:40px;
	}

	#uvNav li a:link,#uvNav li a:visited,#uvNav li a:hover,#uvNav li a:active {
		color:#333;
	}

	.uv_column {
		margin:0 0 30px;
		padding:0 0 30px;
	}

	.uv_column_lastchild {
		margin-bottom:0;
		padding-bottom:20px;
	}

	.uv_column_wrapper {
		margin:0 5%;
		width:90%;
	}

	.uv_column .h2_uv_column_title,.uv_column .h3_uv_column_title,.uv_column .h2_uv_column_basic {
		margin-bottom:25px;
		padding-top:50px;
		background:url(common/bg_column_sun_sp.png) no-repeat center top;
		background-size:70px 40px;
		font-size:2rem;
	}

	.uv_column .h3_uv_column_basic {
		margin-bottom:25px;
		padding-top:30px;
		color:#00a2ff;
		font-size:1.3rem;
	}

	.uv_column .h3_uv_column_basic strong {
		display:block;
		padding:5px 10px 0;
		background:#FFF;
		background:url(common/bg_column_line_sp.png) repeat-x 50% 70%;
		background-size:7px 11px;
	}

	.uv_column .h3_uv_column_basic strong span {
		display:inline-block;
		padding:0 10px;
		width:60%;
		font-size:115.4%;
	}

	.uv_column .image-c img.img_fix {
		width:70%;
	}

	.uv_column_recommend {
		margin:0 5%;
		padding:30px 5%;
		width:80%;
	}

	.uv_column_recommend_box .txtLink {
		position:relative;
		bottom:0;
		left:0;
		margin-top:20px;
	}


	/* history
	---------------------------------------------------------- */
	.history .sp {
		display: block;
	}
	.history .pc {
		display: none;
	}
	.history .uv_column {
		padding:0 0 25px;
	}
	.history .uv_column h2 {
		margin-bottom: 15px;
	}
	.history .uv_column p {
		font-size: 1.2rem;
		margin-bottom: 0;
	}
	.history .btn_column_top {
		margin-top: 30px;
	}
	.history .history_content .ttl {
		text-align: left;
	}
	.history .history_content .ttl h3 {
		width: auto;
		display: block;
		padding: 0 10px;
	}
	.history .history_content .ttl.img h3 {
		padding: 0 9px 0 89px;
		background-size: 80px;
	}
	.history .history_content .ttl h3 span {
		height: 80px;
		font-size: 1.3rem;
	}
	.history .history_content .inner {
		width: auto;
		margin: 0 11px 0 12px;
		padding: 28px 22px 35px 0;
		background: url(history/bg_line01_sp.png) repeat-y right top;
		background-size: 3px auto;
		min-height: auto !important;
	}
	.history #uvcare .inner {
		padding: 30px 22px 10px 0;
	}
	.history .history_content .age {
		width: auto;
		position: relative;
		top: inherit!important;
		margin-top: 0;
	}
	.history .history_content .age + .age {
		padding-top: 30px;
	}
	.history .history_content .age.left {
		left: 0!important;
	}
	.history .history_content .age.right {
		right: 0!important;
	}
	.history .history_content .age .txt_age {
		margin-bottom: 15px;
	}
	.history .history_content .age#age2005 .txt_age {
		margin-bottom: 0;
	}
	.history .history_content .age.left .txt_age {
		text-align: left;
		margin-right: -24px;
		padding: 0;
		background: url(history/bg_age01_sp.png) no-repeat right bottom;
		background-size: auto 8px;
	}
	.history .history_content .age.right .txt_age {
		margin-left: 0;
		margin-right: -24px;
		padding: 0;
		background: url(history/bg_age01_sp.png) no-repeat right bottom;
		background-size: auto 8px;
	}
	.history .history_content .age .txt_age img {
		height: 26px;
		border-right: 5px solid #fff;
		background: #fff;
	}
	.history .history_content .age .box + .box {
		margin-top: 25px;
	}
	.history .history_content .age .box .name {
		font-size: 1.5rem;
		margin-bottom: 10px;
	}
	.history .history_content .age.left .box .name {
		text-align: left;
	}
	.history .history_content .age .box .img {
		max-width: 400px;
		margin: 0 auto;
	}
	.history .history_content .age .box .img > img {
		border: 3px solid #c6d5e4;
	}
	.history .history_content .age .box .balloon {
		top: -15px;
		right: -15px;
	}
	.history .history_content .age .box .txt {
		font-size: 1.2rem;
	}
	.history .history_content .age .box .txt .notes {
		text-indent: -1em;
		margin-left: 1em;
	}


}

/*----------------------- BREAK POINT ------------------------------------
SP Layout
------------------------- BREAK POINT ----------------------------------*/
@media screen and (max-width:480px) {
	article.clm_body {
		padding-bottom: 2vw;
		margin-bottom: 6vw;
	}
	.nvNavWrapper {
		height: auto;
	}

	#uvNav {
		margin-bottom:35px;
		padding-top:15px;
		padding-bottom:15px;
		height:auto;
		border-top:1px solid #666;
		border-bottom:1px solid #666;
		background:#fff300;
		background-image:none;
		box-shadow:0 0 0 2px #fff300,0px 0 0 1px #666,0px 0 0 5px gray;
		text-align:center;
	}

	.nvNavWrapper #uvNav {
		margin-bottom:0;
	}

	#uvNav li {
		display:block;
		margin:0 15px;
		border-top:1px solid #666;
	}

	#uvNav li:last-child {
		border-bottom:1px solid #666;
	}

	#uvNav li a {
		width:auto!important;
		height:40px;
		background:url(common/bg_uv_nav02.png) no-repeat left center!important;
		background-size:7px 10px!important;
		text-indent:18px!important;
		line-height:40px;
	}

	#uvNav li a:link,#uvNav li a:visited,#uvNav li a:hover,#uvNav li a:active {
		color:#333;
	}

	#uvNav .btnApproach a.current:link,#uvNav .btnApproach a.current:visited,#uvNav .btnApproach a.current:hover,#uvNav .btnApproach a.current:active,#uvNav .btnColumnList a.current:link,#uvNav .btnColumnList a.current:visited,#uvNav .btnColumnList a.current:hover,#uvNav .btnColumnList a.current:active,#uvNav .btnHistory a.current:link,#uvNav .btnHistory a.current:visited,#uvNav .btnHistory a.current:hover,#uvNav .btnHistory a.current:active {
		background:url(common/bg_uv_nav03.png) no-repeat left center!important;
		background-size:7px 10px!important;
		color:#00a2ff;
		text-decoration:none;
	}

	.mainimg01 img {
		display:none;
	}

	.mainimg01 h1 {
		height:240px;
		background:url(vi_column_uv_sp.jpg) no-repeat center top;
		background-size:cover;
	}

	#columnList ul {
		width:100%;
		letter-spacing:-.4em;
	}

	#columnList.boxList01 li {
		margin:0 1% 4%;
		width:48%;
	}

	#columnList.boxList01 .detail {
		padding:10px;
	}

	.uv_column {
		margin:0 0 30px;
		padding:0 0 30px;
	}

	.uv_column_lastchild {
		margin-bottom:0;
		padding-bottom:20px;
	}

	.uv_column_wrapper {
		margin:0 5%;
		width:90%;
	}

	.uv_column .h2_uv_column_title,.uv_column .h3_uv_column_title,.uv_column .h2_uv_column_basic {
		margin-bottom:25px;
		padding-top:50px;
		background:url(common/bg_column_sun_sp.png) no-repeat center top;
		background-size:70px 40px;
		font-size:2rem;
	}

	.uv_column .h3_uv_column_title span {
		font-size:1.8rem;
	}

	.uv_column .h3_uv_column_basic {
		margin-bottom:25px;
		padding-top:30px;
		color:#00a2ff;
		font-size:1.5rem;
	}

	.uv_column .h3_uv_column_basic strong {
		display:block;
		padding:5px 10px 0;
		background:#FFF;
		background:url(common/bg_column_line_sp.png) repeat-x 50% 70%;
		background-size:7px 11px;
	}

	.uv_column .h3_uv_column_basic strong span {
		display:inline-block;
		padding:0 10px;
		width:80%;
		font-size:120%;
	}

	.uv_column .image-c {
		margin:20px auto;
	}

	.uv_column .image-c img.img_fix {
		width:100%;
	}

	.uv_column .uv_column_def_ex {
		width:auto;
	}

	.uv_column .uv_column_def_ex dt {
		float:left;
		padding:15px 10px 15px 20px;
		width:3rem;
		height:45px;
		line-height:45px;
	}

	.uv_column .uv_column_def_ex dd {
		float:left;
		padding:15px 10px 15px 20px;
		height:45px;
	}

	.uv_column_recommend {
		margin:0 5% 30px;
		padding:15px 5%;
		width:80%;
	}

	.uv_column_recommend dl dt {
		margin-bottom:15px;
		color:#626262;
		font-weight:700;
		font-size:1.7rem;
	}

	.uv_column_recommend dl dd {
		margin-bottom:20px;
	}

	.uv_column_recommend_box .imgProduct01 {
		float:none;
		margin:0 auto;
		width:50%;
		text-align:center;
	}

	.uv_column_recommend_box .imgProduct01 img {
		display:inline;
	}

	.uv_column_recommend_box .boxProduct01 {
		margin-left:0;
	}

	.uv_column_recommend_box .boxTtl01 {
		margin-bottom:10px;
		font-weight:700;
		font-size:1.7rem;
	}

	.uv_column_recommend_box .txtDetail01 {
		margin-bottom:6px;
		padding-top:15px;
		color:#1258b2;
		font-weight:700;
	}

	.uv_column_recommend_box .txtLink {
		position:relative;
		bottom:0;
		left:0;
		margin-top:5px;
	}

	.btn_column_top {
		margin:10px auto 20px;
		padding:15px 0;
		border:1px solid #cdd7e6;
		text-align:center;
		font-weight:700;
		font-size:1.7rem;
	}

	.btn_column_top span {
		display:inline;
		padding-left:15px;
		background:url(common/bg_column_left_arrow.png) no-repeat 0 .2em;
		background-size:6px 10px;
	}

	.btn_column_top img {
		display:none;
	}


	/* history
	---------------------------------------------------------- */
	.history .btnbox_pageback.box-header{
		margin: -30px 0 4vw 0;
	}
	/* uvcare */
	.history #uvcare{
		margin: 0 0 20px;
	}
}

@-webkit-keyframes fadeInUp {
	0% { -webkit-transform: scale(0.95); }
	100% { -webkit-transform: scale(1); }
}
@keyframes fadeInUp {
	0% { -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); }
	100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
}