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

/*WEBフォント読み込み*/
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:300,500&display=swap&subset=japanese');

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500&display=swap&subset=japanese');


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
FSの設定打消し
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*メインエリアの横幅制限解除ここから*/
.fs-l-pageMain {
	max-width: 100%;
}

.fs-l-main{
	max-width: 100%;
	padding:0;
	margin:0;
}
/*メインエリアの横幅制限解除ここまで*/


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
全体の設定
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*全体の設定/フォントなど*/
.concept{
	text-align: center;
	font-size:1.4rem;
	line-height: 2;
	letter-spacing: 0.07em;
	font-family:'Noto serif JP', '游明朝','Yu Mincho','YuMincho','Hiragino Mincho ProN','Hiragino Mincho Pro','HGS明朝E','メイリオ','Meiryo','serif'; 
}

.concept h1{
	font-weight: 500;
}

.concept p{
	font-weight: 300;
}

/*widthなどの適応範囲をborder基準に変更*/
.concept, .concept::before, .concept::after{
	box-sizing: border-box;
}


/*SP版画像サイズ制御*/
@media screen and (max-width:768px) {
    /*　画面サイズが768px以下の時はここを読み込む　*/
	.concept img{
	width:100%;
	height: auto;
	}
}

/*ページ内リンクの飛び先位置調整
飛び先に大元にclass追加*/
.anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
PC版とSP版での表示切替（見出しなどで分けたい場合に使用）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*brタグにclassを追加
PCのみで改行→pc <br class="pc">
SPのみで改行→sp <br class="sp">
※両方共通の改行の場合は<br>のみでOK

他、PCとSPで表示を分けたい部分にも使用可能
*/

@media screen and (min-width: 768px){   
  .pc { display:block; }
  .sp { display:none; }
}
@media screen and (max-width: 768px){   
  .pc { display:none; }
  .sp { display:block; }
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
title-visual 部分
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.title-visual{
	padding: 350px 30px 350px;
}
@media screen and (max-width:768px) {
	.title-visual{
		padding: 250px 30px 250px;
	}
}

/*ビジュアル用背景画像の設定/iPhone対応版*/
body:before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background:url(https://www.joint-space.co.jp/category_common/jointspace/concept/img/title_img.jpg) center no-repeat;
  background-size:cover;
}




/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
concept-text 部分
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.concept-text{
	padding:  80px 30px;
	background-color: #fff;
}

/*タイトル見出しの設定*/
.concept-Heading{
	padding: 30px 0px;
	background-image: url(https://www.joint-space.co.jp/category_common/jointspace/concept/img/t_backimage.png);
	background-repeat:no-repeat;
	background-position: center center;
	background-size:contain;
	line-height:1.6;
}
/*タイトル見出しSP版の設定*/
@media screen and (max-width:768px) {
	.concept-Heading{
		font-size:1.9em;
	}
}


.concept-text_01, .concept-text_02, .concept-text_03, .concept-text_04 {
	padding-top: 2em;
}

/*JSロゴの余白*/
@media screen and (max-width:768px) {
	.concept-text_04{
		padding-top: 3em;
	}
}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
brand-map 部分
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.brand-map{
	padding:  40px 30px 80px;
	background-color: #f5f5f5;
}

.brand-map h1{
	font-size:1.2em;
	letter-spacing: 0.1em;
}
@media screen and (max-width:768px) {
	.brand-map h1{
		font-size:1.5em;
	}
}


.brand-map_text{
	font-size:0.7em;
	letter-spacing: 0.1em;
}
@media screen and (max-width:768px) {
	.brand-map_text{
		padding-top: 1em;
	}
}

.brand-map_map{
	padding-top:40px;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
brand-list 部分
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.brand-list{
	padding:  80px 0px 40px 0px;
	background-color: #fff;
}

.brand-list h1 {
	font-size: 1.2em;
}
@media screen and (max-width:768px) {
	.brand-list h1{
		font-size:1.5em;
	}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
brand-list 選択プルダウン部分
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.cp_ipselect {
	overflow: hidden;
	width: 300px;
	margin: 2em auto;
	text-align: center;
	font-size:0.6em;
	line-height: 2;
	font-family: 'Noto Sans JP',"Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 400;
}
.cp_ipselect select {
	width: 100%;
	padding-right: 1em;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	border: none;
	outline: none;
	background: transparent;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.cp_ipselect select::-ms-expand {
    display: none;
}
.cp_ipselect.cp_sl01 {
	position: relative;
	border: 1px solid #bbbbbb;
	border-radius: 2px;
	background: #ffffff;
}
.cp_ipselect.cp_sl01::before {
	position: absolute;
	top: 0.8em;
	right: 0.9em;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #666666;
	pointer-events: none;
}
.cp_ipselect.cp_sl01 select {
	padding: 8px 38px 8px 8px;
	color: #666666;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
brand-list ブランド個別部分
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*枠の設定*/
.list-box{
	Width:800px;
	margin:auto;
	margin-top: 3em;
	border: solid 1px black;
	padding:70px;
	text-align: left;	
}
@media screen and (max-width:768px) {
	.list-box {
		Width:100%;
		margin-top:4em;
		padding:10% 5%;
		border-top: solid 1px black;
		border-bottom: solid 0px black;
		border-left: solid 0px black;
		border-right: solid 0px black;
	}
}

/*NEWアイコン*/
.new-icon {
  position: relative;
}
.new-icon:before {
  border-color: #cc0 transparent transparent transparent;
  border-style: solid;
  border-width: 60px 60px 0 0; /*三角形の大きさ*/
  content: "";
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  z-index: 2;
}
.new-icon:after {
  color: #fff;
  content: "NEW";
  font-size: 12px;
  position: absolute;
  top: 10px; /*中のテキストの位置*/
  left: 4px; /*中のテキストの位置*/
  transform: rotate(-45deg);
  z-index: 3;
}


/*メイン画像*/
.list-box img{
	width:100%;
}

/*テキストエリア2列*/
.list-box_Flexbox{
	display: -webkit-flex;
    display: flex;
	padding: 30px 0px 0px 0px ;
}
@media screen and (max-width:768px) {
	.list-box_Flexbox {
		padding: 1em 0px 0px 0px ;
	}
}


/*テキストエリア-ロゴ部分*/
.list-box_Logo{
	flex-basis: 40%;
	border:1px solid #c3c3c3;
	display: flex;
  	justify-content: center;
  	align-items: center;
}

/*テキストエリア-テキスト部分*/
.list-box_TextBox{
	flex-basis: 60%;
	padding: 5px 0px 0px 20px;
}
@media screen and (max-width:768px) {
	.list-box_TextBox {
		padding: 0.15em 0px 0px 1em ;
	}
}
/*ブランド名*/
.list-box_BrandName h2{
	margin:0;
	font-weight: 400;
	font-size:1.4em;
}
/*ブランドの読み方・プロデューサー名*/
.list-box_BrandName-text{
	padding-top: 1em;
	font-size: 0.7em;
	color:dimgray;
	line-height: 1.3;
	font-family: 'Noto Sans JP',"Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 400;
}
/*アイコン*/
.list-box_icon{
	display: -webkit-flex;
    display: flex;
	padding: 10px 0px ;
}
@media screen and (max-width:768px) {
	.list-box_icon {
		padding: 0.25em 0em ;
	}
}
.icon{
	display:inline-block;
	margin-right:10px;
	padding: 2px 10px 2px 10px;
	font-size:0.5em;
	font-family: 'Noto Sans JP',"Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-color: black;
	color:white;
	letter-spacing: 1.2;
}
.icon.Girly{
	background-color: #c27e8e;
}
.icon.Casual{
	background-color: #86ca9d;
}
.icon.Mode{
	background-color: #97b1bf;
}
.icon.Elegance{
	background-color: #c595c5;
}
/*発売サイクル*/
.list-box_Date{
	font-size: 0.95em;
}
@media screen and (max-width:768px) {
	.list-box_Date {
		font-size: 0.8em;
	}
}

/*ブランドキャッチ*/
.list-box_cach h3{
	line-height: 1.5;
	font-size: 1.5em;
	font-family: 'Noto Sans JP',"Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 500;
}
@media screen and (max-width:768px) {
	.list-box_cach h3 {
		font-size: 1.3em;
	}
}
/*ブランドテキスト*/
.list-box_text{
	font-size:0.9em;
	font-weight: 300;
}
@media screen and (max-width:768px) {
	.list-box_text {
		letter-spacing: 0.025;
		line-height: 1.75;
	}
}

/*リンク部分*/
.list-box_LinkBox{
	display: -webkit-flex;
    display: flex;
	padding: 30px 0px 0px 0px;
}
/* ここから下がボタンのCSS　*/
.list-box_LinkBox .item {
	display: inline-block;
	max-width: 200px;
	text-align: left;
	border: 1px solid black;
	
	font-family: 'Noto Sans JP',"Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8em;
	color: black;
	text-decoration: none;
	font-weight: 400;
	white-space: nowrap;
	
	padding: 8px 40px;
	margin-right: 15px;
	/*border-radius: 4px;*/
	transition: .4s;
	
}
.list-box_LinkBox .item:hover {
	background-color: black;
	border-color: black;
	color: #FFF;
}
/* ボタンのCSSここまで　*/

/* ブランドリストに戻るボタン　*/
.return-box{
	Width:800px;
	margin:auto;
	text-align: right;
}
@media screen and (max-width:768px) {
	.return-box {
		Width:100%;
	}
}
.return-btn{
	display:inline-block;
	margin-top:1em;
	padding: 2px 10px 2px 10px;
	font-size:0.7em;
	font-family: 'Noto Sans JP',"Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-color: black;
	color:white;
	letter-spacing: 1.2;
	text-decoration: none;
}

/* ブランド、コラボブランド見出し　*/
.brand-h-box{
	margin-top: 3vw;
	border-top: solid 1px black;
}
.brand-h{
	padding-top: 5em;
	font-size: 1em ;
}
.brand-h_sub{
	padding-top: 1em;
	line-height: 1.2;
	font-size: 0.5em ;
}





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
concept-footer JSロゴ
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.concept-footer{
	padding: 100px 30px 100px;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
concept-footerinfo お知らせバナー
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.concept-footerinfo{
	padding: 40px 30px 80px;
    background-color: #f5f5f5;
}
@media screen and (max-width:768px) {
	.concept-footerinfo {
		padding: 1em 0;
	}
}
.concept-footerinfo .info-box{
	/*フレックスボックスの設定*/
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	/*フレックスボックスの要素を中央寄せ*/
	justify-content: center;
	
	margin:auto;
	width:800px;
}
@media screen and (max-width:768px) {
	.concept-footerinfo .info-box {
		width:100%;
	}
}
.concept-footerinfo .info-box img{
	width:100%;
}
.concept-footerinfo .info-box_item{
	padding:5px;
	width:45%;
}

/*共通フッターのマージン調整*/
.footer-sp{
	margin-top: 0 !important;
}


/*----------------------------------------
 ex:ふわっと表示jQueryのcss設定
----------------------------------------*/
.fadein {
	opacity : 0;
	transform: translateY(50px);
	transition: all 0.75s;
	-moz-transform: translateY(50px);
	-webkit-transform: translateY(50px);
	-o-transform: translateY(50px);
	-ms-transform: translateY(50px);
}



/*----------------------------------------
 ページ内　飛び先　位置調整
----------------------------------------*/

#lpg, #psc, #lvn, #fch, #mtj, #yjc, #lia, #jsm, #noriko,
#michiko, #erin, #collabo-93_0920, #tina, #scc, #anc {
	margin-top: -130px;
    padding-top: 130px;
}

@media screen and (max-width:768px) {
	#lpg, #psc, #lvn, #fch, #mtj, #yjc, #lia, #jsm, #noriko,
	#michiko, #erin, #collabo-93_0920, #tina, #scc, #anc {
		margin-top: -20px;
		padding-top: 20px;
	}

}