@charset "utf-8";
/* CSS Document */


/* 固定 */
html { font-size: 62.5%; } 
html { scroll-behavior: smooth;}
body {
  margin: 0;
  padding: 0;
  position: relative;
-webkit-text-size-adjust: 100%; 
font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
		}

header{
    display:flex;
	height: 50px;
	width: 100%;
}
 
header div{
    display:flex;
	margin: 0 auto;
}
 
header div img{
    width: 50px;
	padding: 15px;
	margin-right: 10px;
}

		#main_wrap{
			width: 100%;
		}
		
		.cp{
			margin-top: 100px;
			font-size: 10px;
			color: #A2A2A2;
}


.pagetop a {
  color: #333;
  position: fixed;
  bottom: 24px;
  right: 80px;
  text-decoration: none;
  display: block;
  width: 100px;
  padding: 16px 20px;
  text-align: right;
  transform: rotate(90deg);
  transform-origin: bottom right;
	font-size: 15px;
	z-index: 9999;
}

.pagetop .arrow1 {
width: 48px;
height: 1px;
background: #333;
position: absolute;
top: 50%;
right: 62px;
}

.pagetop .arrow2 {
width: 1px;
height: 12px;
background: #333;
position: absolute;
top: calc(50% + 1px);
right: 109px;
transform: rotate(-130deg);
transform-origin: top left;
}

/* 固定 */




/* ここから編集 */
.mv_item{
			width: 100%;
			position: relative;
			z-index: -9999;
		}
.haikei img{
	width: 100%;
	height: 100%;
}
		.mv_item_maintitle{
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			z-index: 999;
		}
	.item_area{
		height: 100%;
		display: block;
		margin: 0 auto;
		max-width: 1200px;
		padding: 8rem 0 8rem;
		}
		.item_area img{
			display: block;
			width: 100%;
		}
		.mv_item_text_2{
			text-align: center;
			color: #2F2F2F;
  			font-size: 2.5rem;
  			font-weight: 600;
  			line-height: 2em;
		padding: 5rem 0;
		}

.center_item{
	text-align: center;
}
		.item_center{
		position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
		z-index: 9999;
		}
		
	.pc_none{
		display: none;
	}
	.pc_block{
	display: block;
	}
		.smp_haikei{
			display: none;
		}



/* --------------------------
スマホ
---------------------------- */

@media screen and (max-width: 640px) {

html { font-size: 50%; } 
			.haikei{
				display: none;
			}
			.smp_haikei{
				display: block;
				width: 100%;
			}
			.smp_haikei img{
				display: block;
				width: 100%;
			}

	.smp_none{
		display: none;
	}
	.smp_block{
	display: block;
	}
	.mv_item_maintitle {
			top: 0%;
			}
			
	.mv_item_maintitle img {
		width: 100vw;
			}
		
	.cosme_icon{
		display: block;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
		.mv_item_text_2{
  			font-size: 1.8rem;
  			line-height: 3.5rem;
		padding: 3rem 0;
		}

}

/* --------------------------
スマホ　END
---------------------------- */


/* 新着部分 */

.new-arrival-section {
  max-width: 1200px;
  margin: 5rem auto 12rem;
  padding: 0 10px;
}

.section-title {
  text-align: center;
  font-size: 3rem;
  letter-spacing: 0.1em;
  margin-bottom: 30px;
  font-weight: 600;
  color: #333;
	line-height: 140%;
}

.swiper {
  width: 100%;
padding: 2px 2px 50px 2px !important;
margin: -2px -2px 0 -2px;
box-sizing: border-box;

}

/* 常に3列にするための設定 */
.swiper-slide {
  height: auto;
  display: flex;
  flex-direction: column;
}

.swiper-slide a {
  text-decoration: none;
  color: #333;
  display: block;
  text-align: center;
}

/* カテゴリバッジ */
.item-cat {
  display: inline-block;
  font-size: 12px;
  background: #666;
  color: #fff;
  padding: 2px 8px;
  margin-bottom: 8px;
  border-radius: 2px;
}

/* 画像エリア（正方形維持） */
.img-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fdfdfd;
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid #f0f0f0;
}

.img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.3s;
}

.img-box img:hover { opacity: 0.8; }

/* SPF/PA スペック */
.spec-info {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 4px;
}

.spec-info span {
  font-size: 12px;
  font-weight: bold;
  border: 1px solid #ddd;
  padding: 1px 4px;
  color: #666;
}

/* テキスト情報 */
.brand-name {
  font-size: 12px;
  font-weight: bold;
  margin: 0 0 4px 0;
  text-transform: uppercase;
}

.item-name {
  font-size: 12px;
  line-height: 1.5;
  color: #666;
  height: 2.8em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ナビボタンのカスタマイズ */
.swiper-button-next, .swiper-button-prev {
  color: #999 !important;
  transform: scale(0.5);
}
.swiper-pagination-bullet-active {
  background: #333 !important;
}




/* UV特集商品掲載部分 */

.item_area_wrap{
background: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u40439387/pc/topics/uvcare/common/css/../img/deco_back_2.png) repeat-y left top;
background-size: 100% auto;
}
.mv_item_text_2{
background-color: #ffedc2;
background-image: url("https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u40439387/pc/topics/uvcare/common/css/../img/deco_back2_2.png");
background-repeat: repeat-y;
background-position: center top;
background-size: cover;
background-size: 80% auto;
}
	@media screen and (max-width: 800px) {
.mv_item_text_2{
background-size: 130% auto;
}
	}

	.about img{
	width: 800px;
	margin: 0 auto 8%;
	}
	@media screen and (max-width: 800px) {
	.about img{
	width: 100%;
	}
	}


/* テーマナビゲーション */

.theme_navi h2{
font-size: 3rem;
line-height: 140%;
text-align: center;
margin-bottom: 2rem;
}
.theme_navi h2 span, .new-arrival-section h2 span{
font-size: 2rem;
display: block;
font-weight: normal;
}

.theme_navi ul{
	display: flex;
	flex-wrap: wrap;
	margin: auto 2rem 10rem;
	}
	.theme_navi li{
	list-style: none;
 	width: calc(100% / 4);
	box-sizing: border-box;
 	padding: 1%;
	position: relative;
	}
	.theme_navi li a:after{
	content: "";
  position: absolute;
  right: 0;
  bottom: 5%;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  border-width: 15px 15px 0 15px;
	}
@media screen and (max-width: 1000px) {
	.theme_navi li{
 	width: calc(100% / 3);
 	padding: 2% 1%;
	}
	.theme_navi li a:after{
  bottom: 10%;
}
}
@media screen and (max-width: 800px) {
	.theme_navi li{
 	width: calc(100% / 2);
	}
}
@media screen and (max-width: 640px) {
	.theme_navi li a:after{
  bottom: 0;
  border-width: 12px 12px 0 12px;
	}
	.theme_navi li a:after{
  bottom: 5%;
}
}
	.theme_navi li a{
	display: block;
	padding: 7% 0 8%;
	color: #333;
	font-size: 1.8rem;
	line-height: 130%;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	border-radius: 8px;
	transition : 0.3s;
	}
	@media screen and (max-width: 640px) {
	.theme_navi li a{
	padding: 7% 0 10%;
	line-height: 120%;
}
}
	.theme_navi li a:hover{
	opacity: 0.5;
	}
	.theme_navi li a span{
	font-size: 1.3rem;
	display: block;
	font-weight: normal;
	}


/* 各テーマ */

section{
margin-bottom: 10%;
}
.title_area{
text-align: center;
position: relative;
z-index: 1;
}
.title_area:after {
content: url("https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u40439387/pc/topics/uvcare/common/css/../img/deco_uvcare.png");
position: absolute;
z-index: -1;
bottom: -30%;
right: 15%;
}
.title_area h3{
font-size: 5rem;
line-height: 130%;
}
.title_area h3 span{
font-size: 2.2rem;
display: block;
font-weight: normal;
}
.title_area p{
font-size: 1.7rem;
line-height: 200%;
width: 50%;
padding: 3rem 0;
border-top: 3px solid #333;
border-bottom: 3px solid #333;
margin: 2rem auto;
position: relative;
}
.title_area p:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}
.title_area p:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #333;
  z-index: 1;
}

/* バナーで表示 */
.banner_list{
display: flex;
flex-wrap: wrap;
font-size: 1.8rem;
line-height: 160%;
	margin: 4%;
}
.banner_list li{
 box-sizing: border-box;
 width: calc(100% / 2);
 padding: 2% 1%;
 list-style: none;
 }
 .banner_list p{
 text-align: center;
 }
.banner_list li a{
 	transition : 0.3s;
}
 .banner_list li a:hover{
	opacity: 0.5;
	}
	@media screen and (max-width: 800px) {
.banner_list li{
 box-sizing: border-box;
 width: 100%;
 padding: 2% 1%;
 list-style: none;
 }

}


/* 商品１こ１こ */
.item_list{
display: flex;
flex-wrap: wrap;
font-size: 1.2rem;
line-height: 160%;
}
.item_list li{
 box-sizing: border-box;
 width: calc(100% / 4);
 padding: 3% 2%;
 list-style: none;
 display: flex;
 flex-direction: column;
	position: relative;
 }
 .item_p{
border-radius: 50% 50% 2% 2%;
position: relative;
 }
.theme_brown .item_p,.theme_navi .theme_brown a {
background: #b39855;
background: linear-gradient(120deg,rgba(255, 251, 200, 1) 0%, rgba(179, 152, 85, 1) 100%);
}
.theme_aqua .item_p,.theme_navi .theme_aqua a {
background: #8bdeec;
background: linear-gradient(120deg,rgba(255, 251, 200, 1) 0%, rgba(139, 222, 236, 1) 100%);
}
.theme_pink .item_p,.theme_navi .theme_pink a{
background: #FBB1CC;
background: linear-gradient(120deg,rgba(255, 251, 200, 1) 0%, rgba(251, 177, 204, 1) 100%);
}
.theme_red .item_p,.theme_navi .theme_red a{
background: #FDAB93;
background: linear-gradient(120deg,rgba(255, 251, 200, 1) 0%, rgba(253, 171, 147, 1) 100%);
}
.theme_green .item_p,.theme_navi .theme_green a{
background: #B4E5AE;
background: linear-gradient(120deg,rgba(255, 251, 200, 1) 0%, rgba(180, 229, 174, 1) 100%);
}
.theme_purple .item_p,.theme_navi .theme_purple a{
background: #C094E4;
background: linear-gradient(120deg,rgba(255, 251, 200, 1) 14%, rgba(192, 148, 228, 1) 100%);
}
.theme_blue .item_p,.theme_navi .theme_blue a{
background: #8BA9FF;
background: linear-gradient(120deg,rgba(255, 251, 200, 1) 14%, rgba(139, 169, 255, 1) 100%);
}
.theme_yellow .item_p,.theme_navi .theme_yellow a{
background: #FFD786;
background: linear-gradient(120deg,rgba(255, 251, 200, 1) 0%, rgba(255, 215, 134, 1) 100%);
}


 .item_p img{
 position: relative;
 top: 40px;
 }
 .item_d{
 margin: 50px 0 0;
 display: flex;
 flex-direction: column;
 }
 .item_list .message{
 font-size: 1.6rem;
 font-weight: 700;
 line-height: 150%;
 margin-bottom: 1.5rem;
 margin-top: 5rem;
 }
 .item_list .cate{
 border-top: 1px solid #333;
 border-bottom: 1px solid #333;
 text-align: center;
 font-size: 1.4rem;
 padding: 1rem 0;
 margin-bottom: 1.5rem;
 }
 .item_list .variation{
 background: rgba(255,255,255,0.70);
 border: 1px solid #333;
 border-radius: 50px;
 color: #333;
 position: absolute;
 right: 5%;
 width: 7rem;
 height: 7rem;
 text-align: center;
 justify-content: center;
 align-items: center;
 line-height: 7rem;
	}
 .item_list .spf span{
 display: inline-block;
 border: 1px solid #333;
 border-radius: 50px;
 padding: 0.3rem 1rem;
 font-size: 1.5rem;
 font-weight: bold;
 margin: 2% 1% 5%;
 }
 .item_list .big span{
 border-color: #ba5f64;
 color: #ba5f64;
}
 .item_list .middle span{
 border-color: #d4a933;
 color: #d4a933;
}
 .item_list .small span{
 border-color: #a4d776;
 color: #a4d776;
}
.item_list .page{
margin-top: auto;
}
.item_list .page a{
background-color: #333;
color: #fff;
display: block;
text-align: center;
text-decoration: none;
padding: 5%;
border-radius: 3px;
transition : 0.3s;
}
.item_list .page a:hover{
background-color: #8ccdec;
}


@media screen and (max-width: 1000px) {
html { font-size: 55%; } 

.title_area p{
width: 90%;
}
.title_area:after {
bottom: -30%;
right: 0%;
}
}

@media screen and (max-width: 640px) {
html { font-size: 50%; } 

.title_area:after {
content: url("https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u40439387/pc/topics/uvcare/common/css/../img/deco_uvcare_s.png");
position: absolute;
bottom: -20%;
right: 0%;
}
.title_area h3{
font-size: 4rem;
}

.title_area p{
width: 95%;
}
.item_list{
padding: 0 3%;
}
.item_list li{
 width: calc(100% / 2);
 padding: 5% 3%;
 }
}

/* 一覧ボタン */
.all_list{
margin-top: -3rem;
}
.all_list p{
font-size: 2rem;
text-align: center;
}
.all_list a{
display: block;
margin: 2% auto;
width: 50%;
background: #333;
font-size: 3.5rem;
font-weight: bold;
color: #fff;
padding: 3% 5%;
border-radius: 50px;
text-align: center;
text-decoration: none;
transition : 0.3s;
position: relative;
}
.all_list a:hover{
background-color: #8ccdec;
}
.all_list a::after{
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 5px);
    right: 30px;
    width: 6px;
    height: 6px;
    border: 2px solid;
    border-color: transparent transparent #FFF #FFF;
    transform: rotate(-135deg);
    transition: .3s;
}
.all_list a:hover::after{
    right: 20px;
}
@media screen and (max-width: 640px) {
.all_list{
margin-top: 0;
}

.all_list a{
width: 70%;
padding: 5% 5%;
}
}

/* UV特集商品掲載部分 */








.min_width{
	min-width: 80vw;
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time01{
animation-delay: 0.5s;
}

.delay-time02{
animation-delay: 1s;
}

.delay-time03{
animation-delay: 1.5s;
}

.delay-time04{
animation-delay: 2s;
}

.delay-time05{
animation-delay: 2.5s;
}

.delay-time06{
animation-delay: 3s;
}

.box{
	opacity: 0;
}

/*==================================================
動き自体の指定：今回は「ふわっ」
===================================*/

.fadeUp {
animation-name:fadeUpAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}


.fadeDown {
animation-name:fadeDownAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(0px);
  }

  to {
    opacity: 1;
	transform: translateY(-100px);
  }
}