@charset "utf-8";

/*********************
* 展示品販売
*********************/
#exhibit_sale h2 {
	text-align: center;
	position: relative;
	margin-bottom: 80px;
}

#exhibit_sale h2 span {
	display: block;
	color: #999;
	font-weight: normal;
	font-size: 1.2em;
	line-height: 150%;
	margin-top: 20px;
}

#exhibit_sale h2:before {
	content: '';
	position: absolute;
	bottom: -35px;
	display: inline-block;
	width: 17em;
	height: 15px;
	left: 50%;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: #f1924f;
}

exhibit_sale .case_list_s1 h3 {
	text-align: center;
	font-size: 1.3em;
	line-height: 150%;
	margin-bottom: 1.5em;
}

/* s2 */
#exhibit_sale .case_list_s2 {
	padding-bottom: 3em;
}

#exhibit_sale .detailarea {
    
}
#exhibit_sale .detailarea img {
    max-width: 100%;
    height: auto;
}
#exhibit_sale .detailarea .titlebox {
    border-top: 2px solid #eb6100;
    border-bottom: 2px solid #eb6100;
    padding: 12px 0;
    display: flex;
}
#exhibit_sale .detailarea .titlebox > p {
    width: 90px;
    background-color: #eb6100;
    padding: 10px 0 10px 10px;
    margin-right: 20px;
    font-weight: 700;
    color: #fff;
    font-size: calc(13em / 14);
    position: relative;
}
#exhibit_sale .detailarea .titlebox > p::after {
    content:  '';
    background: url("../images/exhibit_sale/icon01.png") no-repeat 0 0;
    width: 50px;
    height: 48px;
    position: absolute;
    top: -10px;
    right: -10px;
}
#exhibit_sale .detailarea .titlebox > p span {
    display: block;
    font-size: calc(16em / 13);
}
#exhibit_sale .detailarea .titlebox > div {
    width: calc(100% - 110px);
}
#exhibit_sale .detailarea .titlebox > div h3 {
    font-size: calc(24em / 14);
    font-weight: 700;
}
#exhibit_sale .detailarea .titlebox > div  p {
    font-weight: 700;
    color: #808080;
    padding-bottom: 0;
}
#exhibit_sale .detailarea .mainimg {
    margin: 55px 0;
    text-align: center;
}
#exhibit_sale .detailarea .specbox {
    display: flex;
    flex-wrap: wrap;
}
#exhibit_sale .detailarea .specbox dt ,
#exhibit_sale .detailarea .specbox dd {
    width: 100%;
    box-sizing: border-box;
}
#exhibit_sale .detailarea .specbox dt {
    width: 230px;
    font-size: calc(18em / 14);
}
#exhibit_sale .detailarea .specbox dd {
    width: calc(100% - 230px);
}
#exhibit_sale .detailarea .specbox dt.price {
    color: #eb6100;
}
#exhibit_sale .detailarea .specbox dt.price + dd > strong {
    display: block;
    color: #ff0000;
}
#exhibit_sale .detailarea .photobox li {
    text-align: center;
    margin-bottom: 10px;
    line-height: 0;
    list-style: none;
}
#exhibit_sale .detailarea .contactbox {
    width: 920px;
    margin: 50px auto 100px;
    display: flex;
    justify-content: space-between;
}
#exhibit_sale .detailarea .contactbox > div:nth-of-type(1) {
    border: 1px solid #c8c8c8;
    padding: 10px;
}
#exhibit_sale .detailarea .contactbox > div:nth-of-type(1) > dl {
    display: flex;
    align-items: center;
}
#exhibit_sale .detailarea .contactbox > div:nth-of-type(1) > dl dt {
    width: 180px;
    letter-spacing: 0.06em;
    text-align: center;
}
#exhibit_sale .detailarea .contactbox > div:nth-of-type(1) > dl dd a {
    font-size: calc(18em / 14);
    font-weight: 700;
    color: #333;
    padding-left: 10px;
}
#exhibit_sale .detailarea .contactbox > div:nth-of-type(1) > dl dd p {
    font-size: calc(13em / 14);
    padding-bottom: 0;
}
#exhibit_sale .detailarea .contactbox > div:nth-of-type(2) {
    border: 1px solid #eb6100;
}
#exhibit_sale .detailarea .contactbox > div:nth-of-type(2) a {
    width: 100%;
    height: 100%;
    background: url(../images/common/icon03.png) no-repeat 95% center;
    background-size: 0.7em;
    color: #eb6100;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
#exhibit_sale .detailarea .contactbox > div:nth-of-type(2) a:hover {
    background-image: url(../images/common/icon02.png);
    background-color: #eb6100;
    color: #fff;
    text-decoration: none;
}



@media screen and (min-width: 641px), print {

/* s1 */
#exhibit_sale .case_list_s1 {
	padding: 3.5em 0 4.5em;
}

#exhibit_sale .case_list_s1 p {
	text-align: center;
}

#exhibit_sale .s2_inner {
	width: 1400px;
	margin: 0 auto;
	overflow: hidden;
}

#exhibit_sale .s2_inner ul {
	width: 1410px;
	display: flex;
	display: -webkit-flex;
	flex-flow: row wrap;
}

#exhibit_sale .s2_inner ul li {
	width: 460px;
	list-style-type: none;
	margin: 0 10px 40px 0;
	position: relative;
}

#exhibit_sale .s2_inner ul li a img {
	width: 100%;
	height: auto;
}

#exhibit_sale .s2_inner ul li a strong {
	display: block;
	font-size: 1.1em;
	line-height: 150%;
	color: #000;
	text-align: center;
	padding: 20px 30px;
	background: url(../images/common/icon03.png) no-repeat 97% center;
	background-size: 0.7em;
}

#exhibit_sale .s2_inner ul li a span {
	display: block;
	color: #000;
	padding: 0 30px;
}

#exhibit_sale .s2_inner ul li a:hover {
	text-decoration: none;
}

#exhibit_sale .link {
	width: 600px;
}

#exhibit_sale .s2_inner ul li a .new-icon {
	display: none;
}

#exhibit_sale .s2_inner ul li a .text-icon {
	position: absolute;
	top: 0.5em;
	left: 0.5em;
	width: 3em;
	height: 2.3em;
	background-color: #d51717;
	font-size: 0.7em;
	color: #fff;
	text-align: center;
	padding: 0.7em 0 0;
	z-index: 100;
}
#exhibit_sale .detailarea .specbox dt ,
#exhibit_sale .detailarea .specbox dd {
    border-bottom: 1px dashed #c7c7c7;
    padding: 20px ;
}
#exhibit_sale .detailarea .photobox {
    margin: 40px;
}
#exhibit_sale .detailarea .contactbox > div {
    width: 445px;
}
#exhibit_sale .detailarea .contactbox > div:nth-of-type(1) > dl dd {
    width: calc(100% - 200px);
    border-left: 1px solid #c8c8c8;
    padding-left: 10px;
}
    #exhibit_sale .detailarea .contactbox > div:nth-of-type(1) a {
        pointer-events: none;
    }
}


@media screen and (max-width: 640px) {
#exhibit_sale h2 {
	margin-bottom: 4em;
}

#exhibit_sale h2 img {
	/*width: auto;
	height: 9vw;*/
}

#exhibit_sale h2 span {
	margin-top: 0.8em;
}

#exhibit_sale h2:before {
	bottom: -2em;
	width: 7em;
	height: 4px;
}

#exhibit_sale .title {
	background-image: url(../images/ordermade_kitchen_case/title_s.jpg);
}

#exhibit_sale .cat179 { background-image: url(../images/case/title179s.jpg); }
#exhibit_sale .cat180 { background-image: url(../images/case/title180s.jpg); }
#exhibit_sale .cat181 { background-image: url(../images/case/title181s.jpg); }
#exhibit_sale .cat182 { background-image: url(../images/case/title182s.jpg); }
#exhibit_sale .cat183 { background-image: url(../images/case/title183s.jpg); }
#exhibit_sale .cat184 { background-image: url(../images/case/title184s.jpg); }
#exhibit_sale .cat185 { background-image: url(../images/case/title185s.jpg); }
#exhibit_sale .cat186 { background-image: url(../images/case/title186s.jpg); }
#exhibit_sale .cat187 { background-image: url(../images/case/title187s.jpg); }

/* s1 */
#exhibit_sale .case_list_s1 {
	padding: 3.5em 0 2em;
}

#exhibit_sale .case_list_s1 p {
	padding: 0 0 0.7em;
}

#exhibit_sale .s2_inner {
	width: 98%;
	margin: 0 auto;
}

#exhibit_sale .s2_inner ul {
	width: 100%;
}

#exhibit_sale .s2_inner ul li {
	width: 100%;
	list-style-type: none;
	margin-bottom: 2em;
	position: relative;
}

#exhibit_sale .s2_inner ul li a img {
	width: 100%;
	height: auto;
}

#exhibit_sale .s2_inner ul li a strong {
	display: block;
	font-size: 1.1em;
	line-height: 150%;
	color: #000;
	text-align: center;
	padding: 1em 0;
}

#exhibit_sale .s2_inner ul li a span {
	display: block;
	color: #000;
}

#exhibit_sale .link {
	width: 100%;
}

#exhibit_sale .s2_inner ul li a .new-icon {
	display: none;
}

#exhibit_sale .s2_inner ul li a .text-icon {
	position: absolute;
	top: 1em;
	left: 1em;
	width: 3.5em;
	height: 2.5em;
	background-color: #d51717;
	/*font-size: 0.7em;*/
	color: #fff;
	text-align: center;
	padding: 1em 0 0;
	z-index: 100;
}
    
#exhibit_sale .detailarea .specbox {
    flex-direction: column;
}
#exhibit_sale .detailarea .specbox dt ,
#exhibit_sale .detailarea .specbox dd {
    width: 100%;
    box-sizing: border-box;
}
#exhibit_sale .detailarea .specbox dt {
    font-size: calc(18em / 14);
    padding: calc(20 / 640 * 100vw) ;
}
#exhibit_sale .detailarea .specbox dd {
    border-bottom: 1px dashed #c7c7c7;
    padding: 0 calc(20 / 640 * 100vw) calc(20 / 640 * 100vw) calc(20 / 640 * 100vw);
}
#exhibit_sale .detailarea .photobox {
    margin-top: calc(40 / 640 * 100vw);
}
#exhibit_sale .detailarea .photobox li {
    text-align: center;
    margin-bottom: calc(20 / 640 * 100vw);
    line-height: 0;
    list-style: none;
}
#exhibit_sale .detailarea .contactbox {
    width: calc(580 / 640 * 100vw);
    margin: calc(50 / 640 * 100vw) auto calc(100 / 640 * 100vw);
    display: flex;
    flex-direction: column;
}
#exhibit_sale .detailarea .contactbox > div {
    width: 100%;
}
#exhibit_sale .detailarea .contactbox > div:nth-of-type(1) {
    border: 1px solid #c8c8c8;
    padding: calc(20 / 640 * 100vw);
    margin-bottom: calc(30 / 640 * 100vw);
}
#exhibit_sale .detailarea .contactbox > div:nth-of-type(1) > dl {
    width: 100%;
    flex-direction: column;
}
#exhibit_sale .detailarea .contactbox > div:nth-of-type(1) > dl dt {
    width: 100%;
    font-size: 1.1em;
    letter-spacing: 0.06em;
    padding-bottom: calc(15 / 640 * 100vw);
    text-align: center;
}
#exhibit_sale .detailarea .contactbox > div:nth-of-type(1) > dl dd {
    width: 100%;
    padding: calc(40 / 640 * 100vw) 0 calc(10 / 640 * 100vw) 0;
    border-top: 1px solid #c8c8c8;
    text-align: center;
}
#exhibit_sale .detailarea .contactbox > div:nth-of-type(1) > dl dd a {
    font-size: 2.0em;
    font-weight: 700;
    color: #333;
    padding-left: calc(10 / 640 * 100vw);
}
#exhibit_sale .detailarea .contactbox > div:nth-of-type(1) > dl dd p {
    font-size: calc(13em / 14);
    padding-top: calc(10 / 640 * 100vw);
    padding-bottom: 0;
}
#exhibit_sale .detailarea .contactbox > div:nth-of-type(2) {
    border: 1px solid #eb6100;
}
#exhibit_sale .detailarea .contactbox > div:nth-of-type(2) a {
    padding: calc(20 / 640 * 100vw) 0;
}
#exhibit_sale .detailarea .contactbox > div:nth-of-type(2) a:hover {
    background-image: url(../images/common/icon02.png);
    background-color: #eb6100;
    color: #fff;
    text-decoration: none;
}

}