@charset "utf-8";
/* CSS Document */

.sweat_shell_series {
	font-size:62.5%;/*16px×62.5％＝10px*/
	color: #000;
	font-feature-settings: "palt";
  text-align: center; 
}

.sweat_shell_series img{
	max-width: 100%;
	height: auto;
}

.sweat_shell_series ul li{
  list-style: none;
}

/*---------------------------
CSS animetion
 --------------------------*/
/* 右から左へスライドイン */
.RightSlideIn{
  animation: LightSlideIn 3s;
}
@keyframes LightSlideIn {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 左から右へスライドイン */
.LeftSlideIn{
  animation: LeftSlideIn 1.6s;
}
@keyframes LeftSlideIn {
 0% {
    opacity: 0;
    transform: translateX(-64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 上から下へスライドイン */
.DownSlideIn{
  animation: DownSlideIn 1.6s;
}
@keyframes DownSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-64px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 下から上へスライドイン */
.UpSlideIn{
  animation: UpSlideIn 4s;
}
@keyframes UpSlideIn {
  0% {
    opacity: 0;
    transform: translateY(64px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*---------------------------
hero-image h1
 --------------------------*/
.hero-image {
  position: relative;
  width: 740px;
  height: 644px;
  margin-bottom: 45px; 
  }

.hero-image .catch_copy1 {
	position: absolute;
	bottom: 125px;
	right: 60px;
	margin: 0;
	padding: 0;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.1em;
  color: #FFF;
  }

.hero-image .catch_copy2 {
	position: absolute;
	bottom: 58px;
	right: 100px;
	margin: 0;
	padding: 0;
	font-size: 2.0rem;
	font-weight: 900;
	letter-spacing: 0.1em;
  color: #FFF;
  }

.hero-image .catch_copy3 {
	position: absolute;
	bottom: -2px;
	right: 135px;
	margin: 0;
	padding: 0;
	font-size: 2.0rem;
	font-weight: 900;
	letter-spacing: 0.1em;
  color: #FFF;
  }


/*---------------------------
sweat_shell_series logo
 --------------------------*/
.logo-img__center img{
  position: absolute;
  top: 40%;
  left: 50%;
  -ms-transform: translate(-40%,-50%);
  -webkit-transform: translate(-40%,-50%);
  transform: translate(-40%,-50%);
  margin:0;
  padding:0;
  width: 112px;
}

.logo-img__center .series_name{
  position: absolute;
  top: 40%;
  left: 50%;
  -ms-transform: translate(-40%,-50%);
  -webkit-transform: translate(-40%,-50%);
  transform: translate(-40%,-50%);
  margin:30px 0 0 0;
  padding:0;
  width: 112px;
  color: #FFF;
	font-weight: 600;
  font-size: 0.6rem;
}

/*---------------------------
 main title&function
 --------------------------*/
.style-function_box ul {
	display: flex;
	justify-content: center;
	align-items: center;
  padding-bottom: 10px;
}
.style-function_box li {
	padding: 0px 10px;
	width: auto;
	display: flex;
	align-items: center;
}

.style-function {
  line-height: normal;
  background-color: #000;
  color: #FFF;
	font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.8;
  padding: 0 10px;
  letter-spacing: 0.05em;
  }

.kakeru {
  width: 25px;
  }

/*---------------------------
episode00
--------------------------*/
.episode00_txt p {
	font-size: 1.0rem;
	font-weight: 500;
  line-height: 1.8;
  color: #000;
  letter-spacing: 0.1em;
  text-align: center !important;
  padding-bottom: 30px;
}

/*---------------------------
4-lineup_cart
 --------------------------*/
.style-lineup-cart_box ul {
	display: flex;
	justify-content: center;
	align-items: center;
  padding-left: 0;
}
.piste-image ,.anorak-image ,.short_pants-image ,.long_pants-image {
  position: relative;
  }

.sweat_shell_series .style-lineup-cart1 p ,.sweat_shell_series .style-lineup-cart2 p ,.sweat_shell_series .style-lineup-cart3 p ,.sweat_shell_series .style-lineup-cart4 p{
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  color: #000;
  font-size: 0.8rem;
  font-weight: 400;
  width: max-content;
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}

.style-lineup-cart1{
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:145px 0 0 0;
  padding:0;
  width: 205px;
  height: 48px;
}

.style-lineup-cart2 ,.style-lineup-cart4{
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:125px 0 0 0;
  padding:0;
  width: 205px;
  height: 48px;
}

.style-lineup-cart3{
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:80px 0 0 0;
  padding:0;
  width: 205px;
  height: 48px;
}

/*---------------------------
4-lineup_cart-s
 --------------------------*/
.style-lineup-cart_box-s ul {
	display: flex;
	justify-content: center;
	align-items: center;
  padding-left: 0;
}
.style-lineup-cart_box-s li {
  padding-left: 6px;
} 
.style-lineup-cart_box-s li:first-child {
  padding-left: 0px;
}
.piste-image-s ,.anorak-image-s ,.short_pants-image-s ,.long_pants-image-s {
  position: relative;
  }
.sweat_shell_series .style-lineup-cart-s p{
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  color: #000;
  font-size: 0.75rem;
  font-weight: 400;
  width: max-content;
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
  height: 28px;
  text-indent: 0.5em;
}

.style-lineup-cart-s{
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:70px 0 0 0;
  padding:0;
  width: 150px;
}

/*---------------------------
開発エピソードタイトル字
 --------------------------*/
.sweat_shell_series h2 {
    margin: 40px 0 20px 0;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.5;
}
.sweat_shell_series p {
  text-align: left;
}

/*---------------------------
ナンバー英数字
 --------------------------*/
.style-number {
  font-family: 'Kaushan Script', cursive;
  font-size: 2.4rem;
  line-height: normal;
  }

/*---------------------------
白枠 title
 --------------------------*/
.sweat_shell_series_title {
  position: relative;
  margin: 10px 0 20px 0;
  }

.sweat_shell_series_title h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0 0 14px;
  font-size: 1.4rem;
  width: 100%;
  letter-spacing: 0.2em;
  }

.sweat_shell_series_title img {
  width: 50%;
  }

/*---------------------------
着用サイズ別コーデ白枠 title
 --------------------------*/
.sweat_shell_series_title2 {
  position: relative;
  padding: 0 180px;
  margin-bottom:20px;
  }

.sweat_shell_series_title2 h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0 0 14px;
  font-size: 1.4rem;
  width: 100%;
  letter-spacing: 0.2em;
  }

.sweat_shell_series_title2 img {
  width: 100%;
  }

/*---------------------------
ワークマン女子コーデ白枠 title
 --------------------------*/
.sweat_shell_series_title3 {
  position: relative;
  padding: 0 134px;
  margin-bottom:20px;
  }

.sweat_shell_series_title3 h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0 0 14px;
  font-size: 1.4rem;
  width: 100%;
  letter-spacing: 0.1em;
  }

.sweat_shell_series_title3 img {
  width: 100%;
  }

/*---------------------------
 ふきだしtitle black
 --------------------------*/
.btn-gradient {
  position: relative;
  margin: 0 0 2rem;
  padding: 0.1rem;
  border-radius: 10px;
  background: #000;
}

.btn-gradient:before,
.btn-gradient:after {
  position: absolute;
  content: '';
  border-radius: 50%;
  background: #000;
}

.btn-gradient:before {
  bottom: -15px;
  left: 30px;
  width: 30px;
  height: 30px;
}

.btn-gradient:after {
  bottom: -30px;
  left: 50px;
  width: 15px;
  height: 15px;
}
.btn-gradient span {
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 1.5rem;
  color: #FFF;
}

/*---------------------------
episode01
--------------------------*/
.episode01 {
  position: relative;
}
.episode01_txt {
  position: absolute;
  top:60px;
  left: 25px;
}
.episode01_txt p {
	font-size: 1.0rem;
	font-weight: 400;
  line-height: 1.8;
  color: #FFF;
  letter-spacing: 0.1em;
}

/*---------------------------
episode02
--------------------------*/
.episode02 {
}

.episode02 img{
  padding: 22px 0 35px;
}

.episode02 img:last-child {
  padding-bottom: 0px;
}

.episode02_txt p {
	font-size: 1.0rem;
	font-weight: 500;
  line-height: 1.8;
  color: #000;
  letter-spacing: 0.1em;
  padding: 0 2.2rem;
}

/*---------------------------
episode03
--------------------------*/
.episode03 {
	display: flex;
	justify-content: space-between;
	align-items: start;
}
.episode03>episode03_txt{
    width: 30%;
}

.episode03_txt p {
	font-size: 1.0rem;
	font-weight: 500;
  line-height: 1.8;
  color: #000;
  letter-spacing: 0.1em;
  padding: 0 2.2rem;
}

.episode03 img {
  padding: 0 3rem 0 2rem;
}

.mat30 {
  margin-top: 30px;
}

/*---------------------------
episode04
--------------------------*/
.episode04 {
	display: flex;
	justify-content: space-between;
	align-items: start;
}
.episode04>episode04_txt{
    width: 30%;
}

.episode04_txt p {
	font-size: 1.0rem;
	font-weight: 500;
  line-height: 1.8;
  color: #000;
  letter-spacing: 0.1em;
  padding: 0 2.2rem 0 0.8rem;
}

.episode04 img {
  padding: 0 0 0 2.4rem;
}

.mat30 {
  margin-top: 30px;
}

/*---------------------------
episode05
--------------------------*/
.episode05{
  padding-bottom: 50px;
}
.episode05 .episode05_txt {
	font-size: 1.0rem;
	font-weight: 500;
  line-height: 1.8;
  color: #000;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 2.4rem;
}

.style_box ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.style_box li {
	width: 180px;
	display: flex;
	align-items: center;
}

/*---------------------------
かずひさんyoutubeキャプション
--------------------------*/
.caution_black a {
  font-size: 0.6rem;
  color: #000;
}

.caution_white a {
  font-size: 0.6rem;
  color: #FFF;
}

.caution_center a{
  font-size: 0.6rem;
  color: #000;
  text-align: center;
  display: block;
}

/*---------------------------
アンダーライン
--------------------------*/
.under {
  background: linear-gradient(transparent 80%, #a4b7d0 80%);
}

.under_tobe {
  background: linear-gradient(transparent 80%, #c6bcac 80%);
}

/*---------------------------
身長別スタイルイメージ
--------------------------*/
.style_image_by_height {
  position: relative;
}
.style_image_by_height_txt {
  position: absolute;
  top:60px;
  left: 25px;
}
.style_image_by_height p {
	font-size: 1.0rem;
	font-weight: 500;
  line-height: 1.8;
  color: #FFF;
  letter-spacing: 0.1em;
}


/*---------------------------
身長別スタイルイメージ
--------------------------*/
.style_image_by_height{
  padding-bottom: 50px;
}
.style_image_by_height-list{
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
  padding: 0 30px;
  height: 118px;
	}
.style_image_by_height-item{
	position: relative;
	width: 33.333%;
	}
.style_image_by_height-item__title{
	position: absolute;
	top:50%;
	left: 50%;
	width: 100%;
	color: #000;
	font-size: 0.8rem;
	line-height: 1.4;
	transform: translate3d(-50%,-50%,0);
}
.style_image_by_height-item__title {
  padding-right: 20px;
}

/*---------------------------
着用サイズ別コーデイメージ
--------------------------*/
.style_image_by_wearing_size{
  padding-bottom: 50px;
}
.style_image_by_wearing_size-list{
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
  padding: 0 30px;
  height: 118px;
	}
.style_image_by_wearing_size-item{
	position: relative;
	}
.style_image_by_wearing_size-item__title{
	position: absolute;
	top:50%;
	left: 50%;
	width: 100%;
	color: #000;
	font-size: 0.8rem;
	line-height: 1.4;
	transform: translate3d(-50%,-50%,0);
}
.style_image_by_wearing_size-item__title{
  margin-top: 20px;
}
/*---------------------------
サイズ表
--------------------------*/
.center80{
  width: 75%;
  margin: 0 auto;
}
.size_table {
 width: 100%;
 text-align: center;
 border-collapse: collapse;
 border-spacing: 0;
 margin: 20px 0;
 font-size: 0.6rem;  
}
.size_table th {
 text-align: center;
 padding: 5px;
 border-top: solid 1px #ddd;
 border-bottom: solid 1px #ddd;
 background-color: #EEE;
 color: #000;
}
.size_table td {
 padding: 5px;
 border-bottom: solid 1px #ddd;
}
.width20{
  width: 20%;
}
/*---------------------------
ワークマン女子オーバーサイズコーデ
--------------------------*/
.sweat_shell_series-workman_girls{
  padding: 0 8px 20px;
}
.sweat_shell_series-workman_girls-list{
	display: flex;
  padding: 0 0 20px;
	}

.sweat_shell_series-workman_girls-list li:first-of-type {
  padding-top: 170px;
}

.sweat_shell_series-workman_girls-item{
	position: relative;
	}
.sweat_shell_series-workman_girls-item__title{
	position: absolute;
	top:400px;
	left: 40px;
	color: #000;
	font-size: 1rem;
	line-height: 1.4;
}

/*---------------------------
ワークマン女子オーバーサイズコーデ英字
 --------------------------*/
.style-workman_girls_font {
  font-family: 'Permanent Marker', cursive;
  font-size: 2.2rem;
  line-height: 1.4;
  text-align: left;
  padding: 0;
  margin: 0;
  }

/*---------------------------
ワークマン女子オーバーサイズコーデテキスト
 --------------------------*/
.style-workman_girls_txt {
	font-size: 1.0rem;
	font-weight: 500;
  line-height: 1.8;
  color: #000;
  text-align: left;
  letter-spacing: 0.025em;
  margin: 0;
}

/*---------------------------
もっと見るを非表示にする 
--------------------------*/
.block-link { 
  display: none;
}

/*---------------------------
イベントタイトルレイアウト調整
--------------------------*/
.block-top-event {
    padding: 0;

}







stg-workman.ecbeing.biz