@charset "UTF-8";

#costco_mask {
  width: 100%;
}
#inner_content {
  width: min(100%, 760px);
  margin: auto;
  background: #fff;
}
#costco_mask h1,
#costco_mask h2,
#costco_mask h3,
#costco_mask p,
#costco_mask ul,
#costco_mask ol {
  padding: 0;
  margin: 0;
  border: none;
  list-style: none;
}
#costco_mask img {
  vertical-align: bottom;
  width: 100%;
  height: auto;
  margin-bottom: 0;
  display: block;
}
#costco_mask .bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------
   価格エリア
   -------------------------------------------------- */
#costco_mask .cv_area {
  background: url(/img/usr/static/costco_mask_2609/item_bg.jpg) no-repeat;
  width: 100%;
  aspect-ratio: 1000 / 1480;
  overflow: hidden;
  padding: 11% 0 9.5%;
}
#costco_mask .cv_area .cv_img,
#costco_mask .cv_area .cv_name,
#costco_mask .cv_area .cv_price,
#costco_mask .cv_area .cv_btn {
  margin: auto;
}
#costco_mask .cv_area .cv_img {
  width: 78.3%;
  margin-bottom: 4.8%;
}
#costco_mask .cv_area .cv_name {
  width: 61.7%;
  margin-bottom: 5%;
}
#costco_mask .cv_area .cv_price {
  width: 58.2%;
  margin-bottom: 1.2%;
}
#costco_mask .cv_area .cv_btn {
  width: 57%;
}
#costco_mask .cv_area .cv_btn a {
  transform: translateY(0);
  display: block;
}
#costco_mask .cv_area .cv_btn a:hover {
  transform: translateY(3px);
}
/* マウスやタップでフォーカスされた時だけアウトラインを消す */
#costco_mask a:focus:not(:focus-visible) {
  outline: none;
}
#costco_mask a {
  -webkit-tap-highlight-color: transparent; /* スマホでのタップ時の黒い影も防止 */
}
/* --------------------------------------------------
   main
   -------------------------------------------------- */
#costco_mask .main {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 1794;
  overflow: hidden;
}
#costco_mask .main h1 {
  position: absolute;
  top: 5.6%;
  left: 50%;
  transform: translateX(-50%);
  width: 76.6%;
  height: auto;
}
/* --------------------------------------------------
   review
   -------------------------------------------------- */
#costco_mask .review {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 635;
  overflow: hidden;
}
#costco_mask .review h2 {
  position: absolute;
  top: 15.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 83.2%;
  height: auto;
}
/* --------------------------------------------------
   visumo
   -------------------------------------------------- */
#costco_mask .visumo {
  margin-bottom: 10%;
}
#costco_mask .visumo h2 {
  width: 40%;
  margin: 12% auto 4%;
}
#costco_mask .visumo .ecbn-selection-title.vsm-selection-title,
#costco_mask .visumo .ecbn-selection-description.vsm-selection-description {
  display: none;
}
/* --------------------------------------------------
   video
   -------------------------------------------------- */
#costco_mask .video {
  padding: 0 0 12%;
}
#costco_mask .video h2 {
  width: 75.7%;
  margin: 0 auto 3.9%;
}
#costco_mask .video .video_cont {
  width: 74%;
  margin: 0 auto;
}

#costco_mask .video .video_cont iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* 16:9 の横縦比を維持 */
  display: block;
}

/* --------------------------------------------------
   sign
   -------------------------------------------------- */
#costco_mask .sign_top {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 968;
  overflow: hidden;
}
#costco_mask .sign_top h2 {
  position: absolute;
  top: 11.4%;
  left: 10.8%;
  width: 41.5%;
  height: auto;
}
#costco_mask .sign_top ul {
  position: absolute;
  top: 33.4%;
  left: 5%;
  width: 65%;
  height: auto;
}
#costco_mask .sign_top ul li {
  margin-bottom: 4.7%;
}
#costco_mask .sign_top ul li:last-of-type {
  margin-bottom: 0;
}
#costco_mask .sign_comment {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 1921;
  overflow: hidden;
}
#costco_mask .sign_comment h3 {
  position: absolute;
  top: 2.4%;
  left: 50%;
  transform: translateX(-50%);
  width: 84%;
  height: auto;
}
#costco_mask .sign_comment p {
  position: absolute;
  top: 37.3%;
  left: 50%;
  transform: translateX(-50%);
  width: 59.6%;
  height: auto;
}
/* --------------------------------------------------
   reason
   -------------------------------------------------- */
#costco_mask .reason {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 981;
  overflow: hidden;
}
#costco_mask .reason h2 {
  position: absolute;
  top: 14.6%;
  left: 37.9%;
  width: 54.5%;
  height: auto;
}
#costco_mask .reason ol {
  position: absolute;
  top: 47.4%;
  left: 7.7%;
  width: 84.6%;
  height: auto;
}
#costco_mask .reason ol li {
  margin-bottom: 4%;
}
#costco_mask .reason ol li:nth-of-type(1) {
  width: 100%;
}
#costco_mask .reason ol li:nth-of-type(2) {
  width: 80.7%;
}
#costco_mask .reason ol li:nth-of-type(3) {
  width: 94%;
  margin-bottom: 0;
}
#costco_mask .reason .note {
  position: absolute;
  bottom: 8.05%;
  right: 4.8%;
  width: 33.1%;
  height: auto;
}

/* --------------------------------------------------
   point
   -------------------------------------------------- */
/* ---------------- .point01__cont_sec1 */
#costco_mask .point01__cont_sec1 {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 3591;
  overflow: hidden;
}
#costco_mask .point01__cont_sec1 .icon {
  position: absolute;
  top: 0.9%;
  left: 0;
  width: 26%;
  height: auto;
}
#costco_mask .point01__cont_sec1 h2 {
  position: absolute;
  top: 3.3%;
  right: 9.1%;
  width: 78.5%;
  height: auto;
}
#costco_mask .point01__cont_sec1 .point01__cont_sec1_box {
  position: absolute;
  bottom: 2.3%;
  left: 50%;
  transform: translateX(-50%);
  width: 83.1%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
}
#costco_mask .point01__cont_sec1 .point01__cont_sec1_box p:nth-of-type(1) {
  width: 65.94%;
  margin-bottom: 12%;
}
/* ---------------- .point01__cont_sec2 */
#costco_mask .point01__cont_sec2 {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 3785;
  overflow: hidden;
}
#costco_mask .point01__cont_sec2 h3 {
  position: absolute;
  top: 3.6%;
  left: 50%;
  transform: translateX(-50%);
  width: 75.4%;
  height: auto;
  margin-bottom: 5%;
}
#costco_mask .point01__cont_sec2 ul {
  position: absolute;
  top: 8.3%;
  left: 50%;
  transform: translateX(-50%);
  width: 82.4%;
  height: auto;
}
#costco_mask .point01__cont_sec2 ul li {
  margin-top: 6%;
}
#costco_mask .point01__cont_sec2 ul li:first-of-type {
  margin-top: 0;
}
#costco_mask .point01__cont_sec2 ul li:nth-of-type(4) {
  width: 99.64%;
  margin-top: 12%;
}
#costco_mask .point01__cont_sec2 ul li:last-of-type {
  width: 91.02%;
  margin: 6% auto 0;
}

/* ---------------- .point02__cont */
#costco_mask .point02__cont {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 2002;
  overflow: hidden;
}
#costco_mask .point02__cont .icon {
  position: absolute;
  top: 1.5%;
  left: 0;
  width: 26%;
  height: auto;
}
#costco_mask .point02__cont h2 {
  position: absolute;
  top: 6.44%;
  left: 50%;
  transform: translateX(-50%);
  width: 65.7%;
  height: auto;
}
#costco_mask .point02__cont .point02_txt01 {
  position: absolute;
  top: 21.2%;
  left: 9.1%;
  width: 45.6%;
  height: auto;
}
#costco_mask .point02__cont .point02_txt02 {
  position: absolute;
  top: 51.3%;
  right: 9.2%;
  width: 38.1%;
  height: auto;
}
#costco_mask .point02__cont .point02_txt03 {
  position: absolute;
  bottom: 4.1%;
  left: 50%;
  transform: translateX(-50%);
  width: 78.6%;
  height: auto;
}
/* ---------------- .point03__cont */
#costco_mask .point03__cont {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 1435;
  overflow: hidden;
}
#costco_mask .point03__cont .icon {
  position: absolute;
  top: 7%;
  left: 0;
  width: 26%;
  height: auto;
}
#costco_mask .point03__cont h2 {
  position: absolute;
  top: 13.8%;
  left: 50%;
  transform: translateX(-50%);
  width: 42.1%;
  height: auto;
}
#costco_mask .point03__cont .point03_txt01 {
  position: absolute;
  top: 26.9%;
  left: 50%;
  transform: translateX(-50%);
  width: 48.5%;
  height: auto;
}

/* --------------------------------------------------
   make
   -------------------------------------------------- */
#costco_mask .make {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 2905;
  overflow: hidden;
}
#costco_mask .make h2 {
  position: absolute;
  top: 3.3%;
  left: 50%;
  transform: translateX(-50%);
  width: 70.2%;
  height: auto;
}
#costco_mask .make ul {
  position: absolute;
  top: 10.4%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: auto;
}
#costco_mask .make ul li {
  margin-bottom: 3.5%;
}

/* --------------------------------------------------
   shop
   -------------------------------------------------- */
#costco_mask .shop {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 1513;
  overflow: hidden;
}
#costco_mask .shop h2 {
  position: absolute;
  top: 8.06%;
  left: 50%;
  transform: translateX(-50%);
  width: 69.8%;
  height: auto;
}
#costco_mask .shop p {
  position: absolute;
  top: 44.9%;
  left: 50%;
  transform: translateX(-50%);
  width: 85.8%;
  height: auto;
}
/* --------------------------------------------------
   user
   -------------------------------------------------- */
#costco_mask .user {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 1723;
  overflow: hidden;
}
#costco_mask .user h2 {
  position: absolute;
  top: 5.9%;
  left: 50%;
  transform: translateX(-50%);
  width: 56%;
  height: auto;
}
#costco_mask .user .user_list {
  position: absolute;
  top: 17.6%;
  left: 50%;
  transform: translateX(-50%);
  width: 84%;
}
#costco_mask .user .user_list li {
  box-shadow: -3.5px 6.1px 39px rgba(135, 182, 202, 0.5);
  margin-bottom: 6%;
}
#costco_mask .user .user_list li:last-child {
  margin-bottom: 0;
}
#costco_mask .user .note {
  position: absolute;
  bottom: 5.6%;
  right: 5%;
  width: 59.8%;
}
/* --------------------------------------------------
   area
   -------------------------------------------------- */
#costco_mask .area {
  background-color: #d9d9d9;
  padding: 9.4% 0;
}
#costco_mask .area p {
  width: 58.9%;
  margin: auto;
}

/* --------------------------------------------------
   spec
   -------------------------------------------------- */
#costco_mask .spec {
  background-color: #f6f6f6;
  color: #737373;
  padding: 2% 8% 10%;
}
#costco_mask .spec .accordion-title {
  position: relative;
  padding: 3% 6% 3% 3%;
  border-bottom: 1px solid #707070;
  font-size: clamp(18px, 2.34vw + 9.2px, 27px);
  cursor: pointer;
  user-select: none;
  margin-top: 3%;
}
#costco_mask .spec .accordion-title::before,
#costco_mask .spec .accordion-title::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: clamp(25px, 2.86vw + 14.3px, 36px);
  height: 1px;
  background-color: #737373;
}
#costco_mask .spec .accordion-title::before {
  transform: translateY(-50%);
}
#costco_mask .spec .accordion-title::after {
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.3s ease;
}
#costco_mask .spec .accordion-title.is-open::after {
  transform: translateY(-50%) rotate(0deg); 
}
#costco_mask .spec .accordion-content {
  display: none;
  padding: 3% 0;
}
#costco_mask .spec .spec_inner__data {
  font-size: clamp(14px, 1.04vw + 10.1px, 18px);
  display: flex;
  flex-wrap: wrap;
  padding: 0 3%;
}
#costco_mask .spec .spec_inner__data dt {
  width: 100%;
  font-weight: bold;
}
#costco_mask .spec .spec_inner__data dd {
  margin-bottom: 1em;
  width: 100%;
  margin-bottom: 1em;
}
#costco_mask .spec .spec_inner__note li {
  margin-left: 1em;
  text-indent: -1em;
  margin-bottom: 0.5em;
  line-height: 1.5;
  font-size: clamp(14px, 1.04vw + 10.1px, 18px);
}
@media (min-width: 600px) {
  #costco_mask .spec .spec_inner__data dt {
    width: 20%;
  }
  #costco_mask .spec .spec_inner__data dd {
    width: 80%;
  }
}
/* PC向けスタイル */
@media (min-width: 1025px) {
  #costco_mask #inner_content {
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
  }
}

/* 
横幅 (width) ＝ (パーツの横幅 ÷ 全体の横幅) × 100

位置 (left) ＝ (パーツの左端X座標 ÷ 全体の横幅) × 100

位置 (top) ＝ (パーツの上端Y座標 ÷ 全体の縦幅) × 100

上下左右（右の余白px ÷ 全体の横幅px）× 100
 */