/********************************
flexbox基本設定（トップページ用）
*********************************/
div.flexcontainer-toppage{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
  align-items: flex-start;
  align-content: flex-start;
  padding:20px;
  box-sizing:border-box;
}
.flex_box{
 align-self: stretch;
 padding:0;margin-bottom:20px;
 background:#fff;
 border:#ddd 1px solid;
}

.flex_box h2{font-size:1.2em;color:#555555;
  margin:10px;
  padding-left:7px;border-left:5px solid #dddddd;}
.flex_box img{width:100%}
.flex_box p{font-size:1em;line-height:1.5em;color:#555555;margin:10px;}
.flex_box a:hover{opacity:0.8;}


/********************************
表示順設定
*********************************/

.box_Roomwear       {order: 8;width:32%;}/*ルームウェア*/
.box_nekotoki    	{order: 9;width:32%;}/*猫と木長財布*/
.box_yuruusa    	{order: 10;width:32%;}/*ゆるうさシーチングバッグ*/

.box_file           {order: 11;width:32%;}/*クリアファイル*/
.box_UV             {order: 12;width:32%;}/*UV手袋*/
.box_towel          {order: 13;width:32%;}/*タオルハンカチ*/

.box_apron	        {order: 14;width:24%;}/*エプロン*/
.box_slippers     	{order: 15;width:24%;}/*スリッパ*/
.box_kasa		    {order: 16;width:24%;}/*レトロな傘*/
.box_tokusyuu       {order: 17;width:24%;}/*特集ページ*/

.box_important		{order:7;width:100%;border:solid 1px #ddd;}/*重要なお知らせ*/
.box_important	{text-align:center;}/*重要なお知らせ*/


/*////以下は非表示*/
.box_damy 	        {order: 8;width:24%;display:none;}/*表示を消す*/
.box_PH 	           {order: 15;width:24%;display:none;}/*プリントハンカチ*/
.box_happybag     	    {order: 8;width:32%;display:none;}/*ハッピーバッグ*/
.box_yomimono  	{order: 16;width:24%;display:none;}/*読みもの*/
.box_shoulderbag    {order: 14;width:24%;display:none;}/*刺繍シリーズ*/
.box_mikaduki	    {order: 15;width:24%;display:none;}/*ピンクの三日月*/


/*////表示順設定*/

a.link_tokusyuu,a.link_itiran{display:none;}/*特集と一覧のボタンを消す*/

/********************************
リボン設定
*********************************/
.ribbon_box2 {
    display: block;
    position: relative;
    margin:0;padding:0;
 }
.ribbon12 {
    display: inline-block;
    position: absolute;
    top: 0;
    margin: 0;
    padding: 20px 0;
    z-index: 2;
    width: 40px;
    text-align: center;
    font-size: 12px;
    color: #fff;
  font-weight:bold;
    background: #D3D3D3;
}

.ribbon12.right {
    right: 30px;
}
.ribbon12.left {
    left: 30px;
}

.ribbon12:after{
 content: '';
    position: absolute;
    left: 0;
    top: 100%;
    height: 0;
    width: 0;
    border-left: 20px solid #D3D3D3;
    border-right: 20px solid #D3D3D3;
    border-bottom: 10px solid transparent;
}

/********************************
information設定
*********************************/
#box_news 			{width:100%;clear:both;}/*お知らせ*/
#box_news {max-width:600px;height:auto;border:none;margin-left:auto;margin-right:auto;
	margin-top:40px;margin-bottom:70px;}

h3.news{
  display:block;width:100%;
  box-sizing:border-box;
  color:#555;
  margin:0;padding:10px;
  border-bottom:solid 1px #555;
  text-align:center;}
.news li{list-style-type:none;padding:5px;border-bottom:dotted 1px #555;}
.news li p{margin:0;padding:0;}
.news a:hover{text-decoration:none;}

dt.news {float: left ;
clear: left ;
margin-right: 0.5em ;
width: 80px ;padding:7px;
}

dd.news{
float: left ;
margin-left: 1em ;
padding:7px;}

/********************************
Instagram設定
*********************************/

div.snapwidget{padding:0 40px;
box-sizing:border-box;
max-width:1180px;
margin-right:auto;margin-left:auto;}

/********************************
コンテンツ・お知らせ設定
*********************************/
div.contents{padding:0 40px;
box-sizing:border-box;
max-width:1180px;
margin-right:auto;margin-left:auto;}

	/*コンテンツ部分*/

	.content_box {
		clear: both;
		width: 100%;
		box-sizing: border-box;
		padding: 0;
		text-align: center;
	}

	.content_box .h3_caption {
		margin-bottom: 20px;
	}

	/*ラインナップ表示部*/

	.lineup_box {
		margin: 0;
		padding: 0;
		text-align: center;
		box-sizing: border-box;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: end;
		-ms-flex-align: end;
		align-items: flex-end;
	}

	.lineup_box img {
		box-sizing: border-box;
		width: 100%;
		margin: 0;
	}

	.lineup_box>div>h4 {
		font-family: 'Maven Pro', sans-serif;
		width: 100%;
		padding: 10px 0px;
		font-size: 1.5em;
		font-weight: normal;
		box-sizing: border-box;
	}

	.lineup_box>div>p {
		display: block;
		margin-bottom: 20px;
	}

	.lineup_pouch {
		width: 38%;
	}

	.lineup_flatpouch {
		width: 40%;
	}

	.lineup_tote {
		width: 40%;
        margin: 10px;
	}

	.lineup_bagyoko {
		width: 45%;
	}

	.lineup_bagtate {
		width: 47%;
	}

	/*リンクエリア*/

	.link_area {
		position: relative;
		clear:both;
		text-align:center;
		width: 100%;
		box-sizing: border-box;
		margin:0;padding:0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}



	.link_box {
		box-sizing: border-box;
		width: 50%;
		height: 30vh;
		padding: 0px;
		border: 5px solid #fff;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}

	.link_box {
		position: relative;
		z-index: 1;
		/* 必要であればリンク要素の重なりのベース順序指定 */
	}

	.link_box a {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-indent: -999px;
		z-index: 2;
		/* 必要であればリンク要素の重なりのベース順序指定 */
	}

	.link_box:hover {
		zoom: 1;
		/*IE*/
	}

	.link_caption{
		width:100%;height:40%;
		opacity:0;
margin:0;
padding:10px;
box-sizing: border-box;
background:rgba(255, 255, 255, 0.8)}


	.link_box:hover .link_caption{opacity:1;}


	@media only screen and (min-width: 900px) {
		.full-bg_container_full {
			background-position: 50% 50%;
			position:relative;
		}

		.midashi_botanical{
		position:absolute;
		margin-top:-70vh;}

		.midashi_nukunuku{
			position:absolute;
			margin-top:-60vh;
			right:0;
}

		.midashi_charm{
			position:absolute;
			margin-top:-50vh;
		}
		.midashi_saboten,.midashi_garden{
			position:absolute;
			margin-top:-100vh;
		}


		.lineup_box {
			margin: 0;
			padding: 0;
			width: 100%;
			box-sizing: border-box;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			-webkit-box-align: end;
			-ms-flex-align: end;
			align-items: flex-end;


		}

		.lineup_box img {
			width: 100%;
			margin: 0;
		}

		.lineup_box h4 {
			font-family: 'Maven Pro', sans-serif;
			width: 100%;
			box-sizing: border-box;
			padding: 10px;
			font-size: 1.5em;
			font-weight: normal;
		}

		.lineup_box p {
			display: block;
			margin-bottom: 20px;
		}
		.lineup_pouch {
			width: 15%;
		}
		.lineup_flatpouch {
			width: 16%;
		}
		.lineup_tote {
			width: 18%;
		}
		.lineup_bagyoko {
			width: 20%;
		}
		.lineup_bagtate {
			width: 23%;
		}

	}


/********************************
メディアクエリ設定 1000px未満
*********************************/
@media only screen and (max-width: 1000px) {

/*トップ画像トリミング解除*/
.box_index .image{height:auto;}
.box_index .image img{
  top: 0;left: 0;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
	transform: translate(0, 0);
  }
}
/********************************
メディアクエリ設定 タブレット用
*********************************/
@media only screen and (max-width: 768px) {

div.flexcontainer-toppage{ padding:10px;}
.flex_box{width:100%;}
.box_index{width:100%;}
.box_important{width:100%;}
.box_news {width:100%;
  max-width:350px;}
}