@charset "utf-8";

.sns {
	top: 500px !important;
	background-color: rgba(255,255,255,0) !important;
}

.brSP {
	display: none;
}

@media screen and (min-width: 0) and (max-width: 768px) {
	.brSP {
		display: inline-block;
	}
}



/*-----------------------------------------------
	フェードインアニメーション
-----------------------------------------------*/


.list-mv01{
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
	transition: .8s;
}

.mv01{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}


/*-----------------------------------------------
	全体
-----------------------------------------------*/

#Main{
	margin-bottom: 185px;
}

@media screen and (min-width: 0) and (max-width: 768px) {
#Main{
	margin-bottom: 26vw;
}
}

/*-----------------------------------------------
	タイトル
-----------------------------------------------*/

.professionaltitle {
	width: 100%;
	height: 0;
	padding-top: 21.61583333%;
	background: url(../images/brandstory/professional/title.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
	position: relative;
}

.professionaltitle div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: right;
	font-weight: normal;
	font-family: 'Yu Gothic',YuGothic,'游ゴシック体','游ゴシック','YuGothM','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
	font-size: 30px;
	color: #fff;
	letter-spacing: 0.1em;
}

.professionaltitle div p {
	max-width: 1140px;
	height: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
}

@media screen and (min-width: 0) and (max-width: 768px) {
	/*-----------------------------------------------
		タイトル
	-----------------------------------------------*/

	.professionaltitle {
		width: 100%;
		height: 0;
		padding-top: 30.666666666%;
		background: url(../images/brandstory/professional/title.jpg) no-repeat;
		background-size: 150%;
		background-position: center;
		position: relative;
	}

	.professionaltitle div {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-align: right;
		font-weight: normal;
		font-family: 'Yu Gothic',YuGothic,'游ゴシック体','游ゴシック','YuGothM','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
		font-size: 4vw;
		color: #fff;
		letter-spacing: 0.1em;
	}

	.professionaltitle div p {
		max-width: 100%;
		height: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
	}
}



/*-----------------------------------------------
	kissoraのこだわり　共通　内容
-----------------------------------------------*/
.professional .commit_contents{
	text-align: center;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
}

.professional .commit_contents .professional_title{
	margin-top: 220px;
}

.professional .commit_contents01 .professional_title{
	margin-top: 150px;
}

.professional .commit_contents .professional_title p{/*数字*/
	font-family: 'Roboto-Thin','Roboto-Light','Raleway-Regular','Raleway-Bold','Raleway-ExtraLight','游ゴシック体','游ゴシック','YuGothM','YuGothB','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
	font-weight: normal;
	font-size: 48px;
	border: 1px solid #1a0c08;
	width: 111px;
	height: 111px;
	text-align: center;
	margin: 0 auto;
	padding-top: 21px;
	box-sizing: border-box;
}

.professional .commit_contents .professional_title p span{/*professional*/
	font-family: 'Raleway-Medium','Raleway-Regular','Raleway-Bold','Raleway-ExtraLight','游ゴシック体','游ゴシック','YuGothM','YuGothB','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
	font-weight: normal;
	font-size: 14px;
	display: block;
	margin-bottom: 0.2em;
	letter-spacing: 0;
}


.professional .commit_contents .professional_title h3{/*コメント*/
	font-size: 30px;
	letter-spacing: 0.16em;
	margin-top: 1.15em;
	margin-bottom: 2.2em;
	font-weight: normal;
	line-height: 160%;
}

.professional .commit_contents ul:after {
	height: 0;
	visibility: hidden;
	content: "";
	display: block;
	clear: both;
}

@media screen and (min-width: 769px) {/*PC only*/

	.professional .commit_contents ul li{
		width: 50%;
		max-width: 560px;
		height: 560px;
		position: relative;
		float: left;
		text-align: left;
	}

	.professional .commit_contents ul li div{
		position: absolute;
		width: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
	}

}


.professional .commit_contents .professional_text p{
	padding-left: 30px;
	letter-spacing: 0.08em;
	line-height: 2.25;
}

.professional .commit_contents .professional_text p span{
	font-size: 20px;
	display: block;
	line-height: 180%;
}

/*極限までこだわる、革づくり だけ*/
.professional .commit_contents.commit_contents01 .professional_text p span{
margin-top:1.6em;
}


/*“made in JAPAN”　こだわりの国内一貫生産*/
.professional .commit_contents.commit_contents02 .professional_title h3 span{/*コメント*/
	font-family:'Raleway-Medium','Raleway-Regular','Raleway-Bold','Raleway-ExtraLight','游ゴシック体','游ゴシック','YuGothM','YuGothB','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
	letter-spacing: 0.1em;
	}

.professional .commit_contents.commit_contents02 ul li{
	float: right;
	text-align: right;
}

.professional .commit_contents.commit_contents02 ul li p{
	padding-right: 40px;
	padding-left: 0;
}

.professional .commit_contents.commit_contents02 .professional_text p span{
	margin-bottom:2em;
}

/*“シンプル・イズ・ベスト” ずっと使ってほしいから。*/
.professional .commit_contents.commit_contents03 .professional_title h3 span{/*コメント*/
	font-family:'YuGothM','Raleway-Medium','Raleway-Regular','Raleway-Bold','Raleway-ExtraLight','游ゴシック体','游ゴシック','YuGothB','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
}


/*ブランドとのコラボ 新たなブランド価値を創出*/
.professional .commit_contents.commit_contents04 ul li{
	float: right;
	text-align: right;
}

.professional .commit_contents.commit_contents04 ul li p{
	padding-right: 40px;
	padding-left: 0;
}

.professional .commit_contents.commit_contents04 .professional_text p span{
	margin-bottom:2em;
}
.professional .commit_contents.commit_contents04 .professional_text p a{
	display: inline-block;
    position: relative;
	left: -1em;
}
.professional .commit_contents.commit_contents04 .professional_text p a:after{
	content: "";
    position: absolute;
    top: 0.8em;
    right: -1em;
	width: 7px;
    height: 7px;
    border-top: 1px solid #1a0c08;
    border-right: 1px solid #1a0c08;
    transform: rotate(45deg);
}



@media screen and (min-width: 0) and (max-width: 768px) {
/*-----------------------------------------------
	kissoraのこだわり　共通　内容
-----------------------------------------------*/
	.professional .commit_contents{
	width: 100%;
	font-family:'YuGothR','游ゴシック体','游ゴシック','YuGothB','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
	}

	.professional .commit_contents .professional_title{
		margin-top: 26vw;
	}

	.professional .commit_contents01 .professional_title{
		margin-top: 14.7vw;
	}

	.professional .commit_contents .professional_title p{/*数字*/
		font-size: 8vw;
		width:19.6vw;
		height: 19.6vw;
		padding-top: 3.7vw;
	}
	
	.professional .commit_contents .professional_title p span{/*professional*/
		font-size: 2.66vw;
		margin-bottom: 0.15em;
	}

	.professional .commit_contents .professional_title h3{/*コメント*/
		font-size: 3.8vw;
		margin-top: 1em;
		margin-bottom: 1.7em;
		letter-spacing: 0.1em;
	}

	.professional .commit_contents .professional_text p {
		margin-top: 5.6vw;
		line-height: 2;
		padding: 0!important;
		text-align: center;
	}

	.professional .commit_contents .professional_text p span{
		font-size: 3.8vw;
		margin-top:1.3em;
		margin-bottom:1.3em;
		
	}

	.professional .commit_contents ul li{
		width: 100%;
	}

/*“made in JAPAN”　こだわりの国内一貫生産*/
.professional .commit_contents.commit_contents02 h3{
	line-height: 1.8em;
}

/*ブランドとのコラボ 新たなブランド価値を創出*/
.professional .commit_contents.commit_contents04 .professional_text p a:after{
    top: 0.8em;
    width: 1.2vw;
	height: 1.2vw
}

}