@charset "utf-8";
/* CSS Document */

#compression_bukatsu {
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	font-size: 1.6rem;
	-webkit-text-size-adjust: 100%;
  font-feature-settings: "palt";
  text-align: center;
  background-color: #f3f4f6;
  max-width: 575px;
}


/*::::::::::::::::::::::::::::::::::
　AdobeFont
:::::::::::::::::::::::::::::::::::*/
#compression_bukatsu .font_segoe-print {
  font-family: "segoe-print", sans-serif;
  font-weight: 400;
  font-style: normal;
}

#compression_bukatsu .font_aralet-n {
  font-family: "aralet-n", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*::::::::::::::::::::::::::::::::::
　Session
:::::::::::::::::::::::::::::::::::*/

#compression_bukatsu .first_session {
  padding-bottom: 1em;
}

#compression_bukatsu .second_session {
  background-color: #288caf;
  text-align: center;
}


/*::::::::::::::::::::::::::::::::::
　ベース部分背景色・文字色
:::::::::::::::::::::::::::::::::::*/

#compression_bukatsu .bukatsu_base {
  background-color: #f3f4f6;
  color: #288caf;
  margin: 0;
}


/*::::::::::::::::::::::::::::::::::
　スクロール時：ふわっと表示
:::::::::::::::::::::::::::::::::::*/
.scroll-up {
  opacity: 0; 
  visibility: hidden;
  transform: translateY(50px);
  transition: all 1s;
}
.scroll-up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

/*::::::::::::::::::::::::::::::::::
　ふわっとフェードイン
:::::::::::::::::::::::::::::::::::*/

/*以下フェードイン表示の指定*/
.fadein {
    opacity: 0;
    animation: fadein 3s ease forwards;
}
@keyframes fadein {
    100% {  opacity: 1;}
}

/*以下遅延の指定*/
.txt01 {animation-delay: 0s;}
.txt02 {animation-delay: 1s;}
.txt03 {animation-delay: 2s;}
.txt04 {animation-delay: 3s;}

/*::::::::::::::::::::::::::::::::::
　ヒーローイメージ
:::::::::::::::::::::::::::::::::::*/

#compression_bukatsu .bukatsu_hero {
  position: relative;
  width: 100%;
  text-align: right;
}

#compression_bukatsu .bukatsu_hero_title {
  position: absolute;
	top: 45%;
  right: 5px;
  text-align: right;
}

#compression_bukatsu .bukatsu_hero_title h1 {
  font-size: min(6vw, 34px);
  color: #f3f4f6;
	line-height: min(6vw, 34px);
}

#compression_bukatsu .bukatsu_hero_subtitle {
  position: absolute;
	top: 78%;
  right: 18px;
  
  text-align: right;
}

#compression_bukatsu .bukatsu_hero_subtitle p {
  font-size:  min(3vw, 16px);
  color: #f3f4f6;  
}


/*::::::::::::::::::::::::::::::::::
　イントロ部分
:::::::::::::::::::::::::::::::::::*/

#compression_bukatsu .intro {
  line-height: min(10vw, 54px);
  margin-top: 1.5em;
}

#compression_bukatsu .intro_span {
  font-size: 4vw;
  font-size: min(4vw, 20px);
  padding: 0.5em 2.8em;
  background-color: #288caf;
  color: #f3f4f6;
}

#compression_bukatsu .intro_span_x {
  font-size: 1.4rem;
  font-weight: 900;
  color: #288caf;
}

#compression_bukatsu .intro_txt {
  font-size: 3.5vw;
  font-size: min(3.5vw, 16px);
  font-weight: 600;
  line-height: 8vw;
  line-height: min(8vw, 48px);
  text-align: center;
  background-color: #f3f4f6;
  color: #288caf;
  padding-top: 1em;
}



/*::::::::::::::::::::::::::::::::::
　スポーツ別おすすめウェア ページ内リンク
:::::::::::::::::::::::::::::::::::*/

#compression_bukatsu .sports_scene_title h3 {
  color: #f3f4f6;
  font-size: 5vw;
  font-size: min(5vw,24px);
  padding-top: min(10vw, 54px);
}

#compression_bukatsu .sports_scene_title p {
  color: #f3f4f6;
  font-size: 4vw;
  font-size: min(4vw, 20px);
  padding-bottom: 5vw;
}

#compression_bukatsu .sports_scene_img {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#compression_bukatsu .sports_scene_img .a_box {
  padding: 1%;
	width: 48%;  
}

#compression_bukatsu .sports_scene_img img {
	width: 100%;  
}


/*::::::::::::::::::::::::::::::::::
　各スポーツシーンおすすめアイテム紹介
:::::::::::::::::::::::::::::::::::*/

#compression_bukatsu .sports_scene_box {
  position: relative;
  display: inline-block;
  background-color: #f3f4f6;
  border-radius: 20px;
  margin: 10% 3%;
  text-align: center;
  color: #288caf;
  padding: 0.5em 0em 1em;
}

#compression_bukatsu .sports_scene_box:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #f3f4f6;
}

#compression_bukatsu .sports_name {
  font-size: 3vw;
  font-size: min(3vw, 12px);
  font-weight: 800;
}

#compression_bukatsu .sports_name strong {
  font-size: 6vw;
  font-size: min(6vw, 34px);
  font-weight: 800;
}

#compression_bukatsu .sports_icon img {
  width: 15%;
  margin: 0.5em;
}

#compression_bukatsu .sports_txt {
  display: flex;
  justify-content: center;
  font-size: 3.5vw;
  font-size: min(3.5vw, 16px);
  padding: 0 5%;
  line-height: 30px;
}

#compression_bukatsu .sports_txt {
  text-align: left;
}

/*:: おすすめアイテム紹介 :::::::::::::::::::::::*/

#compression_bukatsu .recommend_item {
  margin-top: 10%;
}

#compression_bukatsu .recommend_item_img {
  width: 100%;
  text-align: center;
}

#compression_bukatsu .recommend_item_img img {
  width: 60%;
}

#compression_bukatsu .recommend_item_detail {
  width: 90%;
  padding-left: 5%;
  text-align: left;
}

#compression_bukatsu small {
  font-size: 2vw;
  font-size: min(2vw, 10px);
}

#compression_bukatsu .recommend_item_name {
  font-size: 4.5vw;
  font-size: min(4.5vw,20px);
  font-weight: 800;
  margin: 1em 0 0.5em;
}

#compression_bukatsu .recommend_item_price {
  font-size: 3.5vw;
  font-size: min(3.5vw, 16px);
  font-weight: 400;
  padding-bottom: 1em;
}

#compression_bukatsu .recommend_item_funcion {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

#compression_bukatsu .recommend_item_detail img {
  margin: 0.1em;
}

#compression_bukatsu .recommend_item_uv {
  text-align: left;
}

/*:: お客様の声 :::::::::::::::::::::::*/

#compression_bukatsu .review {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

#compression_bukatsu .review_title {
  width: 100%;
  margin-top: 1.5em;
}

#compression_bukatsu .review_title h5 {
  font-size: 5vw;
  font-size: min(5vw,24px);
  font-weight: 800;
}

#compression_bukatsu .review_comment {
  width: 90%;
  background-color: #288caf;
  border-radius: 20px;
  text-align: left;
  margin: 0.2em 0;
}

#compression_bukatsu .review_comment p {
  color: #f3f4f6;
  font-size: 3.5vw;
  font-size: min(3.5vw, 16px);
  padding: 1.5em;
  line-height: min(5vw,24px);
}


/*:: ご購入はこちら :::::::::::::::::::::::*/

#compression_bukatsu .buy_item {
  color: #f3f4f6;
  font-size: 5vw;
  font-size: min(5vw,24px);
  font-weight: 600;
  margin: 0.8em;
}


/*::::::::::::::::::::::::::::::::::
　その他の商品群紹介吹き出し
:::::::::::::::::::::::::::::::::::*/

#compression_bukatsu .other_compre_box {
  position: relative;
  display: inline-block;
  background-color: #288caf;
  border-radius: 20px;
  margin: 3em 0em 1em;
  text-align: center;
  color: #f3f4f6;
  padding: 5%;
}

#compression_bukatsu .other_compre_box:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #288caf;
  max-width: 575px;
}

#compression_bukatsu .other_compre_box p {
  font-size: 3.5vw;
  font-size: min(3.5vw, 16px);
  font-weight: 600;
  line-height: 5vw;
  line-height: min(5vw,24px);
}

#compression_bukatsu .other_compre_title h3 {
  font-size: 5vw;
  font-size: min(5vw,24px);
  font-weight: 600;
  color: #288caf;
  margin: 1em 0;
}



/*::::::::::::::::::::::::::::::::::
　デフォルト表示調整
:::::::::::::::::::::::::::::::::::*/

/*:: 親カテ―子カテ間の余白削除 :::::::::::::::::::::::*/
.block-section {
  padding: 0;
}

/*:: サムネイルマージン :::::::::::::::::::::::*/
.block-thumbnail-t {
  margin: 0 0.5em;
}

/*:: 商品名カラー変更 :::::::::::::::::::::::*/
.block-thumbnail-t--goods-name a {
  color: #1d1d1d;
}

.block-thumbnail-t--goods-name {
  color: #1d1d1d;  
}

/*:: リンクマウスオーバー時半透明 :::::::::::::::::::::::*/
.hover-opacity {
  transition-property: opacity;
  transition-duration: 0.5s;
}
.hover-opacity:hover {
  opacity: 0.7; 
}

/*:: もっと見るを非表示にする :::::::::::::::::::::::*/
.block-link { 
  display: none;
}

.btn-more-link {
  margin-top: 30px;
  text-align: center;
}

.btn-more-link--link {
  padding: 0.5em 1em;
  margin: 2em 0;
  font-weight: bold;
  color: #363636;
  background: #FFF;
  border: solid 1px #363636;
  border-radius: 10px;
}

/*:: イベント上部の余白削除 :::::::::::::::::::::::*/
.block-top-event {
  padding: 0px;
}

/*:: 商品サムネイル中央寄せ :::::::::::::::::::::::*/
.block-thumbnail-t--items {
  justify-content: center;
}

/*:: サムネイル商品名左寄せ :::::::::::::::::::::::*/
.block-thumbnail-t--goods-name {
    text-align: left;
}

/*:: 表示形式を非表示にする :::::::::::::::::::::::*/
.block-goods-list--sort-order-items{ 
  display: none;
}
.block-goods-list--display-style-items {
  display: none;
}

/*:: 表示件数（上）を非表示にする :::::::::::::::::::::::*/
.block-goods-list--pager-top{ 
  display: none;
}

/* 表示件数（下）を非表示にする */
.block-goods-list--pager-bottom{ 
  display: none;
}




