@charset "UTF-8";
@keyframes arrow { 0% { transform: translate(0, 0); opacity: 1; }
  50% { transform: translate(0, 7px); opacity: 0; }
  51% { transform: translate(0, -7px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; } }
@keyframes slide2 { 0% { opacity: 0; }
  40% { opacity: 0; }
  50% { opacity: 1; }
  90% { opacity: 1; } }
@keyframes slide3-2 { 0% { opacity: 0; }
  20% { opacity: 0; }
  33% { opacity: 1; }
  87% { opacity: 1; }
  88% { opacity: 0; }
  100% { opacity: 0; } }
@keyframes slide3-3 { 0% { opacity: 0; }
  53% { opacity: 0; }
  66% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; } }
img[src$=".svg"] { width: 100%; }

a { color: inherit; }

#contents.contents_inner { padding: 0; }

.clearfix::after { display: block; content: ""; clear: both; }

#bestcosme_wrapper { color: #333; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "akzidenz-grotesk", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", arial, YuGothic, 游ゴシック, Meiryo, メイリオ, sans-serif; width: 100%; z-index: 1; line-height: 1; letter-spacing: .05rem; text-rendering: optimizeLegibility; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; }
#bestcosme_wrapper *::selection { background: #cdcdcd; }
#bestcosme_wrapper *::-moz-selection { background: #cdcdcd; }
#bestcosme_wrapper h1, #bestcosme_wrapper h2, #bestcosme_wrapper h3, #bestcosme_wrapper h4, #bestcosme_wrapper h5, #bestcosme_wrapper p, #bestcosme_wrapper ul, #bestcosme_wrapper li { line-height: inherit; letter-spacing: inherit; margin: 0; }
#bestcosme_wrapper img { width: 100%; }
#bestcosme_wrapper .obj-fit { object-fit: cover; object-position: center; font-family: 'object-fit: cover; object-position: center;'; }
#bestcosme_wrapper .smallsp { display: none; }
#bestcosme_wrapper .banner_bottom { width: 85%; text-align: center; display: block; margin: 0 auto;}
@media screen and (max-width: 374px) { #bestcosme_wrapper .smallsp { display: block; } }
#bestcosme_wrapper .largesp { display: block; }
@media screen and (max-width: 374px) { #bestcosme_wrapper .largesp { display: none; } }
#bestcosme_wrapper .button_soldout a { opacity: .4; pointer-events: none; font-size: 0; }
#bestcosme_wrapper .button_soldout a::before { display: block; content: "SOLD OUT"; font-size: 14px; letter-spacing: .05em; }
#bestcosme_wrapper .button_soldout a::after { display: none !important; }
#bestcosme_wrapper .imagearea { line-height: 0; }
#bestcosme_wrapper #top { position: relative; }
#bestcosme_wrapper #top .imagearea { position: relative; }
#bestcosme_wrapper #top .imagearea::after { display: block; content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #e8e9eb; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
#bestcosme_wrapper #top .textarea {text-align: center; }
#bestcosme_wrapper #top .textarea > * { opacity: 0; }
#bestcosme_wrapper #top .textarea .titlearea { position: absolute; left: 0; right: 0; bottom: 23.1%;}
#bestcosme_wrapper #top .textarea .titlearea h2 { font-size: 16px; letter-spacing: .1em; margin: 0 0 10px; }
#bestcosme_wrapper #top .textarea .titlearea h3 { font-size: 18px; letter-spacing: .05em; margin: 0 0 20px; }
#bestcosme_wrapper #top .textarea .titlearea .scroll { width: 15px; margin: 0 auto; }
#bestcosme_wrapper #top .textarea .titlearea .scroll a { display: block; }
#bestcosme_wrapper #top .textarea .titlearea .scroll a img { display: block; animation: arrow 2s linear 0s infinite; }
#bestcosme_wrapper #top .textarea .text { font-size: 14px; line-height: 1.57; letter-spacing: .05em; height: 130px; display: flex; justify-content: center; align-items: center; }
#bestcosme_wrapper #awards-container { padding: 0; }
#bestcosme_wrapper #awards-container .awards-product { padding: 0; }
#bestcosme_wrapper #awards-container .awards-product .single { padding: 30px 0; }
#bestcosme_wrapper #awards-container .awards-product .single .image-container { position: relative; opacity: 0; }
#bestcosme_wrapper #awards-container .awards-product .single .image-container .imagearea img { aspect-ratio: 1; }
#bestcosme_wrapper #awards-container .awards-product .single .image-container .imagearea .image-slider { position: relative; }
#bestcosme_wrapper #awards-container .awards-product .single .image-container .imagearea .image-slider li:nth-child(2) { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; }
#bestcosme_wrapper #awards-container .awards-product .single .image-container .awards-logo { position: absolute; }
#bestcosme_wrapper #awards-container .awards-product .single .image-container .awards-logo.product1-logo { width: 20%; right: 77%; top: 4%; }
#bestcosme_wrapper #awards-container .awards-product .single .image-container .awards-logo.#logo_cheek { width: 17%; }
#bestcosme_wrapper #awards-container .awards-product .single .image-container .awards-logo.product3-logo { width: 25.33%; left: 16.53%; top: 8%; }
#bestcosme_wrapper #awards-container .awards-product .single .image-container.is-show { opacity: 1; transition: opacity 1.2s ease 0s; }
#bestcosme_wrapper #awards-container .awards-product .single .image-container.is-show ul li:nth-child(2) { animation: slide2 6s linear 0s infinite; }
#bestcosme_wrapper #awards-container .awards-product .single .textarea { color: #3C3C3C; text-align: center; padding: 20px 17px 0; }
#bestcosme_wrapper #awards-container .awards-product .single .textarea .award { text-align: left; background: #eaeaea; margin: 0 20px 20px; padding: 20px 15px; opacity: 1; }
#bestcosme_wrapper #awards-container .awards-product .single .textarea .award ul { display: flex; flex-direction: column; row-gap: 10px; }
#bestcosme_wrapper #awards-container .awards-product .single .textarea .award ul li { display: flex; align-items: center; opacity: 0; }
#bestcosme_wrapper #awards-container .awards-product .single .textarea .award ul li .ranking { width: 115px; font-size: 18px; letter-spacing: .05em; overflow: hidden; }
#bestcosme_wrapper #awards-container .awards-product .single .textarea .award ul li .ranking span { font-size: 33px; display: inline-block; transform: translate(0, 10px); }
#bestcosme_wrapper #awards-container .awards-product .single .textarea .award ul li .title { flex: 1; font-size: 11px; line-height: 1.27; }
#bestcosme_wrapper #awards-container .awards-product .single .textarea .text-group > * { opacity: 0; }
#bestcosme_wrapper #awards-container .awards-product .single .textarea .text-group .description { font-size: 14px; line-height: 1.8; margin: 0 -15px 20px; padding-left: 15px; padding-right: 15px; text-align: left;}
#bestcosme_wrapper #awards-container .awards-product .single .textarea .text-group h5 { font-size: 16px; line-height: 1.5; margin: 0 0 10px; padding-top: 10px;}
#bestcosme_wrapper #awards-container .awards-product .single .textarea .text-group .detail { font-size: 15px; line-height: 1.5; margin: 0 0 15px; }
#bestcosme_wrapper #awards-container .awards-product .single .textarea .text-group .knowmore { width: 280px; max-width: 100%; height: 44px; margin: 0 auto; color: #ffffff; font-size: 13px; letter-spacing: .05em; }
#bestcosme_wrapper #awards-container .awards-product .single .textarea .text-group .knowmore a { height: 100%; display: flex; align-items: center; justify-content: center; background: #595959; position: relative; }
#bestcosme_wrapper #awards-container .awards-product .single .textarea .text-group .knowmore a::after { display: block; content: ""; position: absolute; top: 50%; right: 10px; transform: translate(0, -50%); border-left: solid 5px; border-top: solid 4px transparent; border-bottom: solid 4px transparent; }
#bestcosme_wrapper #awards-container .awards-product .single .textarea .text-group.is-show > * { opacity: 1; transition: opacity 1.5s ease 0s; }
#bestcosme_wrapper #awards-container .awards-product .single .textarea .text-group.is-show > *:nth-child(2) { transition-delay: 0.2s; }
#bestcosme_wrapper #awards-container .awards-product .single .textarea .text-group.is-show > *:nth-child(3) { transition-delay: 0.4s; }
#bestcosme_wrapper #awards-container .awards-product .single .textarea .text-group.is-show > *:nth-child(4) { transition-delay: 0.6s; }
#bestcosme_wrapper #awards-container .awards-product .single .textarea.is-show .award ul li { opacity: 1; transition: opacity 1.5s ease 0s; }
#bestcosme_wrapper #awards-container .awards-product .single .textarea.is-show .award ul li span { transform: none; transition: transform .6s ease .2s; }
#bestcosme_wrapper #awards-container .awards-product .single .textarea.is-show .award ul li:nth-child(2) { transition-delay: 0.1s; }
#bestcosme_wrapper #awards-container .awards-product .single .textarea.is-show .award ul li:nth-child(2) span { transition-delay: 0.3s; }
#bestcosme_wrapper #awards-container .awards-product .single .textarea.is-show .award ul li:nth-child(3) { transition-delay: 0.2s; }
#bestcosme_wrapper #awards-container .awards-product .single .textarea.is-show .award ul li:nth-child(3) span { transition-delay: 0.4s; }
#bestcosme_wrapper #awards-container .awards-product .single .textarea.is-show .award ul li:nth-child(4) { transition-delay: 0.3s; }
#bestcosme_wrapper #awards-container .awards-product .single .textarea.is-show .award ul li:nth-child(4) span { transition-delay: 0.5s; }
#bestcosme_wrapper #awards-container .group .awards-product.normal { background: #F6F6F6; padding-left: 37px; padding-right: 37px; }
#bestcosme_wrapper #awards-container .group .awards-product.normal .textarea { padding-left: 0; padding-right: 0; }
#bestcosme_wrapper #awards-container .group .awards-product.normal .textarea .award { margin-left: 0; margin-right: 0; }
#bestcosme_wrapper .message { position: relative; padding: 20px 0; }
#bestcosme_wrapper .message .textarea p { text-align: center; font-size: 14px; line-height: 1.71; letter-spacing: .1em; }
#bestcosme_wrapper.is-loaded { opacity: 1 !important; transition: opacity 2s ease 0s; }
#bestcosme_wrapper.is-loaded #top .imagearea::after { background: rgba(232, 233, 235, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: all 2s ease 1s; }
#bestcosme_wrapper.is-loaded #top .textarea .titlearea { opacity: 1; transition: opacity 1.5s ease 1s; }
#bestcosme_wrapper.is-loaded #top .textarea .text { opacity: 1; transition: opacity 1.5s ease 2s; }

@media screen and (max-width: 767px) { #bestcosme_wrapper .pc { display: none !important; } }
@media screen and (orientation: landscape) { #bestcosme_wrapper #top .imagearea::after { background: linear-gradient(90deg, #f4f4f6 0%, #d0cfd1 100%); }
  #bestcosme_wrapper #top .textarea { position: absolute; left: 0; width: 34.92%; top: 40%; transform: translate(0, -50%); background: none; padding: 0 0 3.66%; }
  #bestcosme_wrapper #top .textarea .titlearea { position: static; margin: 0 0 4.17%; }
  #bestcosme_wrapper #top .textarea .titlearea h2 { font-size: 1.3vw; letter-spacing: .15em; margin: 0 0 3.33%; }
  #bestcosme_wrapper #top .textarea .titlearea h3 { font-size: 1.8vw; letter-spacing: .1em; }
  #bestcosme_wrapper #top .textarea .titlearea .scroll { width: 2.5%; position: absolute; bottom: 0; left: 0; right: 0; }
  #bestcosme_wrapper #top .textarea .text { font-size: 1.2vw; line-height: 1.6; height: auto; }
  #bestcosme_wrapper.is-loaded #top .imagearea::after { background: linear-gradient(90deg, rgba(244, 244, 246, 0) 0%, rgba(208, 207, 209, 0) 100%); }
  #bestcosme_wrapper.is-loaded #top .textarea .text { transition-delay: 1.2s;} }
@media screen and (min-width: 768px) { a { -webkit-transition: opacity .3s; transition: opacity .3s; }
  .sp, .smallsp, .largesp { display: none !important; }
  .pc { display: block !important; }
  #bestcosme_wrapper .banner_bottom { width: 650px; text-align: center; display: block; margin: 0 auto;}
  #bestcosme_wrapper #awards-container .awards-product { padding: 20px 0 30px; }
  #bestcosme_wrapper #awards-container .awards-product .single { padding: 50px 0; }
  #bestcosme_wrapper #awards-container .awards-product .single .image-container { margin: 0; }
  #bestcosme_wrapper #awards-container .awards-product .single .image-container .awards-logos { width: 32%; }
  #bestcosme_wrapper #awards-container .awards-product .single .image-container .awards-logos .awards-logo + .awards-logo { margin: 18.38% 0 0; }
  #bestcosme_wrapper #awards-container .awards-product .single .textarea { text-align: left; padding: 0; }
  #bestcosme_wrapper #awards-container .awards-product .single .textarea .award { text-align: center; background: none; margin: 0 0 20px; padding: 0; }
  #bestcosme_wrapper #awards-container .awards-product .single .textarea .award ul { flex-direction: row; flex-wrap: wrap; column-gap: 7px; row-gap: 7px; }
  #bestcosme_wrapper #awards-container .awards-product .single .textarea .award ul li { width: 170px; height: 129px; flex-direction: column; justify-content: center; background: #eaeaea; transform: none; clip-path: polygon(0 0, 0 0, 0 0); }
  #bestcosme_wrapper #awards-container .awards-product .single .textarea .award ul li .ranking { width: auto; margin: 0 0 10px; }
  #bestcosme_wrapper #awards-container .awards-product .single .textarea .award ul li .ranking span { transform: none; }
  #bestcosme_wrapper #awards-container .awards-product .single .textarea .award ul li .title { flex: none; }
  #bestcosme_wrapper #awards-container .awards-product .single .textarea .text-group { display: flex; flex-direction: column; }
  #bestcosme_wrapper #awards-container .awards-product .single .textarea .text-group .description { font-size: 14px; line-height: 180%; margin-top: 10px; margin-bottom: 30px;}
  #bestcosme_wrapper #awards-container .awards-product .single .textarea .text-group h5 { font-size: 18px; line-height: 1.41; letter-spacing: .05em; }
  #bestcosme_wrapper #awards-container .awards-product .single .textarea .text-group .detail { letter-spacing: .05em; margin: 0 0 10px; }
  #bestcosme_wrapper #awards-container .awards-product .single .textarea .text-group .knowmore { width: 350px; font-size: 14px; margin: 0; }
  #bestcosme_wrapper #awards-container .awards-product .single .textarea .text-group .knowmore a::after { transition: transform .4s ease 0s; }
  #bestcosme_wrapper #awards-container .awards-product .single .textarea .text-group .knowmore a:hover::after { transform: translate(3px, -50%); }
  #bestcosme_wrapper #awards-container .awards-product .single .textarea .text-group.is-show h5 { transition-delay: 0s; }
  #bestcosme_wrapper #awards-container .awards-product .single .textarea .text-group.is-show .detail { transition-delay: .2s; }
  #bestcosme_wrapper #awards-container .awards-product .single .textarea .text-group.is-show .description { transition-delay: .4s; }
  #bestcosme_wrapper #awards-container .awards-product .single .textarea.is-show .award ul li { clip-path: polygon(0 0, 200% 0, 0 200%); transition: opacity 1.5s ease 0s, clip-path .6s ease .4s; }
  #bestcosme_wrapper #awards-container .awards-product .single .textarea.is-show .award ul li:nth-child(1) { transition-delay: 0s, 0.2s; }
  #bestcosme_wrapper #awards-container .awards-product .single .textarea.is-show .award ul li:nth-child(2) { transition-delay: 0.3s, 0.5s; }
  #bestcosme_wrapper #awards-container .awards-product .single .textarea.is-show .award ul li:nth-child(3) { transition-delay: 0.6s, 0.8s; }
  #bestcosme_wrapper #awards-container .awards-product .single .textarea.is-show .award ul li:nth-child(4) { transition-delay: 0.9s, 1.1s; }
  #bestcosme_wrapper #awards-container .awards-product.pickup { width: 1000px; max-width: 96%; margin: 0 auto; }
  #bestcosme_wrapper #awards-container .awards-product.pickup .single { display: flex; align-items: center; column-gap: 35px; }
  #bestcosme_wrapper #awards-container .awards-product.pickup .single .image-container { width: 40%; }
  #bestcosme_wrapper #awards-container .awards-product.pickup .single .image-container .imagearea img { aspect-ratio: 500 / 500; }
  #bestcosme_wrapper #awards-container .awards-product.pickup .single .textarea { flex: 1; padding: 0 20px; }
  #bestcosme_wrapper #awards-container .awards-product.pickup .single:nth-child(2n) { flex-direction: row-reverse; }
  #bestcosme_wrapper #awards-container .awards-product.normal .flex-container { width: 960px; max-width: 96%; margin: 0 auto; display: flex; justify-content: space-between; }
  #bestcosme_wrapper #awards-container .awards-product.normal .single { width: 41.67%; display: flex; flex-direction: column; } }
@media screen and (min-width: 768px) and (min-width: 767px) and (max-width: 1000px) { #bestcosme_wrapper #awards-container .awards-product.normal .single { width: 47.5%; } }
@media screen and (min-width: 768px) { #bestcosme_wrapper #awards-container .awards-product.normal .single .image-container { margin: 0 0 25px; }
  #bestcosme_wrapper #awards-container .awards-product.normal .single .textarea { text-align: center; flex: 1; display: flex; flex-direction: column; } }
@media screen and (min-width: 768px) and (min-width: 767px) and (max-width: 1000px) { #bestcosme_wrapper #awards-container .awards-product.normal .single .textarea .award { margin-left: -10px; margin-right: -10px; } }
@media screen and (min-width: 768px) { #bestcosme_wrapper #awards-container .awards-product.normal .single .textarea .award ul { justify-content: center; }
  #bestcosme_wrapper #awards-container .awards-product.normal .single .textarea .award ul li { width: 180px; } }
@media screen and (min-width: 768px) and (min-width: 767px) and (max-width: 1000px) { #bestcosme_wrapper #awards-container .awards-product.normal .single .textarea .award ul li { width: 160px; } }
@media screen and (min-width: 768px) { #bestcosme_wrapper #awards-container .awards-product.normal .single .textarea .text-group { flex: 1; }
  #bestcosme_wrapper #awards-container .awards-product.normal .single .textarea .text-group .description { flex: 1; } }
@media screen and (min-width: 768px) and (min-width: 767px) and (max-width: 1000px) { #bestcosme_wrapper #awards-container .awards-product.normal .single .textarea .text-group h5 br.sp { display: block !important; } }
@media screen and (min-width: 768px) { #bestcosme_wrapper #awards-container .awards-product.normal .single .textarea .text-group .knowmore { margin: 0 auto; }
  #bestcosme_wrapper .message { padding: 0; } }



/* Add 20250620 */

@media screen and (min-width: 768px) {
	#bestcosme_wrapper .main {
		width: 1000px;
		text-align: center;
		display: block;
		margin: 0 auto;
		padding-bottom: 30px;
	}
	#bestcosme_wrapper .title1 {
		text-align: center;
		margin-top: 20px;
	}
	#bestcosme_wrapper .title2 {
		font-size: 24px;
		padding-top: 10px;
	}
	#bestcosme_wrapper .title3 {
		font-size: 18px;
		margin-top: 15px;
	}
	#bestcosme_wrapper .title4 {
		font-size: 15px;
		margin-top: 30px;
		line-height: 180%
	}
	.shop {
		display: inline-block;
		font-size: 16px;
		padding-bottom: 5px;
	}
	.address {
		display: inline-block;
		font-size: 13px;
		padding-bottom: 5px;
	}
	.comingsoon {
		display: inline-block;
		font-size: 18px;
		padding-top: 60px;
		padding-bottom: 5px;
	}
}

@media screen and (max-width: 767px) {
	#bestcosme_wrapper .main {
		width: 100%;
		text-align: center;
		display: block;
		margin: 0 auto;
		padding-bottom: 10px;
	}
	#bestcosme_wrapper .title1 {
		text-align: center;
		margin-top: 20px;
	}
	#bestcosme_wrapper .title2 {
		font-size: 20px;
		line-height: 140%;
	}
	#bestcosme_wrapper .title3 {
		font-size: 14px;
		margin-top: 15px;
	}
	#bestcosme_wrapper .title4 {
		font-size: 14px;
		margin-top: 20px;
		line-height: 180%
	}
	.shop {
		display: inline-block;
		font-size: 16px;
		padding-bottom: 5px;
	}
	.address {
		display: inline-block;
		font-size: 13px;
		padding-bottom: 5px;
	}
	.comingsoon {
		display: inline-block;
		font-size: 18px;
		padding-top: 60px;
		padding-bottom: 5px;
	}
}