﻿
.pr_list{
	width:90%;
	margin:0 auto;
}
.pr_list li{
	list-style-type:none;
	width:100%;
	margin:0 auto 15px;
	border:1px solid #f5a13a;
	padding:1em;
	border-radius:5px;
	background:url(img/arrow.png) right 1% top 50% no-repeat;
	line-height:1.4em;
}
.pr_list a{
	text-decoration:none;|
}
.pr_list a:hover{
	color:#f5a13a;
	transition: color .5s;
}
.pr_list_title{
	font-weight:bold;
}

@media only screen and (max-width: 750px) {
	.set_pr{
		margin-left:-3em;
	}
	.pr_list{
		width:100%;
		margin:0;
	}
}

.productset{
	width:90%;
	margin:100px auto;
}
.works_title{
	
}
.works_title h3{
	font-size:1.3em;
	font-weight:bold;
	color:#a38a59;
	margin:0;
}
.works_title p{
	line-height:1.5em;
}

ul.works_list{
}
.works_list li{
	display:inline-block;
	height:170px;
}

.works_item {
    list-style: none;
    position: relative;
    width: 200px;
    border-radius: 2px;
    margin: 0 auto 1em;
}
.works_modal_open {
		height:170px;
    text-align: center;
}
	.works_modal_open p{
		line-height:1.2em;
	}
	.works_modal_open img{
		width:75%;
	}
.works_image_mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    background-color: rgba(245,161,58, 0.8);
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease;
    cursor: pointer;
}
.mask_text {
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    color: #fff;
}
.works_modal_content{
    text-align: center;
}
.works_image:hover .works_image_mask {
    opacity: 1;
    padding-top: 13%;
}
/* ------works_modal css------ */
.works_modal_wrapper {
    position: fixed;
    display: flex;
    align-items: center;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: none;
    opacity: 0;
    z-index: -1;
}
.works_modal_window {
    width: 100%;
    max-width: 1000px;
    margin: 30px auto 0;
    padding: 15px;
    background: #fff;
    z-index: 1;
    height: 90%;
    overflow-y: scroll;
}
.works_modal_content {
    margin: 0 auto;
    width: 80%;
    height: 80%;
}
.works_modal_mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(163,138,89, 0.7);
}
.works_modal_close {
    z-index: 300;
    position: absolute;
    top: 0;
    right: 10px;
    color: #808080;
    font-size: 1.5em;
    cursor: pointer;
}
.works_modal_close:hover {
    color: #000;
    transition: all .5s;
}
html.is_open, body.is_open {
    overflow: hidden;
}
.works_modal_wrapper.is_open {
    animation: works_modal_wrapper_open .5s ease forwards;
}
.works_modal_wrapper.is_open .works_modal_window {
    animation: works_modal_window_open .5s ease forwards;
}
.works_modal_wrapper.is_close {
    animation: works_modal_wrapper_close .5s ease forwards;
}
.works_modal_wrapper.is_close .works_modal_window {
    animation: works_modal_window_close .5s ease forwards;
}

.works_modal_content p{
	margin:1em 0 0;
	line-height:1.3em;
}
.works_modal_content p.pushed{
	font-weight:bold;
	font-size:1.5em;
	margin:-.2em 0 1.6em;
}
.works_modal_content p.contex{
	text-align:left;
	padding-bottom:2em;
}
hr.kugiri{
	width:2.2em;
}
.pdfview{
	font-size:13px;
}
.pdfview a{
	color:#fe7e01;
}

@keyframes works_modal_wrapper_open {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
      z-index: 300;
    }
  }
  @keyframes works_modal_window_open {
    0% {
      opacity: 0;
      transform: translateY(-30px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes works_modal_wrapper_close {
    0% {
      z-index: 300;
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes works_modal_window_close {
    0% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      transform: translateY(-30px);
      opacity: 0;
    }
  }

@media screen and (max-width:720px){
	.works_modal_content img{
		width:80%;
		margin-top:1em;
	}
}


p.story{
	font-size:1.2em;
	font-weight:bold;
	margin:50px 0 15px 0;
	border-left:2px solid #a9894a;
	text-indent:.6em;
}
.single1{
	text-align:center;
	margin:2em 0 0;
}
.single2{
	text-align:center;
	margin:0 0 10em;
}
.xtframe{
	width:500px;
	height:281px;
}
@media screen and (max-width:720px){
	p.story{
	margin-left:1em;
	}
	.single1{
	text-align:center;
	margin:2em 0 0 2em;
	}
	.single2{
	text-align:center;
	margin:0 0 10em 2.3em;
	}
	.xtframe{
		width:300px;
		height:168px;
	}
}


#pre_thums{
}
.creatorname{
	font-weight:bold;
	font-size:1.3em;
}
.pre_setpic{
	margin-bottom:4em;
	text-align:center;
}
.pre_setpic li{
	display:inline-block;
	font-weight:bold;
	margin-bottom:2em;
}
@media screen and (min-width:720px){
.pre_setpic{
	text-align:left;
}
.pre_setpic li{
	text-align:center;
	margin:0 .5em;
}
