@charset "UTF-8";
/*=============================================================
 04_modules
=============================================================*/
/* inner
================================================ */
/*
#styleguide
mod_inner01

SP,タブレット:両端パディング7px
PC:max-width1260pxでセンタリング＆border-box

```
<section id="hoge">
	<div class="inner mod_inner01">
		<h2 class="tit mod_tit01">タイトル</h2>
		<p class="txt">テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</div>
</section>
```
*/
.mod_inner01 {
	padding-left: 7px;
	padding-right: 7px;
}

@media all and (min-width: 960px) {
.mod_inner01 {
	max-width: 1260px;
	margin: 0 auto;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}
}
/* tit
================================================ */
/*
#styleguide
mod_tit01

SP:画像の高さ24px + padding上下12px
PC:画像の高さ30px + padding上下50px

```
<h3 class="mod_tit01">TITLE</h3>
```
*/
.mod_tit01 {
	padding: 12px 0;
	background-color: #ab191e;
	text-align: center;
}
.mod_tit02 {
	padding: 12px 0;
	background-color: #2b2b2b;
	text-align: center;
}
.mod_tit01 img {
	height: 24px;
	width: auto;
	vertical-align: bottom;
}
.mod_tit02 img {
	height: 24px;
	width: auto;
	vertical-align: bottom;
}

@media all and (min-width: 600px) {
.mod_tit01,.mod_tit02 {
	padding: 50px 0;
}
.mod_tit01 img,.mod_tit02 img {
	height: 30px;
}
}
.endNews {
	margin: 1em 0;
	text-align: center;
}
/* box
================================================ */
/*
#styleguide
mod_box01

collectionページで使用

```
<div class="mod_box01">
	<div class="mod_inner01">
		<div class="txtArea">
			<p class="num">71600<span>SERIES</span></p>
			<h3 class="tit">伸縮性に優れたストレッチ秋冬デニムシリーズ</h3>
			<p class="txt">伸縮性に優れたストレッチデニム素材を使用。<br>カモフラプリントを施しデザイン性を追求したハイブリッドモデルです。</p>
		</div>
		<div class="icoArea">
			<ul class="list">
				<li><img src="../img/collection/ico_mod_box01_04.png" alt=""></li>
				<li><img src="../img/collection/ico_mod_box01_05.png" alt=""></li>
				<li><img src="../img/collection/ico_mod_box01_06.png" alt=""></li>
				<li><img src="../img/collection/ico_mod_box01_07.png" alt=""></li>
				<li><img src="../img/collection/ico_mod_box01_08.png" alt=""></li>
				<li><img src="../img/collection/ico_mod_box01_09.png" alt=""></li>
				<li><img src="../img/collection/ico_mod_box01_10.png" alt=""></li>
			</ul>
		</div>
	</div>
</div>
```
*/
.mod_box01 {
	background-image: url(../img/collection/bg_mod_box01_sp.png);
	background-position: 50% 50%;
	background-size: cover;
	padding: 20px 0;
	overflow: hidden;
}
.mod_box01 .txtArea .num {
	font-size: 1.4rem;
	color: #fff;
	font-family: "oswald", "Noto Sans Japanese", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "MS PGothic", sans-serif;
	font-weight: 700;
	padding: 10px 20px;
	background-color: #ab191e;
	display: inline-block;
	letter-spacing: .1rem;
}
.mod_box01 .txtArea .num span {
	font-size: 1.2rem;
}
.mod_box01 .txtArea .tit {
	font-size: 1.8rem;
	color: #fff;
	font-weight: 700;
	line-height: 1.5;
	padding-top: 10px;
}
.mod_box01 .txtArea .txt {
	font-size: 1.4rem;
	color: #fff;
	line-height: 1.5;
	padding-top: 10px;
}
.mod_box01 .icoArea .list {
	padding-top: 15px;
	padding-left: 1px;
	overflow: hidden;
}
.mod_box01 .icoArea .list li {
	float: left;
	width: 57px;
	padding: 0 2px;
	margin-bottom: 4px;
	margin-left: -1px;
	border-left: 1px solid #595858;
	border-right: 1px solid #595858;
}
.mod_box01 .icoArea .list li.feature06 {
	width: 114px;
}
.mod_box01 .icoArea .list li:last-child {
	border-right: 1px solid #595858;
}
.mod_box01 .icoArea .list li img {
	width: 100%;
}

@media all and (min-width: 600px) {
.mod_box01 {
	background-image: url(../img/collection/bg_mod_box01_pc.png);
	padding: 20px 0;
}
.mod_box01 .inner {
	max-width: 1260px;
	overflow: hidden;
}
.mod_box01 .txtArea {
	float: left;
	width: 50%;
	box-sizing: border-box;
	border-right: 1px solid #fff;
	margin-right: 20px;
	padding: 28px 25px 32px 0;
}
.mod_box01 .txtArea .num {
	font-size: 2.0rem;
	padding: 8px 25px;
}
.mod_box01 .txtArea .num span {
	font-size: 1.6rem;
}
.mod_box01 .txtArea .tit {
	font-size: 2.4rem;
	padding-top: 15px;
}
.mod_box01 .txtArea .txt {
	font-size: 1.5rem;
	line-height: 2;
	padding-top: 15px;
}
.mod_box01 .icoArea .list {
	padding-top: 68px;
}
.mod_box01 .icoArea .list li {
	width: 78px;
	padding: 0 4px;
	margin-bottom: 4px;
}
.mod_box01 .icoArea .list li.feature06 {
	width: 156px;
}
}
/* list
================================================ */
/*
#styleguide

.mod_list01

collectionページで使用
.picに.is_newを追加することでNEWアイコンがつきます。

```
<div class="mod_list01">
	<div class="item">
		<div class="pic is_new"><img src="../img/collection/pic_mod_list01_01.png" alt=""></div>
		<p class="btn"><a href="#">詳細・購入はコチラ</a></p>
	</div>
	<div class="item">
		<div class="pic"><img src="../img/collection/pic_mod_list01_01.png" alt=""></div>
		<p class="btn"><a href="#">詳細・購入はコチラ</a></p>
	</div>
</ul>
```
*/
.mod_list01 {
	box-sizing: border-box;
	overflow: hidden;
}
.mod_list01 .item {
	width: 50%;
	box-sizing: border-box;
	float: left;
	padding: 10px 3px;
}
.mod_list01 .item a {
	display: block;
	position: relative;
}
.mod_list01 .item a.is_new:before {
	position: absolute;
	display: block;
	width: 40px;
	height: 40px;
	content: '';
	background: url(../img/collection/ico_new.png) no-repeat;
	background-size: cover;
	z-index: 10;
}
.mod_list02 li .pic.is_new:before {
	position: absolute;
	display: block;
	width: 40px;
	height: 40px;
	content: '';
	background: url(../img/collection/ico_new.png) no-repeat;
	background-size: cover;
	z-index: 10;
}
.mod_list01 .item a .pic img {
	width: 100%;
}
.mod_list01 .item a .btn {
	margin: 10px 0;
	position: relative;
	border: 1px solid #fff;
	background-color: #a91819;
	color: #fff;
	font-size: 1.3rem;
	font-weight: 700;
	padding: 7px;
	text-decoration: none;
	text-align: center;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.mod_list01 .item a .btn:after {
	position: absolute;
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	right: 3px;
	bottom: 3px;
	border-style: solid;
	border-width: 0 0 7px 7px;
	border-color: transparent transparent #fff transparent;
}

@media all and (min-width: 600px) and (max-width: 959px) {
.mod_list01 {
}
.mod_list01 .item {
	width: 33.333333%;
	padding: 15px 5px;
}
.mod_list01 .item a.is_new:before {
	width: 75px;
	height: 75px;
}
.mod_list02 li .pic.is_new:before {
	width: 75px;
	height: 75px;
}
.mod_list01 .item a .btn {
	padding-top: 20px;
	border: 2px solid #fff;
	background-color:#a91819;
	color: #fff;
	font-size: 1.6rem;
	padding: 20px 10px 18px;
}
.mod_list01 .item a .btn:after {
	right: 4px;
	bottom: 4px;
	border-width: 0 0 10px 10px;
	border-bottom-color: #ffff;
}
}

@media all and (min-width: 960px) {
.mod_list01 {
	max-width: 1260px;
	margin: 0 auto;
}
.mod_list01 .item {
	width: 25%;
	padding: 15px 7px;
}
.mod_list01 .item a.is_new:before {
	width: 75px;
	height: 75px;
}
.mod_list02 li .pic.is_new:before {
	width: 75px;
	height: 75px;
}
.mod_list01 .item a .pic {
	background: #fff;
}
.mod_list01 .item a .pic img {
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}
.mod_list01 .item a .btn {
	border: 2px solid #fff;
	padding: 15px 10px;
	font-size: 1.6rem;
	color: #fff;
	background: #a91819;
}
.mod_list01 .item a .btn:after {
	right: 4px;
	bottom: 4px;
	border-width: 0 0 10px 10px;
	border-bottom-color: #ffff;
}
.mod_list01 .item a:hover {
	text-decoration: none;
}
.mod_list01 .item a:hover img {
	opacity: .7;
}
.mod_list01 .item a:hover .btn {
	border: 2px solid #a91819;
	color: #000;
	background: #fff;
}
/*.mod_list01 .item a:hover .btn {
	color: #fff;
	background: #a91819;
}*/
/*.mod_list01 .item a:hover .btn:after {
	border-bottom-color: #fff;
}*/
.mod_list01 .item a:hover .btn:after {
	border-bottom-color: #a91819;
}
}
/*
#styleguide

.mod_list02

卜部選手コラボページで使用
.picと並列に.ico_redまたは.ico_blackを追加で各選手のアイコンがつきます。

```
<ul class="mod_list02">
	<li>
		<div class="pic ico_red"><img src="../img/collabo/pic_mod_list02_01.png" alt=""></div>
		<p class="btn"><a href="#">詳細・購入はコチラ</a></p>
	</li>
	<li>
		<div class="pic ico_black"><img src="../img/collabo/pic_mod_list02_01.png" alt=""></div>
		<p class="btn"><a href="#">詳細・購入はコチラ</a></p>
	</li>
</ul>
```
*/
.mod_list02 {
	box-sizing: border-box;
	overflow: hidden;
	margin: 0 -6px;
	background-color: #dcdcdc;
}
.mod_list02 li {
	width: 50%;
	box-sizing: border-box;
	float: left;
	padding: 10px 6px;
}
.mod_list02 .pic {
	position: relative;
}
.mod_list02 .pic.ico_black:before, .mod_list02 .pic.ico_red:before {
	display: block;
	content: '卜部弘嵩着用';
	position: absolute;
	background-color: #000;
	font-size: 1.2rem;
	color: #fff;
	padding: 10px 6px 7px;
}
.mod_list02 .pic.ico_red:before {
	content: '卜部功也着用';
	background-color: #b81c22;
}
.mod_list02 .pic img {
	width: 100%;
}
.mod_list02 .btn {
	padding-top: 20px;
}
.mod_list02 .btn a {
	display: block;
	position: relative;
	border: 1px solid #fff;
	background-color: #a91819;
	color: #fff;
	font-size: 1.3rem;
	font-weight: 700;
	padding: 13px 10px;
	text-decoration: none;
	text-align: center;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.mod_list02 .btn a:after {
	position: absolute;
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	right: 3px;
	bottom: 3px;
	border-style: solid;
	border-width: 0 0 7px 7px;
	border-color: transparent transparent #fff transparent;
}

@media all and (min-width: 960px) {
.mod_list02 {
	margin: 0 14px;
}
.mod_list02 li {
	width: 25%;
	padding: 25px 0;
}
.mod_list02 .pic.ico_black:before, .mod_list02 .pic.ico_red:before {
	font-size: 1.8rem;
	padding: 16px 16px 12px;
}
.mod_list02 .btn {
	padding-top: 30px;
}
.mod_list02 .btn a {
	border: 2px solid #a91819;
	background-color: #a91819;
	color:#fff;
	padding: 20px 10px 18px;
	font-size: 1.6rem;
	width: calc(100% - 30px);
	margin: auto;
}
.mod_list02 .btn a:hover {
	background-color: #fff;
	color: #000;
}
.mod_list02 .btn a:after {
	right: 4px;
	bottom: 4px;
	border-width: 0 0 10px 10px;
	border-color: transparent#a91819 #fff transparent;
}
.mod_list02 .btn a:hover:after {
	right: 4px;
	bottom: 4px;
	border-width: 0 0 10px 10px;
	border-color: transparent#a91819 #a91819 transparent;
}
}
/* other
================================================ */
/*
#styleguide
.incLineup

各ページでインクルードする「LINE UP」
*/
.incLineup .items {
	background: #fff;
	text-align: center;
	letter-spacing: -.5em;
}
.incLineup .items .item {
	display: inline-block;
	width: 50%;
	letter-spacing: 0;
}

@media all and (min-width: 600px) {
.incLineup .items .item {
	width: 33.3333%;
}
}

@media all and (min-width: 960px) {
.incLineup .items .item {
	width: 20%;
}
}
/*
#styleguide
.incOnline

各ページでインクルードする「ONLINE SHOP」
*/
.incOnline .bnrs01 {
	padding: 5px;
	background: #fff;
}
.incOnline .bnrs01 .bnr + .bnr {
	margin-top: 5px;
}
.incOnline .bnrs02 {
	padding: 0 5px 5px;
	background: #fff;
}
.incOnline .bnrs02 .bnr + .bnr {
	margin-top: 5px;
}

@media all and (min-width: 600px) {
.incOnline .bnrs02 {
	padding: 0 2px 5px;
	overflow: hidden;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}
.incOnline .bnrs02 .bnr {
	float: left;
	width: 50%;
	padding: 0 3px;
	box-sizing: border-box;
}
.incOnline .bnrs02 .bnr + .bnr {
	margin-top: 0;
}
}

@media all and (min-width: 960px) {
.incOnline .bnrs01 {
	overflow: hidden;
}
.incOnline .bnrs01 .bnr {
	float: left;
	width: 50%;
}
.incOnline .bnrs01 .bnr a {
	display: block;
	border: solid #a91819;
	border-width: 5px 2px 5px 5px;
	background: url(../img/common/online_bg01_pc.png) no-repeat 50% 50%;
	background-size: cover;
}
.incOnline .bnrs01 .bnr a img {
	display: block;
	opacity: 1;
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}
.incOnline .bnrs01 .bnr a:hover img {
	opacity: 0;
}
.incOnline .bnrs01 .bnr + .bnr {
	margin-top: 0;
}
.incOnline .bnrs01 .bnr + .bnr a {
	border-width: 5px 5px 5px 2px;
	background-image: url(../img/common/online_bg02_pc.png);
}
.incOnline .bnrs02 {
	padding: 0 0 5px;
	overflow: hidden;
}
.incOnline .bnrs02 .bnr {
	float: left;
	padding: 0 5px;
	box-sizing: border-box;
}
.incOnline .bnrs02 .bnr + .bnr {
	margin-top: 0;
}
}
.fn-container {
	overflow: auto;
	background-color: #fff;
}