@charset "utf-8";
/* CSS Document */
.button {
	clear: both;
	margin-left : 35%;
}
.button a {
	padding : 9px 40px;
	background : #A0A0A0;
	border-radius : 3px;
	color : #ffffff;
	-webkit-appearance : none;
	letter-spacing: 0.2em;
}
.button a:hover {
	cursor : pointer;
	background : #000;
}
.orz {
	text-align: center;
	line-height: 2em;
	margin: 0 0 30px;
}
.orz span {
	font-size: 150%;
}
.box_works {
   clear: both;
/* Prevent vertical gaps */
   line-height: 0;
   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;
}
.pdf, .xls {
    margin: 0 10px 50px 0;
    background-color: #BD7B7D;
    float: left;
}
.pdf i, .xls i {
    margin: 0 10px 0 0;
    font-size: 125%;
}
.pdf a, .xls a {
    padding: 10px 30px;
    background-color: #a0a0a0;
    color: #fff;
    border-radius: 8px;
}
.pdf a:hover {
    background-color: #000;
    color: #fff;
    border-radius: 8px;
}
.xls a:hover {
    background-color: #ED484B;
    color: #fff;
    border-radius: 8px;
}
.box_works p {

    float: left;
}

.w20 img {
width: 20%;
margin-left: 40%;
margin-bottom: 10%;
}
.w40 img {
width: 40%;
margin-left: 30%;
margin-bottom: 10%;
}
.w60 img {
width: 60%;
margin-left: 20%;
margin-bottom: 10%;
}
.w78 img {
width: 78%;
margin-left: 11%;
margin-bottom: 10%;
}
.w96 img {
width: 96%;
margin-left: 2%;
margin-top: 10%;
margin-bottom: 20%;
}

@media (max-width: 1000px) {
  .box_works {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 800px) {
 .box_works {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 600px) {
  .box_works {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 500px) {
  .box_works {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}







.box_worksin {
	clear: both;
	padding: 20px 0 60px;
}
.box_worksin dt {
	font-feature-settings: "palt";/* 文字間自動カーニング */
	font-weight: bold;
	font-size: 87.5%;
	float: left;
	margin: 4px 20px 0 0;
}
.box_worksin p {
	float: right;
	width: 30px;
}
.box_worksin2_800, .box_worksin2_500, .box_worksin2_300, .box_worksin2_100 {
	clear: both;
	text-align: center;
}
.box_worksin2_800 img {
	width: 800px;
	margin-bottom: 50px;
}
.box_worksin2_500 img {
	width: 500px;
	margin-bottom: 50px;
}
.box_worksin2_300 img {
	width: 300px;
	margin-bottom: 50px;
}
.box_worksin2_100 img {
	width: 100px;
	margin-bottom: 50px;
}
.category {
	padding-bottom: 100px;
}
.category li {
	float: left;
    margin: 0 0 10px 10px;
}
.btn button {
	outline: 0;
	height: 22px;
	border-radius: 15px;
	padding: 0 14px;
	background-color: #fff;
	color: #000;
	font-size: 87.5%;
    font-weight: bold;
	border: 1px solid #000;
	text-align: center;
	cursor: pointer;
}
.btn button:hover {
	color: #fff;
	background-color: #000;
}








.open_button {
	color: #000;
	font-size: 87.5%;
	padding: 2px 12px;
	border: 1px solid #000;
	float: left;
	text-align: center;
	margin-right: 15px;
	border-radius: 10px;
	cursor: pointer;
}
.open_button:hover {
	color: #fff;
	background-color: #000;
}
.back_button a {
	padding: 3px 2px 3px 2px;
	width: 50px;
	text-align: center;
	background-color: #a0a0a0;
	color: #fff;
	float: left;
	margin-bottom: 15px;
	position: relative;
}
.back_button a:before {
	content: "";
	position: absolute;
	left: -8px;
	bottom: 0;
	width: 0;
	height: 0;
	border-right: 8px solid #a0a0a0;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
}
.back_button a:hover {
	background-color: #000;
}
.back_button a:hover:before {
	border-right: 8px solid #000;
}

/* --------------pop up--------------- */
.modal_wrap input {
	display: none;
}
.modal_overlay {
	display: flex;
	justify-content: center;
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	opacity: 0;
	transition: opacity 0.5s, transform 0s 0.5s;
	transform: scale(0);
}
.modal_trigger {
	position: absolute;
	width: 100%;
	height: 100%;
}
.modal_content {
	position: relative;
	align-self: center;
	width: 60%;
	max-width: 800px;
	padding: 50px 50px;
	box-sizing: border-box;
	background: #fff;
	line-height: 1.4em;
	transition: 0.5s;
}
.modal_content ul {
	margin-bottom: 15px;
}
.modal_content li {
	font-size: 87.5%;
	font-weight: bold;
	line-height: 2em;
}
.modal_content li span {
	color: #F74F52;
    font-weight: bold;
}
.modal_content p {
	font-size: 81.25%;
	line-height: 2em;
	margin-top: 30px;
}
.url {
	font-weight: bold;
}
.url a {
	font-weight: bold;
	color: #a0a0a0;
	letter-spacing: 0.1em;
}
.url a:hover {
	color: #000;
}
.close_button {
	position: absolute;
	top: 14px;
	right: 16px;
	font-size: 24px;
	cursor: pointer;
}
.modal_wrap input:checked ~ .modal_overlay {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.5s;
}