@media only screen and (max-width: 768px) {
    article {
		margin: 0.8rem 1rem 0;
    }
}

@media only screen and (max-width: 414px) {
    article {
		margin: 0.8rem 1rem 0;
    }
}

/* ------------------------------------------------
 common
------------------------------------------------ */
/* 
 dividing_line 
------------------------ */
.dividing_line {
	border: solid 1px #bbb;
    margin-top: 4rem;
    margin-bottom: 3rem;
}

@media only screen and (min-width: 769px) {
	.dividing_line {
		border: solid 1px #bbb;
		margin-bottom: 4rem;
	}
}

/* 
 logo 
------------------------ */
.logo {   
    margin: 2rem 0 3rem;
}






/* ------------------------------------------------
 breadcrumb 
------------------------------------------------ */
.breadcrumb {
	display:flex;
	flex-wrap: wrap;
   	margin:1.5rem auto 0.9rem;
    padding: 0 0 0 0.5rem;
    font-size: 11px;
}
.breadcrumb li {
	letter-spacing:-0.5px;
}
.breadcrumb li::after {
    content: "\f105";
    font-family: FontAwesome;
    margin-right: 0.4rem;
    margin-left: 0.4rem;
}
.breadcrumb li:last-child {
	font-weight:bold;
}
.breadcrumb li:last-child::after {
	content: none;
}

@media only screen and (min-width: 768px) {
	.breadcrumb {
		margin: 3em 0 1rem 0;
	    padding:0;
		font-size:13px;
	}
	.breadcrumb li::after {
		content: "\f105";
		font-family: FontAwesome;
		margin-right: 0.8em;
		margin-left: 0.8em;
    }
	.breadcrumb li:last-child {
		font-weight:bold;
	}
	.breadcrumb li:last-child::after {
		content: none;
	}   
}



/* ------------------------------------------------
 item_lead 
------------------------------------------------ */
.item_lead {
	margin: 1rem auto;
}
.item_lead p {
	font-size: 1.2rem;
}
.item_lead dt {
	letter-spacing:0.7px;
}
.item_lead dt span {
	font-size: 1.3rem;
	color: #e6002d;
	font-weight: bold;
}
.item_lead dd {
	margin: 1rem auto 0;
	font-weight: normal;
	position: relative;
	width: 60%;
	letter-spacing:2px;
}
.item_lead dd a{
	font-size: 0.8rem;	
	color: #fff;
	width: 100%;
	padding: 0.8rem;
	display: inline-block;
	background: #928a7f;;
}	
.item_lead dd a::after {
	content: "\f105";
	font-family: FontAwesome;
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
}  


@media only screen and (min-width: 768px) {
	.item_lead {
	    margin: 3rem auto;
	}
	.item_lead p {
		font-size: 1.2rem;
	}
	.item_lead dt {
		letter-spacing:0.7px;
	}
	.item_lead dt span {
		font-size: 1.3rem;
		color: #e6002d;
		font-weight: bold;
	}
	.item_lead dd {
		margin: 1rem auto 0;
		font-weight: normal;
		position: relative;
		width: 50%;
		letter-spacing:2px;
	}
	.item_lead dd a{
		font-size: 1rem;	
		color: #fff;
		width: 80%;
		padding: 0.8rem;
		display: inline-block;
		background: #928a7f;;
	}	
	.item_lead dd a::after {
		content: "\f105";
		font-family: FontAwesome;
		position: absolute;
		top: 50%;
		right: 4rem;
		transform: translateY(-50%);
	}
	.item_lead dd a:hover {
		color:#000;
		background-color:#fff;
		border:solid 1px #000;
		padding:0.73rem;
	}  
}



/* ------------------------------------------------
 cat_title 
------------------------------------------------ */
.cat_title {
	font-size: 1.4rem;
	font-weight: bold;    
    margin-top: 5rem;
    margin-bottom:0.7rem;
	padding-bottom:0.7rem;
	border-bottom: dotted 1px #ccc;
}
.cat_title_logo {
	margin:3rem auto 0.5rem;
	max-width:100%;
	border-bottom: dotted 1px #ccc;
}   
@media only screen and (min-width: 768px) {
	.cat_title {
		font-size: 2rem;
		font-weight: bold;
		margin-top: 7rem;
		margin-bottom:0.7rem;
		padding-bottom:0.7rem;
		border-bottom: dotted 1px #ccc;
    }
	.cat_title_logo {
		margin:3rem auto 0.5rem;
		max-width:100%;
		border-bottom: dotted 1px #ccc;
	}   
} 



/* ------------------------------------------------
 recommend 
------------------------------------------------ */
.recommend .flex_container {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;    
}
.recommend .flex_item {
    width: 50%;
    margin-bottom: 3rem;
}
.recommend .image {
    width: 100%;
}   
.recommend .recommend_text01 {
    font-size: .9rem;
}    
.recommend .recommend_btn {
	margin: 2rem auto 0;
	font-weight: normal;
	position: relative;
	width: 80%;
	border: solid 1px #4b4b4b;
	cursor: pointer;
}
.recommend .recommend_btn:hover {
} 
.recommend .recommend_btn a{
	font-size: 0.9rem;	
	color:#434343;
	width: 100%;
	padding: .5rem 0 .6rem;
	display: inline-block;
}	
.recommend .recommend_btn a::after {
	content: "\f105";
	font-family: FontAwesome;
	position: absolute;
	top: 50%;
	right: 0.7rem;
    transform: translateY(-50%);
}  

@media only screen and (min-width: 768px) {
	.recommend .flex_container {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;    
	}
	.recommend .flex_item {
		width: 25%;
	}
	.recommend .image {
		width: 85%;
		margin: 0 auto;
	}
	.recommend .image img {
		max-width: 100%;
	}
	.recommend .recommend_text01 {
		margin: .5rem 0;
	}
	.recommend .recommend_btn {
		margin: 2rem auto 0;
		font-weight: normal;
		position: relative;
		width: 75%;
		border: solid 1px #4b4b4b;
		cursor: pointer;
	}
	.recommend .recommend_btn:hover {
		transform: translateY(-4px);
	} 
	.recommend .recommend_btn a{
		font-size: 0.9rem;	
		color:#434343;
		width: 100%;
		padding: .5rem 0 .6rem;
		display: inline-block;
	}	
	.recommend .recommend_btn a::after {
		content: "\f105";
		font-family: FontAwesome;
		position: absolute;
		top: 50%;
		right: 1rem;
		transform: translateY(-50%);
	}  
}    



/* ------------------------------------------------
 img_btn - col_2
------------------------------------------------ */
.img_btn .col_2 {
	margin-bottom:5rem;
}
.img_btn .col_2 > li {
	margin-bottom:2rem;
}
.img_btn .col_2 li a {
	display:block;
}

@media only screen and (min-width: 768px) {
	.img_btn .col_2 {
		display: flex;
	    flex-direction:column;	
		flex-flow: row wrap;
		margin-bottom: 7rem;
	}
	.img_btn .col_2 > li {
		width: calc(49%);
		margin:0.3rem auto 3rem;
		margin-left:0.5%;	
	}
	.img_btn .col_2 li:hover {
		cursor: pointer;
		text-decoration: none;
	}
	.img_btn .col_2 li a {
		display:block;
	}
}



/* ------------------------------------------------
 img_btn - js-animation
------------------------------------------------ */
.js-animation {
	  opacity: 0;
	  visibility: hidden;
	  transform: translateY(40px);
	  transition: all 1s;
	  position:relative;
	  overflow:hidden;
}
.js-animation.is-show {
	opacity: 1;
    visibility: visible;
	transform: translateY(0px);
}
.js-animation figcaption h4 {
	font-size: 1.2em;
	color: #6a6560;
}

@media only screen and (max-width: 768px) {
	.js-animation {
		  opacity: 0;
		  visibility: hidden;
		  transform: translateY(40px);
		  transition: all 1s;
		  position:relative;
		  overflow:hidden;
	}
	.js-animation.is-show {
		  opacity: 1;
		  visibility: visible;
		  transform: translateY(0px);
	}
	.js-animation figcaption {
		position: absolute;
		top: 0%;
		left: 0%;
		z-index: 2;
		width: 100%;
		height: 98.5%;
		background: rgba(129, 129, 129, 0.8);
		-webkit-transition: .5s;
		transition: .5s;
		opacity: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.js-animation figcaption h4 {
		font-size: 1.2em;
		color: #fff;
	}
	.js-animation:hover figcaption {
		opacity: 1;
	}
}

@media only screen and (min-width: 769px) {
	.js-animation {
		  opacity: 0;
		  visibility: hidden;
		  transform: translateY(40px);
		  transition: all 1s;
		  position:relative;
		  overflow:hidden;
	}
	.js-animation.is-show {
		  opacity: 1;
		  visibility: visible;
		  transform: translateY(0px);
	}
	.js-animation figcaption {
		position: absolute;
		top: 0%;
		left: 0%;
		z-index: 2;
		width: 93%;
		height: 98.5%;
		background: rgba(129, 129, 129, 0.8);
		-webkit-transition: .5s;
		transition: .5s;
		opacity: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left:1.2rem;
	}
	.js-animation figcaption h4 {
		font-size: 1.2em;
		color: #fff;
	}
	.js-animation:hover figcaption {
		opacity: 1;
	}
}



/* ------------------------------------------------
 valvanne / okamura 
------------------------------------------------ */
h2 {
	font-size: 1.1rem;
	margin: auto 1rem;
}
@media only screen and (min-width: 768px) {
	h2 {
		font-size:1.4rem;
	}
}


/* 
 valvanne / okamura -  smy_col_2
------------------------------------------------ */
.smy_col_2 {
	margin-bottom:3rem;
}
.smy_col_2 > li {
	margin-top:0.3rem;
}
.smy_col_2 li:nth-of-type(2n+1) {
}
.smy_col_2 dl {
	text-align:left;
	margin:0.8rem 1rem auto;
}
.smy_col_2 dt {
	font-size:1.2rem;
	//font-weight:bold;
	margin-bottom:0.5rem;
	text-align:center;
}
.smy_col_2 dt span {
	font-size:1rem;
}
.smy_col_2 dd {
		font-size:0.85rem;
		line-height:1.5;
	}
.smy_col_2 .more_btn {
	width: 70%;
	margin: 2rem auto 3rem;
	position: relative;
	border: solid 1px #bbb;
   	text-align:center;
}
.smy_col_2 .more_btn::after {
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
}
.smy_col_2 .more_btn a:hover {
	background-color:#928a7f;
	color:#fff;
}
.smy_col_2 .more_btn a:hover::after {
	color:#fff;
}
.smy_col_2 .more_btn a{
    color: #000;
    display: block;
    padding: 0.8em 1rem;    
}
.smy_col_2 .more_btn a::after {
	content: "\f105";
	font-family: FontAwesome;
	position: absolute;
	top: 52%;
	right: 1.5rem;
	transform: translateY(-50%);
	color: #000;
}

@media only screen and (min-width: 768px) {
    .smy_col_2 {
		display: flex;
		flex-flow: row wrap;
		margin-bottom:3rem;
    }
	.smy_col_2 > li {
		width: calc(48%);
		margin-top:0.3rem;
		margin-left:3%;
		margin-bottom:2rem;
		padding-right: 1rem;
    }
	.smy_col_2 li:nth-of-type(2n+1) {
		margin-left:0%;
    }
    .smy_col_2 dl {
		text-align:left;
		margin:0 1rem auto;
	}
	.smy_col_2 dt {
		font-size:1.6rem;
		font-weight:normal;
		margin: 3rem auto 1.5rem;
		text-align:left;
	}
	.smy_col_2 dt span {
		font-size:1rem;
	}
	.smy_col_2 dd {
		font-size:0.9rem;
		line-height:2;
	}
    .smy_col_2 .more_btn {
		width: 70%;
		margin: 3.5rem auto 5rem;
		position: relative;
		border: solid 1px #bbb;
		text-align:center;
	}
	.smy_col_2 .more_btn::after {
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
	}
	.smy_col_2 .more_btn:hover {
		background-color:#928a7f;
		border: solid 1px #928a7f;
		color:#fff;
	}
	.smy_col_2 .more_btn a:hover::after {
		color:#fff;
	}
	.smy_col_2 .more_btn a{
		color: #000;
		display: block;
		padding: 0.8em 1rem;    
	}
	.smy_col_2 .more_btn a::after {
		content: "\f105";
		font-family: FontAwesome;
		position: absolute;
		top: 52%;
		right: 1.5rem;
		transform: translateY(-50%);
		color: #000;
	}
}


/* 
 valvanne / okamura -  smy_col_4
------------------------------------------------ */
.smy_col_4 {
	display: flex;
	flex-flow: row wrap;
	margin:1rem 1rem 5rem;
}
.smy_col_4 > li {
	width: calc(50%);
	margin-top:0.3rem;
	margin-bottom:0;
}
.item2 > li {
	margin-top:-1rem;
}
.item3 > li {
	width: calc(33%);
	margin-top:0.3rem;
	margin-bottom:0;
}
.item7 > li {	
	margin-bottom:-3rem;
}

@media only screen and (min-width: 768px) {
    .smy_col_4 {
		display: flex;
		flex-flow: row wrap;
		margin-bottom:3rem;
    }
	.smy_col_4 > li {
		width: calc(22.5%);
		margin-top:0.3rem;
		margin-left:3%;
		margin-bottom:2rem;
    }
	.smy_col_4 li:first-of-type {
		margin-left:0.5%;
    }
	.item2 li:first-of-type {
		margin-left:26.5%;
    }
    .item3 li:first-of-type {
		margin-left:12.5%;
    }
    .item7 > li {   
	    margin-bottom:-1rem;
    }
    .item7 li:nth-of-type(5) {
    	margin-left:0;
    }
}



/* ------------------------------------------------
btn_ec 
------------------------------------------------ */
.btn_ec {
    position: relative;
    text-align: center;
    text-decoration: none;
    color: #000;
    font-size: 0.9rem;
    background: #fff;
    margin: 1rem auto 6rem;
    border: 1px solid #000;
    width: 95%;
}
.btn_ec,
.btn_ec::before,
.btn_ec::after {
    box-sizing: border-box;
    display: block;
    content: '';
}
.btn_ec a{
    color: #000;
    display: block;
    padding: 0.8em 1rem;
}
.btn_ec a::after {
    content: "\f105";
    font-family: FontAwesome;
    position: absolute;
    top: 50%;
    right: 0.6em;
    transform: translateY(-50%);
    color: #000;
}

@media only screen and (min-width: 768px) {
    .btn_ec {
        padding: 0.2rem;
        font-weight: normal;
        letter-spacing: 1.2px;
    }
    .btn_ec {
        width: 50%;
        margin: 4rem auto 8rem;
    }
    .btn_ec a{
        font-size: 0.9rem;
    }
    .btn_ec a::after {
        top:1rem;
        right: 0.5em;
    }
    .btn_ec a::after {
        content: "\f105";
        font-family: FontAwesome;
        position: absolute;
        top: 52%;
        right: 0.6em;
        transform: translateY(-50%);
    }
    .btn_ec:hover {
        box-sizing:border-box;
        cursor: pointer;
        text-decoration: none;
        transform: translateY(-4px);
    }
}



/* ------------------------------------------------
workchair_bnr 
------------------------------------------------ */
.workchair_bnr {
	margin:3rem 0.2rem 0;
}
.workchair_bnr h3 {
	margin:5rem 1rem auto;
}
.workchair_bnr a {
	display:block;
}
.workchair_bnr a img:hover {
	opacity:0.7;
}
.workchair_bnr img {
	margin-top: 1rem;
	margin-bottom: 2rem;
}
.bnr_list h4 {
	font-size: 110%;
	margin-top: 0;
	margin-bottom: .5rem;
}
.bnr_list p {
	margin:auto 1rem;
}
.bnr_list h4:last-of-type {
}
.bnr_list a {
	display:block;
}
.bnr_list a img:hover {
	opacity:0.7;
}
.bnr_list img {
	margin-top: 1rem;
	margin-bottom: 3rem;
}

@media only screen and (min-width: 769px) {
    .workchair_bnr a {
	    display:block;
    }
    .workchair_bnr a img:hover {
    	opacity:0.7;
    }
    .workchair_bnr img {
    	margin-top: 2rem;
	    margin-bottom: 7rem;
	}
    .bnr_list h4 {
        font-size: 110%;
        margin-top: 0;
        margin-bottom: .5rem;
    }
    .bnr_list h4:last-of-type {
        margin-top: 0;
    }
	.bnr_list a {
		display:block;
	}
	.bnr_list a img:hover {
		opacity:0.7;
	}
	.bnr_list img {
        margin-top: 2rem;
		margin-bottom: 9rem;
	}
 }



/* ********** WRAP ********** */
.wrapper{
	font-family: "Noto Sans Japanese";
}


@media only screen and (min-width: 1100px) {
    h1,
    .breadcrumb,
    section,
    .workchair_bnr,
    .shoplist,
     footer {
        width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }

}