@import url(https://fonts.googleapis.com/css?family=Montserrat);
/*********************************
      COMMON
*********************************/
.cfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.cfix {
  min-height: 1px;
}

*{
  margin:0;
  padding:0;
  line-height:1em;
}
ul,li {
  list-style: none;
}
img{
  border:none;
}

/*コンテンツ幅100%*/
#page-body .container {
    width: 100%;
}

/*パンくず幅1200px*/
.breadcrumb {
    padding: 20px 0 10px;
    margin: 0 auto;
    width: 1200px;
}

/*CHECKED ITEMå¹…1200px*/
div#checked-items {
  margin: 0 auto;
  max-width: 1200px;
}



/*------------------------------------------------------------------------------------------

										個人記述

------------------------------------------------------------------------------------------*/




/*------------------------------全体------------------------------*/
.main > .contents_box{
	width: 1200px;
	margin: 0 auto;
	color: #666;
	line-height: 1.8;
}
p{
	font-size: 14px;
	margin: 0;
}
/*フェードイン*/
.fade{
    opacity : 0;
    transform : translate(0, 30px);
    transition : all 1000ms;
}
.fade.scrollin{
    opacity : 1;
    transform : translate(0, 0);
}

/*hover.css*/
.hvr-grow{
	overflow: hidden;
	box-sizing: border-box;
}
/*改行設定*/
.sp_line{
	display: none;
}
.pc_line{
	display: block;
}
/*--------------------リード文--------------------*/
.lead{
	margin: 50px auto 150px;
	padding: 20px 0 30px;
	text-align: center;
}
.lead > h2{
	font-size: 22px;
	line-height: 2.5;
	font-weight: 700;
}
.lead > p{
	line-height: 2.0;
}

/*--------------------コンテンツ--------------------*/
.box:not(#box03){
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	height: 600px;
}
.box + .box{
	margin-top: 150px;
}
.box_inner{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
	width: 500px;
}
/*box01*/
#box01{
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
}
#box01 .box_inner{
	text-align: right;
}
#box01 h2{
	padding: 10px 20px 10px 100px;
}
/*box02*/
#box02 h2{
	padding: 10px 100px 10px 20px;
}
/*box03*/
#box03 h2,#box03 > p{
	text-align: center;
}
#box03 h2{
	width: 500px;
	padding: 10px 0;
	margin: 0 auto;
}
#box03 > p{
	margin: 20px auto 50px;
}
.wear{
	display: -webkit-flex;
	display: flex;
	-wekit-justify-content: space-between;
	justify-content: space-between;
}
.wear div + div{
	margin-left: 50px;
}
.wear p{
	width: 170px;
	padding: 5px 0;
	margin: 15px auto 0;
	background: #f9f4ef;
	text-align: center;
}
#box03 .buy{
	margin-top: 15px;
}
/*box04*/
.box:not(#box03)#box04{
	background: #f7f9f8;
	width: calc(100vw - 10px);
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}
#box04 > div{
	text-align: center;
	margin-left: 100px;
}
#box04 > div > ul{
	margin-top: 20px;
}

#box04 > div > ul li{
	width: 350px;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	padding: 0 30px;
}
#box04 > div > ul li + li{
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid #555;
}
#box04 > div > ul li p{
	margin-left: 10px;
}
#box04 > div > ul li .buy{
	margin-top: auto;
	margin-right: 0;
	margin-left: auto;
}
#box04 h3{
	font-size: 24px;
	margin-bottom: 5px;
	font-weight: 700;
}
li[class*="color"]:before{
	content: "";
	width: 30px;
	height: 30px;
	border-radius: 50%;
}
.color01:before{
	background: #724f39;
}
.color02:before{
	background: #333;
}
.color03:before{
	background: #bd784b;
}

.color3 {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.color3 li {
	text-align: center;
	width: 30%;
	margin: auto;
}
.color3 li p {
	padding-top: 10px;
}
/*------------------------------------------------------------------
					スライダー(既存css）カスタマイズ
------------------------------------------------------------------*/
.slick-track {
	width: 90%;
	margin: auto;
}

.slick-prev, .slick-next{
	width: 15px;
	height: 15px;
	top: 50%;
}
.slick-next:before{
	content: "";
}
.slick-prev:before{
	content: "";
}
.slick-prev{
	background: url('https://ds-assets.s3.amazonaws.com/birkn/2019/sp/marokko/ic_01.png') no-repeat 0 0/ 15px 15px;
	transition-duration: 0.5s;
	left: -35px;
}
.slick-next{
	background: url('https://ds-assets.s3.amazonaws.com/birkn/2019/sp/marokko/ic_02.png') no-repeat 0 0/ 15px 15px;
	transition-duration: 0.5s;
	right: -35px;
}

.slick-prev:hover,
.slick-prev:focus{
	background: url('https://ds-assets.s3.amazonaws.com/birkn/2019/sp/marokko/ic_01.png') no-repeat 0 0/ 15px 15px;
}
.slick-prev:hover{
	transition-duration: 0.5s;
	left: -40px;
}
.slick-next:hover,
.slick-next:focus{
	background: url('https://ds-assets.s3.amazonaws.com/birkn/2019/sp/marokko/ic_02.png') no-repeat 0 0/ 15px 15px;
}
.slick-next:hover{
	transition-duration: 0.5s;
	right: -40px;
}
.slick-slide{
	margin-right: auto;
}
.slick-slide img{
	margin: 0 auto;
}

/*---------------------スライダーカスタマイズ------------------------*/
.slider{
	width: 400px;
	text-align: center;
}
.slider a{
	color: #555;
	transition-duration: 0.5s;
}
.slider a:hover{
	color: #5c1a09;
	transition-duration: 0.5s;
}


/*----------全体共有テキスト----------*/
.title_sp{
	display: none;
}
.box h2{
	font-size: 20px;
	font-weight: 700;
	background: #f9eff5;
	margin-bottom: 20px;
}
.text_area{
	flex: 1;
}
p{
	line-height: 1.8;
}
/*----------画像----------*/
.box_inner > figure{
	flex: 1;
}
/*----------BUY ボタン----------*/
.buy{
	margin-top: 10px;
	text-align: center;
}
.buy + .buy{
	margin-top: 0;
}
.buy > a{
	width: 130px;
	display: inline-block;
	color: #666;
	border: 1px solid #666;
	border-radius: 50px;
	padding: 7px 5px;
	font-size: 13px;
	transition: 0.4s;
	background-color: #ffffff;
}
.buy > a:hover{
	border: 1px solid #ccc;
	background-color: #f5f5f5;
	transition: 0.4s;
}



/*---------------リンク範囲---------------*/
.link_area{
	margin-top: 170px;
	margin-bottom: 100px;
}
.link_area ul{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	padding-bottom: 50px;
}
.link_area ul li+li{
	margin-left: 50px;
}
.link_area ul li a,.link_area p a{
	display: block;
	color: #555;
	border: 1px solid #555;
	border-radius: 50px;
	padding: 15px 0;
	transition: 0.4s;
	width: 240px;
	margin: 0 auto;
	text-align: center;
	font-size: 13px;
	background-color: #fff;
}
.link_area ul li a:hover,.link_area p a:hover{
	transition: 0.4s;
	border: 1px solid #ccc;
	background-color: #f5f5f5;
}

/*----------------ページトップ---------------*/
.pagetop{
	position: fixed;
	bottom: 200px;
	right: 50px;
	z-index: 10;
	cursor: pointer;
	width: 40px;
	height: 40px;
}
.pagetop img{
	width: 40px;
	height: auto;
}





@media (min-width: 980px) and (max-width: 1200px) {
	.breadcrumb{
		width: 100%;
		padding: 10px 15px;
		box-sizing: border-box;
	}
	.main > .contents_box{
		width: calc(100% - 20px);
	}
	/*--------------リード---------------*/
	.lead{
		margin: 40px auto 100px;
	}
	
	/*----------------コンテンツ---------------*/
	.box:not(#box03){
		height: auto;
	}
	.box > figure{
		width: calc(100% / 2);
	}
	.box_inner > figure{
		margin-top: 20px;
		width: 250px;
	}
	/*box01*/
	.box#box01 > figure{
		margin-left: 30px;
	}
	#box01 .box_inner > figure{
		margin-left: auto;
	}
	/*box02*/
	.box#box02 > figure{
		margin-right: 30px;
	}
	#box02 .box_inner > figure{
		margin-right: auto;
	}

	/*box04*/
	#box04{
		padding: 20px 0;
	}
	.slider{
		width: 350px;
	}
	/*----------リンク----------*/
	.link_area ul{
		-webkit-justify-content: center;
		justify-content: center;
	}
	.link_area ul li+li{
		margin-left: 30px;
	}
	.link_area ul li a,.link_area p a{
		padding: 15px 0;
		width: 250px;
	}

	/*---------------ページトップ---------------*/
	.pagetop{
		width: 40px;
		height: 40px;
	}
}	









@media (max-width: 979px) and (min-width: 768px) {
	.breadcrumb{
		width: 100%;
		padding: 20px 15px 10px;
		box-sizing: border-box;
	}
	.main > .contents_box{
		width: calc(100% - 20px);
		margin: 0 auto;
	}
	.pc_line{
		display: none;
	}
	/*---------------リード文---------------*/
	.lead{
		width: calc(100% - 40px);
		margin: 30px auto 80px;
	}
	.lead p{
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}
	.lead > h2{
		font-size: 20px;
		line-height: 2.5;
	}
	/*----------------コンテンツ---------------*/
	.box:not(#box03){
		display: block;
		height: auto;
	}
	.box_inner{
		height: 375px;
		
	}
	.box_inner figure{
		width: 230px;
		margin: 20px auto 0;
	}
	.box > figure{
		float: left;
		width: calc(100% / 2);
	}
	.box > .box_inner{
		float: left;
		width: calc((100% / 2) - 40px);
	}
	/*box01*/
	#box01 h2{
		padding: 20px 0;
		text-align: center;
	}
	#box01 .box_inner,#box02 .box_inner{
		margin-left: 40px;
		text-align: left;
	}
	/*box02*/
	#box02 .box_inner{
		margin-left: 40px;
		margin-right: 0;
	}
	#box02 h2{
		padding: 20px 0;
	}
	/*box03*/
	#box03 h2{
		padding: 20px 0;
		width: 100%;
	}
	/*box04*/
	.box:not(#box03)#box04{
		width: 100%;
		margin: 150px auto 0;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		left: 0;
		right: 0;
		padding: 50px 0;
	}
	#box04 > div{
		margin-left: 80px;
	}
	#box04 > div > ul li{
		width: 240px;
		padding: 0;
	}
	#box04 h3{
		font-size: 20px;
	}
	#box04 > div > ul li p{
		font-size: 13px;
	}
	.slider{
		width: 40%;
	}
	/*スライダー*/
	.slick-prev, .slick-next{
		top: 50%;
	}
	.slick-prev{
		left: -30px;
	}
	.slick-next{
		right: -30px;
	}
	.slick-prev:hover{
		left: -35px;
	}
	.slick-next:hover{
		right: -35px;
	}

	/*テキスト*/
	.title_sp{
		display: block;
		text-align: center;
		margin-bottom: 30px;
	}
	.title_sp p .pc_line{
		display: block;
	}
	.title_pc{
		display: none;
	}
	/*buy*/
	#box04 .buy > a{
		width: 80px;
	}
	/*---------------ページトップ----------------*/
	.pagetop{
		width: 40px;
		height: 40px;
	}
}








@media (max-width: 767px){
	.breadcrumb{
		width: 100%;
		padding: 20px 15px 10px;
		box-sizing: border-box;
	}
	.main > .contents_box{
		width: 100%;
		margin: 0 auto;
	}
	p{
		font-size: 12px;
	}
	/*改行設定*/
	.sp_line{
		display: block;
	}
	.pc_line{
		display: none;
	}
	.mdl_line{
		display: none;
	}
	.pc_line.mdl_line{
		display: none;
	}
	/*---------------リード文---------------*/
	.lead{
		margin: 40px auto;
		text-align: center;
		width: calc(100% - 20px);

	}
	.lead > h2{
		font-size: 18px;
		line-height: 1.5;
		margin-bottom: 10px;
	}
	.lead .mdl_line{
		display: block;
	}
	/*---------------コンテンツ---------------*/
	.box:not(#box03){
		display: block;
		width: calc(100% - 20px);
		margin: 0 auto;
		box-sizing: border-box;
		height: auto;
	}
	.box:not(#box03) + .box:not(#box03){
		margin-top: 100px;
	}
	.box_inner{
		-webkit-flex-direction: inherit;
		flex-direction: inherit;
		width: 100%;
		margin: 0 auto;
	}
	
	/*box01*/
	#box01 .box_inner,#box02 .box_inner{
		margin-left: auto;
	}
	#box01 .text_area,#box02 .text_area{
		margin-left: 10px;
	}
	#box01 h2,#box02 h2{
		padding: 10px 0;
	}
	/*box02*/
	#box02{
		-webkit-flex-direction: row-reverse;
		flex-direction: row-reverse;
	}
	#box02 .box_inner{
		margin-right: auto;
	}
	/*box03*/
	#box03 h2{
		width: calc(100% - 20px);
	}
	.wear{
		display: block;
	}
	.wear figure{
		width: calc(100% - 40px);
		margin: 0 auto;
	}
	.wear div + div{
		margin-left: auto;
		margin-top: 50px;
	}
	/*box04*/
	.box:not(#box03)#box04{
		width: 100%;
		margin-top: 150px;
		padding: 50px 0;
	}
	#box04 figure{
		width: 80%;
		margin: 0 auto;
	}
	#box04 > div{
		margin-left: auto;
	}
	#box04 > div > ul li{
		width: calc(100% - 20px);
		margin: 0 auto;
		padding: 0 10px;
		box-sizing: border-box;
	}
	.slider{
		width: calc(100% - 20px);
		margin: 0 auto 50px;
	}
	/*スライダー*/
	.slick-prev, .slick-next{
		top: auto;
		bottom: 0;
	}
	.slick-prev{
		left: 0;
	}
	.slick-next{
		right: 0;
	}
	.slick-prev:hover{
		left: 0;
	}
	.slick-next:hover{
		right: 0;
	}
.color3 {
	display: inherit;
	-webkit-justify-content: inherit;
	justify-content: inherit;
}
	.color3 li {
		width: 80%;
	}
	.color3 li:last-of-type {
		padding:  0 0 30px;
	}
	/*----------全体共有テキスト----------*/
	.title_sp{
		display: block;
		text-align: center;
	}
	.title_pc{
		display: none;
	}
	.box h2{
		font-size: 20px;
		font-weight: 700;
		background: #f9eff5;
		margin-bottom: 20px;
	}
	.text_area{
		text-align: left;
	}
	p{
		line-height: 1.8;
	}
	/*----------画像----------*/
	.box > figure{
		margin: 30px 0;
	}
	/*buy*/
	.buy{
		margin-top: 15px;
	}
	.buy > a{
		width: 110px;
		padding: 5px;
	}
	/*---------------リンクエリア---------------*/
	.link_area{
		width: 60%;
		margin: 50px auto;
	}
	.link_area ul{
		display: block;
		text-align: center;
		margin-top: 100px;
		margin-bottom: 30px;
	}
	.link_area ul li+li{
		margin-top: 30px;
		margin-left: 0;
	}
	.link_area ul li a,.link_area p a{
		width: auto;
		padding: 10px 0;
	}
	/*----------------ページトップ-----------------*/
	.pagetop{
		bottom: 30px;
		right: 20px;
		width: 35px;
		height: 35px;
	}
	.pagetop img{
		width: 35px;
	}

}




.box:after{
	content: "";
	display: block;
	clear: both;
}