@charset "UTF-8";

body.no_scroll {
  height: 100vh;
  overflow: hidden;
}

html {
	overflow-y: scroll;

}

header.hide {
  opacity: 0;
  pointer-events: none;
}

.header_wrap {
  z-index: 10!important;
}

.modal_outside.hide {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.modal_outside {
  position: fixed;
  z-index: 11;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  background: url(../img/bg_002-pc.jpg) center center / cover no-repeat;
  transition: all .3s;
  visibility: visible;
}

.modal_outside * {
  font-feature-settings: "palt";
}

.modal_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal_inner {
  position: relative;
  width: 100rem;
  max-height: 100%;
  margin: 0 auto;
  overflow: hidden scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.modal_inner::-webkit-scrollbar {
  display:none;
}

.modal_inner .btn-close.top {
  position: absolute;
  z-index: 1;
	top: 0;
	right: 0;
  width: 5rem;
  height: 5rem;
  margin-top: 7rem;
  transform: rotate(45deg);
}

.modal_inner .btn-close.top::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background: #333;
  content: "";
}

.modal_inner .btn-close.top::after {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background: #333;
  content: "";
}

.modal_inner .btn-close:hover {
  cursor: pointer;
}

.modal_content {
	padding: 11.5rem 0 10rem;
}

.modal_content .sec_ttl {
  margin-bottom: 3.5rem;
  font-family: var(--font-Serif-jp);
  font-weight: 500;
  font-size: 4.6rem;
  letter-spacing: .075em;
  text-align: center;
}

.itm_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.itm_list > li:nth-child(1) {
  padding: 5.5rem 2.5rem 1rem 0;
}

.itm_list li {
	position: relative;
	border: solid 1px;
  border-color: var(--color-accent);
  width: 100%;
	padding: 5.5rem 2.5rem 5rem 0;
	background: #fff;
	box-sizing: border-box;
  text-align: left;
}

.itm_list li:nth-of-type(2) {
  border-color: #808080;
}

.itm_list li:nth-of-type(3) {
  border-color: #9B5B3E;
}

.itm_list li:nth-of-type(n+4) {
  border-color: #333;
}

.itm_list li:nth-of-type(n+2) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
	width: calc((100% - 2rem) / 2);
	margin-top: 2.5rem;
}

.itm_copy_wrap {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	margin: 0 0 .5rem 2.5rem;
}

.itm_list li:nth-of-type(1) .itm_copy_wrap {
	position: absolute;
	top: 0;
	left: 0;
	margin: 5.5rem 0 0 35rem;
}

.award-icon_wrap {
	position: relative;
  z-index: 1;
	width: 13rem;
  padding-top: 2rem;
	text-align: center;
	color:  var(--color-accent);
}

.itm_list li:nth-of-type(2) .award-icon_wrap {
  color: #808080;
}

.itm_list li:nth-of-type(3) .award-icon_wrap {
  color: #9B5B3E;
}

.itm_list li:nth-of-type(n+4) .award-icon_wrap {
  color: #333;
}

.award-icon_wrap::before {
	position: absolute;
  z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 10.5rem;
	mask-image: url(../img/award-icon_02.svg);
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: cover;
  -webkit-mask-image: url(../img/award-icon_02.svg);
  -webkit-mask-repeat:  no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-size: cover;
	background: var(--color-accent);
	content: "";
}

.itm_list li:nth-of-type(2) .award-icon_wrap::before {
  background: #808080;
}

.itm_list li:nth-of-type(3) .award-icon_wrap::before {
  background: #9B5B3E;
}

.itm_list li:nth-of-type(n+4) .award-icon_wrap::before {
  background: #333;
}

.award-icon_wrap > span {
	display: block;
  width: fit-content;
  margin: 0 auto;
  font-weight: bold;
  font-family: var(--font-Serif-en);
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: .01em;
  font-feature-settings: normal;
}

.award-icon_wrap .year {
  letter-spacing: 0;
}

.award-icon_wrap .brand {
  margin: .2rem auto;
}

.award-icon_wrap .cat {
  position: relative;
  width: 8rem !important;
  margin-top: .1rem;
}

.award-icon_wrap .cat img {
  opacity: 0;
}

.award-icon_wrap .cat::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: cover;
  -webkit-mask-repeat:  no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-size: cover;
  background: var(--color-accent);
  content: "";
}

#Lotion .award-icon_wrap .cat::after {
  mask-image: url(../img/txt_001.svg);
  -webkit-mask-image: url(../img/txt_001.svg);
}

#Cream .award-icon_wrap .cat::after {
  mask-image: url(../img/txt_002.svg);
  -webkit-mask-image: url(../img/txt_002.svg);
}

#Cleansing .award-icon_wrap .cat::after {
  mask-image: url(../img/txt_003.svg);
  -webkit-mask-image: url(../img/txt_003.svg);
}

#Serum .award-icon_wrap .cat::after {
  mask-image: url(../img/txt_004.svg);
  -webkit-mask-image: url(../img/txt_004.svg);
}

#SpecialCare .award-icon_wrap .cat::after {
  mask-image: url(../img/txt_005.svg);
  -webkit-mask-image: url(../img/txt_005.svg);
}

#BaseMake .award-icon_wrap .cat::after {
  mask-image: url(../img/txt_006.svg);
  -webkit-mask-image: url(../img/txt_006.svg);
}

#MakeUp .award-icon_wrap .cat::after {
  mask-image: url(../img/txt_007.svg);
  -webkit-mask-image: url(../img/txt_007.svg);
}

#HairBody .award-icon_wrap .cat::after {
  mask-image: url(../img/txt_008.svg);
  -webkit-mask-image: url(../img/txt_008.svg);
}

#Baby .award-icon_wrap .cat::after {
  mask-image: url(../img/txt_009.svg);
  -webkit-mask-image: url(../img/txt_009.svg);
}

#Femcare .award-icon_wrap .cat::after {
  mask-image: url(../img/txt_010.svg);
  -webkit-mask-image: url(../img/txt_010.svg);
}


.itm_list li:nth-of-type(2) .award-icon_wrap .cat::after {
  background: #808080;
}

.itm_list li:nth-of-type(3) .award-icon_wrap .cat::after {
  background: #9B5B3E;
}

.itm_list li:nth-of-type(n+4) .award-icon_wrap .cat::after {
  background: #333;
}


.award-icon_wrap .cat::before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: var(--color-accent);
  content: "";
}

.itm_list li:nth-of-type(2) .award-icon_wrap .cat::before {
  background: #808080;
}

.itm_list li:nth-of-type(3) .award-icon_wrap .cat::before {
  background: #9B5B3E;
}

.itm_list li:nth-of-type(n+4) .award-icon_wrap .cat::before {
  background: #333;
}

.award-icon_wrap .rank {
	font-size: 2.2rem;
  letter-spacing: 0;
}

.award-icon_wrap .rank .num {
  font-family: var(--font-Serif-jp), serif;
	font-size: 4.8rem;
  line-height: .8;
  vertical-align: -.2rem;
}

.itm_copy {
	flex: 1;
  font-family: var(--font-Serif-jp), serif;
  font-weight: bold;
	font-size: 2.7rem;
  line-height: 1.777;
  letter-spacing: .1em;
}

.itm_list li:nth-of-type(n+2) .itm_copy {
  font-size: 2.4rem;
}

.content_wrap {
	display: flex;
	align-items: flex-end;
}

.itm_list li:nth-of-type(n+2) .content_wrap {
	align-items: flex-end;
}

.itm_img {
	width: 35rem;
}

.itm_list li:nth-of-type(n+2) .itm_img {
	width: 17.6rem;
}

.itm_img img {
	width: 100%;
}

.txt_wrap {
	flex: 1;
}

.itm_list li:nth-of-type(1) .txt_wrap {
  padding-bottom: 4.5rem;
}

.itm_caption {
  margin-bottom: 1.8rem;
  font-family: var(--font-gothic);
  font-weight: 500;
	font-size: 1.6rem;
  line-height: 1.875;
  letter-spacing: .075em;
}

.itm_name {
  font-family: var(--font-gothic);
  font-weight: 500;
	font-size: 1.9rem;
  line-height: 1.58;
  letter-spacing: .075em;
	text-decoration: underline;
}

.itm_link {
  width: fit-content;
	margin-top: 1.8rem;
}

.itm_link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22.5rem;
	height: 4.6rem;
	background: var(--color-accent);
  font-family: var(--font-gothic);
	font-size: 1.6rem;
  line-height: 1;
  letter-spacing: .075em;
	color: #fff;
}

.itm_list li:nth-of-type(2) .itm_link a {
  background: #808080;
}

.itm_list li:nth-of-type(3) .itm_link a {
  background: #9B5B3E;
}

.itm_list li:nth-of-type(n+4) .itm_link a {
  background: #333;
}

.comment_wrap {
  position: relative;
  border-top: dotted 1px var(--color-accent);
  margin: 1.5rem 0 0 2.5rem;
  padding-top: 4.5rem;
}

.comment_wrap::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 21rem;
  height: .4rem;
  margin-top: -.2rem;
  background: #fff;
  content: "";
}

.comment_wrap::after {
  position: absolute;
  top: 0;
  left: -2.3rem;
  width: 18.3rem;
  height: 3rem;
  margin-top: -1.5rem;
  mask-image: url(../img/usersVois.svg);
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: cover;
  -webkit-mask-image: url(../img/usersVois.svg);
  -webkit-mask-repeat:  no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-size: cover;
  background: var(--color-accent);
  content: "";
}

.comment_wrap dt {
  margin-bottom: 1rem;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.6;
  letter-spacing: .075em;
}

.comment_wrap dd {
  position: relative;
  max-height: 50rem;
  font-family: var(--font-gothic);
  font-size: 1.6rem;
  line-height: 1.5625;
  letter-spacing: .075em;
  transition: max-height .3s;
}

.comment_wrap dd.hide {
  max-height: 9rem;
  height: 9rem;
  overflow: hidden;
}

.comment_wrap dd.hide::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 9rem;
  background: linear-gradient(transparent, #fff 50%);
  content: "";
}

.btn_more {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding-right: 2.2rem;
  font-family: var(--font-Serif-jp);
  font-weight: bold;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: .05em;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity .3s;
}

.btn_more.hide {
  opacity: 0;
  pointer-events: none;
}

.btn_more::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 1.5rem;
  margin-right: .7rem;
  background: #333;
  content: "";
}

.btn_more::after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1px;
  background: #333;
  content: "";
}

.modal_inner .btn-close.bottom {
  position: relative;
  width: fit-content;
  margin: 6rem auto 0;
  padding-right: 4.5rem;
  font-weight: bold;
  font-size: 3.1rem;
  line-height: 1;
  letter-spacing: .05em;
}

.modal_inner .btn-close.bottom::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(45deg);
  width: 4rem;
  height: 1px;
  background: #333;
  content: "";
}

.modal_inner .btn-close.bottom::after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(45deg);
  width: 1px;
  height: 4rem;
  margin-right: 2rem;
  background: #333;
  content: "";
}

.itm_list li .notes {
  margin: 2rem 0 0 2.5rem;
  font-family: var(--font-gothic);
  font-size: 1.4rem;
  letter-spacing: .075em;
}

/*Smart phone---------------------------------------------*/
@media screen and  (max-width:768px) {

.modal_inner {
  position: relative;
  width: calc(700 * (100vw / 750));
}

.modal_inner .btn-close.top {
  width: calc(60 * (100vw / 750));
  height: calc(60 * (100vw / 750));
  margin-top: calc(40 * (100vw / 750));
}

.modal_content {
  padding: calc(85 * (100vw / 750)) 0 calc(150 * (100vw / 750));
}

.modal_content .sec_ttl {
  margin-bottom: calc(60 * (100vw / 750));
  font-size: calc(41 * (100vw / 750));
}

.itm_list {
  display: block;
}

.itm_list > li:nth-child(1) {
  padding: calc(60 * (100vw / 750))  calc(25 * (100vw / 750)) calc(25 * (100vw / 750));
}

.itm_list li {
  padding: calc(60 * (100vw / 750))  calc(25 * (100vw / 750)) calc(65 * (100vw / 750));
}

.itm_list li:nth-of-type(n+2) {
  display: block;
  width: auto;
  margin-top: calc(50 * (100vw / 750));
}

.itm_list li:nth-of-type(n+2) .content_wra {
  align-items: unset;
}

.itm_copy_wrap {
  position: relative;
  display: block;
  margin: 0 0 calc(30 * (100vw / 750));
}

.itm_list li:nth-of-type(1) .itm_copy_wrap {
  position: relative;
  margin: 0 0 calc(30 * (100vw / 750));
}

.award-icon_wrap {
  position: absolute;
  top: 100%;
  left: 0;
  width: calc(200 * (100vw / 750));
  margin-top: calc(50 * (100vw / 750));
  padding-top: calc(35 * (100vw / 750));
}

.award-icon_wrap::before {
  height: calc(162 * (100vw / 750));
}

.award-icon_wrap > span {
  font-size: calc(20 * (100vw / 750));
}

.award-icon_wrap .brand {
  margin: calc(2 * (100vw / 750)) auto;
}

.award-icon_wrap .cat {
  width: calc(120 * (100vw / 750)) !important;
  margin-top: calc(1 * (100vw / 750));
}

.award-icon_wrap .rank {
  font-size: calc(34 * (100vw / 750));
}

.award-icon_wrap .rank .num {
  font-size: calc(75 * (100vw / 750));
  vertical-align: calc(-2 * (100vw / 750));
}

.itm_copy {
  font-family: var(--font-Serif-jp), serif;
  font-size: calc(41 * (100vw / 750));
  line-height: 1.6;
  text-align: center;
}

.itm_list li:nth-of-type(n+2) .itm_copy {
  font-size: calc(41 * (100vw / 750));
}

.content_wrap {
  display: block;
}

.itm_img {
  width: auto;
}

.itm_list li:nth-of-type(n+2) .itm_img {
  width: auto;
}

.itm_list li:nth-of-type(1) .txt_wrap {
  padding-bottom: 0;
}

.itm_caption {
  margin-bottom: calc(30 * (100vw / 750));
  font-size: calc(26 * (100vw / 750));
}

.itm_name {
  font-size: calc(30 * (100vw / 750));
  text-align: center;
}

.itm_link {
  margin: calc(30 * (100vw / 750)) auto 0;
}

.itm_link a {
  width: calc(388 * (100vw / 750));
  height: calc(78 * (100vw / 750));
  font-size: calc(27 * (100vw / 750));
}

.comment_wrap {
  margin: calc(70 * (100vw / 750)) 0 0;
  padding-top: calc(75 * (100vw / 750));
}

.comment_wrap::before {
  left: 50%;
  transform: translateX(-50%);
  width: calc(412 * (100vw / 750));
  height: calc(4 * (100vw / 750));
  margin-top: calc(-2 * (100vw / 750));
}

.comment_wrap::after {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(337 * (100vw / 750));
  height: calc(55.5 * (100vw / 750));
  margin-top: calc(-28 * (100vw / 750));
}

.comment_wrap dt {
  margin-bottom: calc(.5 * (100vw / 750));
  font-size: calc(27 * (100vw / 750));
}

.comment_wrap dd {
  max-height: calc(500 * (100vw / 750));
  font-size: calc(26 * (100vw / 750));
}

.comment_wrap dd.hide {
  max-height: calc(180 * (100vw / 750));
  height: calc(180 * (100vw / 750));
}

.comment_wrap dd.hide::before {
  height: calc(150 * (100vw / 750));
}

.btn_more {
  padding-right: calc(75 * (100vw / 750));
  font-size: calc(45 * (100vw / 750));
}

.btn_more::before {
  height: calc(50 * (100vw / 750));
  margin-right: calc(24 * (100vw / 750));
}

.btn_more::after {
  width: calc(50 * (100vw / 750));
}

.modal_inner .btn-close.bottom {
  margin: calc(45 * (100vw / 750)) auto 0;
  padding-right: calc(70 * (100vw / 750));
  font-size: calc(41 * (100vw / 750));
}

.modal_inner .btn-close.bottom::before {
  width: calc(64 * (100vw / 750));
}

.modal_inner .btn-close.bottom::after {
  height: calc(64 * (100vw / 750));
  margin-right: calc(31 * (100vw / 750));
}

.itm_list li .notes {
  margin: calc(40 * (100vw / 750)) 0 0;
  font-size: calc(21 * (100vw / 750));
  text-align: center;
}

}

/*PC------------------------------------------------------*/
@media screen and  (min-width:769px) {
  .itm_list li:nth-of-type(n+2) {
    position: relative;
  }

  .itm_list li .notes {
    position: absolute;
    bottom: 2rem;
  }
}
/*------------------------------------------------------PC*/