@charset "utf-8";
/* CSS Document */

HTML{
	height: 100%;
	width: 100%;
	font-size: 15px;
}

body {
	margin: 0px;
	background-color: #1A1919;
	width: 100vw;
}
img {
-webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  touch-callout:none;
  user-select:none;
}
p {
	font-size: 10px;
	margin: 0px;
	padding: 0px;
}

.container {
	width: 100vw;
	margin: 0px;
	font-family: "Helvetica Neue",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
	overflow-x: hidden;
	overflow-y: auto;
}
img {
-webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  touch-callout:none;
  user-select:none;
}
.header {
	height: 35px;
	width: 100vw;
	background-color: #000000;
	position: relative;
	background-image: url(Images/rogo.png);
	background-position: 0% 0px;
	background-repeat: no-repeat;
	background-size: auto 35px;
}
.container .header h1 {
	display: inline-block;
	width: 100vw;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	padding: 0;
	float: right;
}
.header h1 img {
	width: auto;
	height: 35px;
	margin: 0;
	padding: 0 1vw 0 0;
	float: right;
}

.container .contents {
	overflow-x: hidden;
	overflow-y: auto;
	width: 100vw;
	height: auto;
	padding-bottom: 60px;
	user-select:none;
    -webkit-user-select:none;
    -ms-user-select: none;
    -moz-user-select:none;
    -khtml-user-select:none;
    -webkit-user-drag:none;
    -khtml-user-drag:none;
}
.contents .mainimage img{
 width: 100vw;
 height: 40vw;
object-fit: cover;
}
.contents .side_bar {
	width: 100vw;
	height: auto;
	margin-top: 1vh;
	display: flex;
	flex-wrap: wrap;
}
.contents .side_bar h1 {
	display: none;
}
.contents .side_bar h2 {
	margin: 0 0 0 1vw;
	font-size: 0.8rem;
	font-weight: 600;
	color: #FFFFFF;
	width: 100vw;
}

.contents .side_bar_w {
	display: none;
}

.works h3 {
	width: 19.5vw;
	font-size: 0.8rem;
	margin: 0 0.5vw 0.5vh 0;
	background: rgba(128,128,128,0.2);
}

.works h3 a:hover {
	background: rgba(128,128,128,0.5);
	color: #13F5B9;
}
.works h3 a{
	display: block;
	text-align: center;
    width: 100%;
    height: 100%;
	color: #FFFFFF;
	text-decoration: none;
}
.works h4 {
	width: 19.5vw;
	font-size: 0.8rem;
	margin: 0 0.5vw 0.5vh 0;
	background: rgba(128,128,128,0.2);
}

.works h4 a:hover {
	background: rgba(128,128,128,0.5);
	color: #13F5B9;
}
.works h4 a{
	display: block;
	text-align: center;
    width: 100%;
    height: 100%;
	color: #FF0004;
	text-decoration: none;
}
.works ul {
	margin: 0 0 0 0;
	list-style-type: none;
	padding-left: 0px;
}
.works ul li {
	background: rgba(255,255,255,0.6);
	float: left;
	width: 95vw;
	padding: 0;
	margin: 1px 0 0 2vw;
	cursor: pointer;
}
.works ul li a{
    background: rgba(255,150,200,0.7);
    font-size: 0.7rem;
    font-weight: 500;
    color: #000000;
    position: relative;
    text-align: left;
    text-decoration: none;
    display: block;
    padding-left: 1vw;
    margin-top: 4px;
    margin-bottom: 4px;
}
.works ul li a:hover{
   background-color: #ffffff;
}


.works ul li2 {
	background: rgba(255,255,255,0.6);
	float: left;
	width: 95vw;
	padding: 0;
	margin: 1px 0 0 2vw;
}
.works ul li3 {
	background: rgba(255,255,255,0.6);
	float: left;
	width: 95vw;
	padding: 0;
	margin: 0 0 0 2vw;
}
ul li2 a {
	font-size: 0.7rem;
	font-weight: 500;
	color: #000000;
	position: relative;
	text-align: left;
}

ul li p {
	font-size: 0.7rem;
	text-align: left;
	font-weight: 600;
	color: #000000;
	position: relative;
	padding-left: 1vw;
}
ul li2 p {
	font-size: 0.7rem;
	text-align: left;
	font-weight: 600;
	color: #000000;
	position: relative;
	padding-left: 1vw;
}

ul li2 a p {
	font-size: 0.7rem;
	text-align: left;
	font-weight: 500;
	color: #000000;
	padding-left: 1vw;
}
ul li3 a p {
	font-size: 0.7rem;
	text-align: left;
	font-weight: 500;
	color: #000000;
	padding-left: 1vw;
}

.side_bar ul li4 {
	display: none;
}

.contents .side_bar .space {
	width: 100vw; 
	height: 5px;
}
.contents .main {
	width: 100vw;
	height: auto;
	float: left;
}
.main .show_title {
	width: 100vw;
	margin: 2vh 0 2vh 0;
	background: rgba(255,255,255,0.3);
	float: left;
}
.show_title  h3 {
	width: 100vw;
	display: block;
	font-size: 0.8rem;
	margin: 0 0 0 1.5vw;
	padding: 0 1vw 0 1vw;
	color: #FFFFFF;
}

.main .title {
	width: 100vw;
	margin: 2vh 0 2vh 0;
	background: rgba(255,255,255,0.3);
	float: left;
}
.main .title  h3 {
	width: 100vw;
	display: block;
	font-size: 0.8rem;
	margin: 0;
	padding: 0;
	color: #FFFFFF;
}
.main .s-title {
	width: 100vw;
	margin: 0 0 0 2vw;
	padding: 0;
	float: left;
}
.s-title  h3 {
	width: 100vw;
	font-size: 0.7rem;
	display: block;
	margin: 0;
	padding: 0;
	color: #FFFFFF;
	background-color: #2D2C2C;
}
.s-title  h3 a {
	color: #FFFFFF;
	display: block;
	text-decoration: none;
	background-color: #2D2C2C;
}
.s-title  h3 a:hover {
	display: block;
	color: #13F5B9;
	background-color: #7C7C7C;
}

.contents .main .photobox {
	width: 100vw;
}
.main .photobox .photo {
    width: 100vw;
	height: 75vw;
    position: relative;
    float: left;
}
.main .photobox .photo img{
    position: absolute;
	opacity: 0;
    width: 100%;
	height: auto;
    object-fit: cover;
    top: 50%;
    left: 50%;
    -webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
    transition: .4s;
}
.main .photobox ul {
    width: 100vw;
	max-height: 35vh;
	margin: 0px;
	padding: 1vh 0 2vh 1.5vw;
    display: flex;
    list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	justify-content: start;
	background-color: #585252;
}
ul li {
	list-style-image: none;
	margin: 0;
	padding: 0;
}
ul li label{
	width: 25vw;
	height: 19vw;
    display: block;
    cursor: pointer;
	margin: 0.5vh 1vw 0 0;
	border: 1px solid #2D2C2C;
}
ul li label:hover{
	opacity: 1;
	border: 1px solid #FF9600;
}
li label img{
    width: 25vw;
    height: 19vw;
	opacity: 0.6;
	object-fit: cover;
}
#photo1,#photo2,#photo3,#photo4,#photo5,#photo6,#photo7,#photo8,#photo9,#photo10,#photo11,#photo12,#photo13,#photo14,#photo15,#photo16,#photo17,#photo18,#photo19,#photo20,#photo21,#photo22,#photo23,#photo24,#photo25,#photo26,#photo27,#photo28,#photo29,#photo30,#photo31{
   display: none;
}
#photo1:checked ~ .photo img:nth-child(1){
  opacity: 1;
}
#photo2:checked ~ .photo img:nth-child(2){
  opacity: 1;
}
#photo3:checked ~ .photo img:nth-child(3){
  opacity: 1;
}
#photo4:checked ~ .photo img:nth-child(4){
  opacity: 1;
}
#photo5:checked ~ .photo img:nth-child(5){
  opacity: 1;
}
#photo6:checked ~ .photo img:nth-child(6){
  opacity: 1;
}
#photo7:checked ~ .photo img:nth-child(7){
  opacity: 1;
}
#photo8:checked ~ .photo img:nth-child(8){
  opacity: 1;
}
#photo9:checked ~ .photo img:nth-child(9){
  opacity: 1;
}
#photo10:checked ~ .photo img:nth-child(10){
  opacity: 1;
}
#photo11:checked ~ .photo img:nth-child(11){
  opacity: 1;
}
#photo12:checked ~ .photo img:nth-child(12){
  opacity: 1;
}
#photo13:checked ~ .photo img:nth-child(13){
  opacity: 1;
}
#photo14:checked ~ .photo img:nth-child(14){
  opacity: 1;
}
#photo15:checked ~ .photo img:nth-child(15){
  opacity: 1;
}
#photo16:checked ~ .photo img:nth-child(16){
  opacity: 1;
}
#photo17:checked ~ .photo img:nth-child(17){
  opacity: 1;
}
#photo18:checked ~ .photo img:nth-child(18){
  opacity: 1;
}
#photo19:checked ~ .photo img:nth-child(19){
  opacity: 1;
}
#photo20:checked ~ .photo img:nth-child(20){
  opacity: 1;
}
#photo21:checked ~ .photo img:nth-child(21){
  opacity: 1;
}
#photo22:checked ~ .photo img:nth-child(22){
  opacity: 1;
}
#photo23:checked ~ .photo img:nth-child(23){
  opacity: 1;
}
#photo24:checked ~ .photo img:nth-child(24){
  opacity: 1;
}
#photo25:checked ~ .photo img:nth-child(25){
  opacity: 1;
}
#photo26:checked ~ .photo img:nth-child(26){
  opacity: 1;
}
#photo27:checked ~ .photo img:nth-child(27){
  opacity: 1;
}
#photo28:checked ~ .photo img:nth-child(28){
  opacity: 1;
}
#photo29:checked ~ .photo img:nth-child(29){
  opacity: 1;
}
#photo30:checked ~ .photo img:nth-child(30){
  opacity: 1;
}
#photo31:checked ~ .photo img:nth-child(31){
  opacity: 1;
}


.contents .main table {
	width: 100vw;
	margin: 2vh 0 2vh 0;
	float: left;
	top: 0;
	left: 0;
	position: relative;
}
tbody tr th {
	border-bottom: 1px solid #4A4A4A;
	width: 35vw;
	color: #7C7C7C;
	font-size: 0.5rem;
	text-align: left;
}
tbody tr td {
	border-bottom: 1px solid #4A4A4A;
	width: 65vw;
	color: aliceblue;
	font-size: 0.6rem;
	text-align: left;
}
tbody tr td a{
	color: #DF2D30;
}
.contents .main .link-right{
	width: 100vw;
	padding: 2vh 2vw 0 0;
}
.contents .main .link-right h5{
	color: #DF2D30;
	font-size: 0.6rem;
	display: block;
	text-align: right;
	cursor: pointer;
}
.link-right p{
	color: #13F5B9;
}

.contents .main .link {
    width: auto;
	margin: 0 0 0 1vw;
	float: left;
}
.contents .main .link p{
    color: aliceblue;
	font-size: 0.6rem;
}
.contents .main .link a{
    color: #DF2D30;
	font-size: 0.6rem;
}

.contents .main .link-right{
	width: 100vw;
}
.contents .main .link-right a{
	color: #DF2D30;
	font-size: 0.6rem;
	display: block;
	text-align: right;
	padding-right: 2vw;
}

.top-tile p{
	font-size: 0.6rem;
	font-weight: normal;
	color: #FFFFFF;
	text-align: right;
	margin-right: 1vw;
}
.container .contents .er{
    width: 100vw;
	height: 100%;
	padding: 15vh 0 0 5vw;
}
.container .contents .er p{
    font-size: 2rem;
	color: #ffffff;
	text-align: left;
}

.down_bar {
	width: 100vw;
	margin-top: 2vh;
}
.down_bar h2 {
	margin: 0;
	width: auto;
}
.down_bar h2 p {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 800;
	text-align: center;
	color: #FFFFFF;
}
.down_bar ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	background-color: #2D2C2C;
}
.down_bar ul li a {
	margin: 0;
	width: 20vw;
	font-size: 0.7rem;
	font-weight: 800;
	color: #FFFFFF;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	display: block;
}
.down_bar  ul li a:hover{
	background: rgba(255,255,255,0.2);
	color: #13F5B9;	
}
.down_bar ul .space{
	margin: 0;
	width: 20vw;
	display: block;
}

.container .footer {
	width: 100vw;
	height: 40px;
	padding: 0 0 1vh 0;
	float: left;
	background-color: #2D2C2C;
	position: fixed;
	bottom: 0px;
}
.footer ul {
	list-style-type: none;
	margin: 0px;
	padding: 0;
	display: flex;
}
.footer ul li {
	width: 33vw;
	text-align: center;
	height: auto;
	margin: 0;
	padding: 0;
}
.footer ul li a {
	color: #FFFFFF;
	font-size: 0.8rem;
	line-height: 1.5rem;
	font-weight: bold;
	text-decoration: none;
	background-color: #2D2C2C;
	display: block;
}
.footer ul li a:hover  {
	background-color: #4A4A4A;
	color: aqua;
}
.footer_add {
	float: left;
    width: 100vw;
	display: block;
}
.footer .footer_add h1 {
	width: 100vw;
	color: #ffffff;
	text-align: center;
	font-size: 0.5rem;
	line-height: 0.5rem;
}

.footer_add p {
	display: none;
}