@charset "UTF-8";
/*=============================================================

	Date: 2026-5-14
	CSS Document ： 汗対策特集

=============================================================*/
/**/
.dummy {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  opacity: 0.35;
  pointer-events: none;
  display: flex;
  justify-content: center;
  text-align: center;
  z-index: 10000;
  filter: grayscale(90%);
}
.dummy img {
  width: 100%;
  display: block;
  margin: 0 auto;
  max-width: max-content;
}
#outer {
  opacity: 0;
}
/*------------------------------------
仮想LP用ベース
------------------------------------*/
.fca_cat-hero, .sr_page-shopping-result__free {
  overflow: visible !important;
}
.fca_cat-hero .sr_page-shopping-result__free .fca_container__in {
  max-width: 100%;
}
.fca_cat-hero .sr_page-shopping-result__free .fca_container {
  padding: 0;
}
.fca_page-shop-category__body {
  margin-top: 0;
}
#outer {
  animation: fade_cl 1.3s .0s both;
}
#outer ul {
  padding: 0;
  list-style: none;
}
/* ---------------------------------

キーカラー指定
color: var(--sweat-theme01-color);	
font-family: var(--font-sweat-M);
font-family: var(--font-sweat-DB);
font-family: var(--font-sweat-en);
--------------------------------- */ :root {
  --sweat-theme01-color: #7889ff;
  --sweat-theme02-color: #00c7d9; /* キーカラー指定 */
  --sweat-bg-color: #ded8ce; /* 背景カラー指定 */
  --font-sweat-R: "あおとゴシック R", "游ゴシック", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic", "メイリオ", "Meiryo", "Noto Sans", "Noto Sans CJK JP", "system-ui", sans-serif;
  --font-sweat-M: "あおとゴシック M", "游ゴシック", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic", "メイリオ", "Meiryo", "Noto Sans", "Noto Sans CJK JP", "system-ui", sans-serif;
  --font-sweat-DB: "あおとゴシック DB", "游ゴシック", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic", "メイリオ", "Meiryo", "Noto Sans", "Noto Sans CJK JP", "system-ui", sans-serif;
  --font-sweat-en: "Lato", sans-serif;
}
/*------------------------------------

ベース

------------------------------------*/
.pc_cl {
  display: block;
}
.sp_cl {
  display: none;
}
.bold_ct {
  font-weight: bold;
}
.fsc_gheader-wrap {
  transition: all 0.3s;
}
/*==================================

ルビ

==================================*/
[data-ruby] {
  position: relative;
  margin-top: 0.2em;
  display: inline-block;
}
[data-ruby]::before {
  content: attr(data-ruby);
  position: absolute;
  text-align: center;
  top: -0.9em;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 0.38em;
  letter-spacing: 0.3em;
  white-space: nowrap;
}
.spec_wrap_cl h3.spec_cl [data-ruby]::before {
  font-size: 0.42em;
}
/*------------------------------------

wrapper

------------------------------------*/
#wrapper {
  width: 100%;
  line-height: 2.0;
  letter-spacing: 0.08em;
  /* text-align: center; */
  background: #FFF;
  /* color: #2f475d; */
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.125rem;
  overflow: hidden;
}
#wrapper img {
  height: auto;
  max-width: 100%;
}
#wrapper-inner {
  margin: 0 auto;
  width: 100%;
  max-width: 2000px;
}
#wrapper a {
  text-decoration: none;
}
/* hover */
@media (hover: hover) {
  #wrapper a {
    transition: all 0.3s;
  }
  #wrapper a:hover {
    opacity: 0.8;
  }
}
/*------------------------------------

タイトル

------------------------------------*/
#title {
  background: #feffab;
  /*background-image: linear-gradient(60deg, rgb(250 255 246), rgba(250, 255, 237, 1) 60%, rgb(235 252 233));*/
}
#title .titleinner {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  position: relative;
}
#title .titleinner::after {display: block;width: 42.5%;height: 100%;content: '';background-color: #FFF;background-repeat: no-repeat;background-position: center;background-size:contain;transform:skewX(10deg);position: absolute;top: 0;left: 55%;z-index: 1;}

#title .titleinner .fv-image.fv01 {
  width: 58.8%;
  margin: 0;
  display: block;
  transform: translateX(1.5%);
  position: relative;
  z-index: 1;
}


#title .titleinner .fv-image.fv02 {
  position: absolute;
  top: 9%;
  left: 5%;
  width: 22.2%;
    opacity: 0;
  animation: blur_cl 1.3s forwards 0.3s;
}

@keyframes blur_cl {
  0% {
    opacity: 0;
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
#title .titleinner .fv-image.fv03 {
  position: absolute;
  top: 44.3%;
  right: 22.0%;
  width: 25.7%;
  opacity: 0;
  animation: blur_cl 1.3s forwards 0.3s;
  z-index: 2;
}
#title .titleinner .fv-catch {
  position: absolute;
  top: 44%;
  left: 32.5%;
  width: 6%;

}
#title .titleinner .main-logo {
  position: absolute;
  top: 7.2%;
  right: 9.0%;
  width: 35.4%;
  margin: 0;
  z-index: 2;
}
#title .titleinner .main-logo .logo-img {}
#title .titleinner .main-logo .logo-img::before {
  display: block;
  width: 100%;
  height: 100%;
  /* content: ''; */
  background-image: url(../images/title_bg.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: multiply;
}
#title .titleinner .main-logo .logo-img img {
  position: relative;
  width: 100%;
}
#title .titleinner .fv-icon {
  position: absolute;
  bottom: 2.9%;
  right: 9.2%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 0.5em;
  width: 8.2%;
  z-index: 2;
  opacity: 0;
  animation: fadeIn_cl 1.2s forwards 0.8s;
}
#title .titleinner .fv-icon img {
  width: 100%;
}
/*------------------------------------

リード

------------------------------------*/
#items_cl .fv-lead {
  text-align: center;
  margin: 3em 0 5.5em;
  font-size: 108%;
  line-height: 1.7;
}
#items_cl .fv-lead p {
  font-family: var(--font-sweat-M);
}
/*------------------------------------

各アイテム紹介

------------------------------------*/
#items_cl {}
#lineup {
  margin: 5em 0 0;
}
/* == アイテム == */
.item_cl {
  width: 90%;
  max-width: 950px;
  margin: 0 auto 10em;
  gap: 4%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  container-type: inline-size;
}
.item_cl:last-child {
  margin-bottom: 2em;
}
/* メイン */
.item_cl .model_cl {
  position: relative;
  width: 46%;
  flex-shrink: 0;
}
.item_cl .model_cl .c-bg {
  background-image: linear-gradient(60deg, #fff4f4, #fcf8ff 60%);
  height: 100%;
  width: calc(100% + 50vw);
  position: absolute;
  top: 20%;
  right: 10%;
}
.item_cl .model_cl a {
  position: relative;
  display: block;
}
.item_cl .model_cl a img {
  width: 100%;
}
.item_cl .model_cl a .icon-wrap {
  width: 19%;
  position: absolute;
  top: 2.5%;
  left: 4%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 0.5em;
}
.item_cl .model_cl a .icon-wrap img {}
/* 詳細 */
.item_cl .detail-box_cl {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 1.9cqw;
}
.item_cl .detail-box_cl .item-catch {
  font-size: 121%;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1.65;
  color: var(--sweat-theme01-color);
  font-weight: bold;
  border: 1px solid var(--sweat-theme01-color);
  border-radius: 0 1.8em;
  padding: 1.3em 2em;
  margin-top: -1.7em;
  margin-bottom: 0.5em;
  margin-left: -27%;
  position: relative;
  width: fit-content;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(0.6em);
  /* white-space: nowrap; */
  z-index: 1;
  font-family: var(--font-sweat-DB);
  display: inline-block;
}
.item_cl .detail-box_cl .item-catch .marker {
  position: relative;
  display: inline-block;
}
.item_cl .detail-box_cl .item-catch .marker::after {
  display: block;
  width: calc(100% + 1em);
  height: 100%;
  content: '';
  background-image: url(../images/marker.webp);
  background-repeat: repeat-x;
  background-position: right;
  background-size: contain;
  position: absolute;
  top: 0.3em;
  left: -0.5em;
  mix-blend-mode: multiply;
}
.item_cl .detail-box_cl .item-point {
  margin: 1em 0;
}
.item_cl .detail-box_cl .item-point img {}
/* spec */
.item_cl .detail-box_cl .spec_wrap_cl {}
.item_cl .detail-box_cl .spec_wrap_cl a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6em;
}
.item_cl .detail-box_cl .spec_wrap_cl a img {
  width: 7.3em;
}
.item_cl .detail-box_cl .spec_wrap_cl a .spec-txt {
  text-align: center;
}
.item_cl .detail-box_cl .spec_wrap_cl a .spec-txt .spec_cl {
  font-size: 84%;
  letter-spacing: 0;
  text-align: center;
  line-height: 1.4;
  margin: 0 0 0.4em;
  font-family: var(--font-sweat-M);
}
.item_cl .detail-box_cl .spec_wrap_cl a .spec-txt .spec_cl .name_cl {}
.item_cl .detail-box_cl .spec_wrap_cl a .spec-txt .buy_text {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  font-size: 95%;
  line-height: 1.4;
  font-family: var(--font-sweat-DB);
}
.item_cl .detail-box_cl .spec_wrap_cl a .spec-txt .buy_text .tanyi_cl {}
.item_cl .detail-box_cl .spec_wrap_cl a .spec-txt .buy_text .price_cl {
  font-family: var(--font-sweat-en);
  font-weight: 700;
  font-style: italic;
}
.item_cl .detail-box_cl .spec_wrap_cl a .spec-txt .buy_text.red_cl {
  color: #e4005a;
}
.item_cl .detail-box_cl .spec_wrap_cl a .spec-txt .buy_btn {
  display: block;
  background: #000;
  color: #FFF;
  border-radius: 2em;
  width: max-content;
  padding: 0.4em 2em;
  letter-spacing: 0.2em;
  font-size: 120%;
  margin: 0.67em auto 0;
  font-family: var(--font-sweat-en);
  font-weight: 400;
  font-style: italic;
  line-height: 1;
  transition: all 0.3s;
}

@media (hover: hover) {
    .item_cl .detail-box_cl .spec_wrap_cl a:hover .spec-txt .buy_btn {background: #31d2d9;}
}

/*==================================

個別

==================================*/
.item_cl:nth-child(2n) {}
/* メイン */
.item_cl:nth-child(2n) .model_cl {
  order: 1;
}
.item_cl:nth-child(2n) .model_cl .c-bg {
  background-image: linear-gradient(60deg, #f0fff4, #f0fffa 60%, #edfffc);
  height: 100%;
  width: calc(100% + 50vw);
  left: 10%;
}

.item_cl:nth-child(2n) .model_cl a .icon-wrap {
  left: auto;
  right: 4%;
}
.item_cl:nth-child(2n) .model_cl a .icon-wrap img {}

.item_cl:nth-child(2n) .detail-box_cl .item-catch {
  color: var(--sweat-theme02-color);
  border-color: var(--sweat-theme02-color);
  margin-left: auto;
  margin-right: -27%;
}

.item_cl .model_cl a img.sub-item {
  position: absolute;
  bottom: -9%;
  right: -19%;
  width: 39%;
}
/*==================================

リスト上

==================================*/
#list-anchor {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8em;
  position: relative;
  font-family: var(--font-sweat-DB);
  text-align: center;
  line-height: 1.4;
  font-size: 135%;
  letter-spacing: 0.1em;
  margin: 4em 0 1em;
}
#list-anchor p {}
#list-anchor::before, #list-anchor::after {
  display: block;
  width: 1.8em;
  height: 1.8em;
  content: '';
  /* background-image: url(../images/list_arrow.svg); */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/*==================================

アニメーション

==================================*/
.fade_cl {
  opacity: 0;
}
.fade_cl.fadeIn_cl {
  animation: fade_cl 0.7s forwards 0s;
}
.model_cl {
  transition: all 0.7s;
}
@keyframes fade_cl {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn_cl {
  0% {
    transform: translateY(1em);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fadeInR_cl {
  0% {
    transform: translateY(-25px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
/*===================================

1000px以下

===================================*/
@media (max-width: 920px) {}
/*===================================

880px以下

===================================*/
@media (max-width: 880px) {}
/*===================================

スマホ

===================================*/
@media (max-width: 768px) {
  .pc_cl {
    display: none;
  }
  .sp_cl {
    display: block;
  }
  #sp-contents {
    width: 100%;
  }
  #wrapper {
    font-size: 3.1vw;
    overflow: hidden;
  }
  /*------------------------------------

タイトル

------------------------------------*/
  #title {}
  #title .titleinner {}
  #title .titleinner .fv-image.fv01 {
    width: 83%;
    margin: 0 0 0 -23%;
  }
  #title .titleinner .fv-image.fv02 {
    display: none;
  }
  #title .titleinner .fv-image.fv03 {
    top: 45%;
    right: 23.5%;
    width: 31.7%;
  }
  #title .titleinner .fv-catch {
    top: 44%;
    left: 19.5%;
    width: 9.5%;
  }
  #title .titleinner .main-logo {
    top: 5.5%;
    right: 2.8%;
    width: 52%;
  }
  #title .titleinner .main-logo .logo-img {}
  #title .titleinner .main-logo .logo-img::before {}
  #title .titleinner .main-logo .logo-img img {}
  #title .titleinner .fv-icon {
    flex-direction: column;
    bottom: 1.5%;
    right: 5.0%;
    width: 12.0%;
    gap: 0.6em;
  }
  #title .titleinner .fv-icon img {
    width: 100%;
  }
  #title .titleinner::after {
    width: 65%;
    left: 44.7%;
  }
  /*------------------------------------

リード

------------------------------------*/
  #items_cl .fv-lead {
    margin: 3em 0;
}
  #items_cl .fv-lead p {}
  /*------------------------------------

各アイテム紹介

------------------------------------*/
  #items_cl {}
  #lineup {
    margin: 4em 0 0;
  }
  /* == アイテム == */
  .item_cl {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 auto 6em;
  }
  .item_cl:last-child {}
  /* メイン */
  .item_cl .model_cl {
    width: 85%;
    margin: 0 auto;
    order: 1;
  }
  .item_cl .model_cl .c-bg {
    top: -16%;
    right: -10%;
  }
  .item_cl .model_cl a {}
  .item_cl .model_cl a img {}
  .item_cl .model_cl a .icon-wrap {}
  .item_cl .model_cl a .icon-wrap img {}
  /* 詳細 */
  .item_cl .detail-box_cl {
    display: contents;
    font-size: inherit;
    width: 100%;
  }
  .item_cl .detail-box_cl .item-catch {
    width: 110%;
    margin: 0 0 1.3em;
    margin-left: 12%;
    font-size: 116%;
    border-radius: 1.8em 0 0 0;
    border-right: 0;
    white-space: nowrap;
    padding: 1.4em 1.3em;
  }
  .item_cl .detail-box_cl .item-catch .marker {}
  .item_cl .detail-box_cl .item-catch .marker::after {}
  .item_cl .detail-box_cl .item-point {
    order: 2;
    width: 92%;
    margin: 1.7em 0 1em;
  }
  .item_cl .detail-box_cl .item-point img {}
  /* spec */
  .item_cl .detail-box_cl .spec_wrap_cl {
    order: 3;
  }
  .item_cl .detail-box_cl .spec_wrap_cl a {}
  .item_cl .detail-box_cl .spec_wrap_cl a img {
    width: 6.3em;
  }
  .item_cl .detail-box_cl .spec_wrap_cl a .spec-txt {}
  .item_cl .detail-box_cl .spec_wrap_cl a .spec-txt .spec_cl {}
  .item_cl .detail-box_cl .spec_wrap_cl a .spec-txt .spec_cl .name_cl {}
  .item_cl .detail-box_cl .spec_wrap_cl a .spec-txt .buy_text {}
  .item_cl .detail-box_cl .spec_wrap_cl a .spec-txt .buy_text .tanyi_cl {}
  .item_cl .detail-box_cl .spec_wrap_cl a .spec-txt .buy_text .price_cl {}
  .item_cl .detail-box_cl .spec_wrap_cl a .spec-txt .buy_btn {
    font-size: 120%;
}
  /*==================================

個別

==================================*/
  .item_cl:nth-child(2n) {}
  /* メイン */
  .item_cl:nth-child(2n) .model_cl {}
  .item_cl:nth-child(2n) .model_cl .c-bg { /* top: -16%; */ left: -10%;
    right: auto;
  }
  .item_cl:nth-child(2n) .model_cl a {}
  .item_cl:nth-child(2n) .model_cl a img {}
  .item_cl:nth-child(2n) .model_cl a .icon-wrap {}
  .item_cl:nth-child(2n) .model_cl a .icon-wrap img {}
  /* 詳細 */
  .item_cl:nth-child(2n) .detail-box_cl {}
  .item_cl:nth-child(2n) .detail-box_cl .item-catch {
    margin-right: 12%;
    border-radius: 0 1.8em 0 0;
    border-right: 1px solid;
    border-left: none;
    margin-left: 0;
  }
  .item_cl:nth-child(2n) .detail-box_cl .item-catch .marker {}
  .item_cl:nth-child(2n) .detail-box_cl .item-point {}
  .item_cl:nth-child(2n) .detail-box_cl .item-point img {}
  /* spec */
  .item_cl:nth-child(2n) .detail-box_cl .spec_wrap_cl {}
  .item_cl:nth-child(2n) .detail-box_cl .spec_wrap_cl a {}
  .item_cl:nth-child(2n) .detail-box_cl .spec_wrap_cl a img {}
  .item_cl:nth-child(2n) .detail-box_cl .spec_wrap_cl a .spec-txt {}
  .item_cl:nth-child(2n) .detail-box_cl .spec_wrap_cl a .spec-txt .spec_cl {}
  .item_cl:nth-child(2n) .detail-box_cl .spec_wrap_cl a .spec-txt .spec_cl .name_cl {}
  .item_cl:nth-child(2n) .detail-box_cl .spec_wrap_cl a .spec-txt .buy_text {}
  .item_cl:nth-child(2n) .detail-box_cl .spec_wrap_cl a .spec-txt .buy_text .tanyi_cl {}
  .item_cl:nth-child(2n) .detail-box_cl .spec_wrap_cl a .spec-txt .buy_text .price_cl {}
  .item_cl:nth-child(2n) .detail-box_cl .spec_wrap_cl a .spec-txt .buy_btn {}
  .item_cl .model_cl a img.sub-item {
    bottom: -2%;
    right: 75%;
    width: 37%;
    display: none;
  }
  /*==================================

リスト上

==================================*/
  #list-anchor {}
  #list-anchor p {}
  #list-anchor::before, #list-anchor::after {}
}