@charset "UTF-8";
/*
FOR PC
 */
@media only screen and (min-width:1025px) {
	body.enter .container-wrap {
    width:100vw;
    min-height:100vh;
}
/*
ENTER PAGE
 ----------------------------------------------------------------------------------------*/
.enter-hero {
    -webkit-background-size:cover;
    background-size:cover;
}

/*
TOP PAGE
 ----------------------------------------------------------------------------------------*/
#header {
	display:-webkit-flex;
	display:flex;
	flex-flow: row;
	align-items: baseline;
	width:960px;
	height:44px;
	margin:100px auto 70px;
}
#header >h1, #header > p {
	display:block;
	width:auto;
	height:24px;
	vertical-align:baseline;
	line-height:1;
}
#header > h1 {
	margin:0 20px 0 5px;
}
#header > p {
	margin:0;
}
.container-wrap-wrap {
	display:-webkit-flex;
	display:flex;
	max-width:960px;
}
#navigation {
	/*display:none;*/
	width:30.2%;
	max-width:290px;
	padding:0;
	font-size:14px;
	margin:0 10px 0 5px;
	border-bottom: none;
}
#navigation #nav-open {
	display:none;
}
#nav-content {
	position:inherit;
	padding:0;
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
}
#container {
	width:67.7%;
	max-width:650px;
	margin:0 5px 0 0;
}
#footer {
	width:100%;
	margin-bottom:20px;
	border:none;
}
.top-contents {
	flex-direction:row;
}
.tcBox {
	width:290px;
}
.news {
	margin-top:0;
}
/*
PROFILE PAGE
 ----------------------------------------------------------------------------------------*/
 .heroTxtBox {
	position:absolute;
	display:block;
	width:350px;
	height:auto;
	left:60px;
	bottom:50px;
	margin-top:0;
 }
 .scndBox {
   margin-bottom:100px;
 }
 .ryakureki-wrap {
	 display:-webkit-flex;
	 display:flex;
	 justify-content:space-between;
	 flex-direction:row;
 }
 .rightBox {
	 display:block;
	 width:48%;
	 margin-top:10px;
	 margin-left:15px;
 }
/*
PHOTO PAGE
 ----------------------------------------------------------------------------------------*/
 .heroTxtBox.photos-sect {
	position:absolute;
	width:230px;
	height:100%;
	top:0;
	left:0;
	padding-top:56px;
	padding-left:50px;
	background-color:rgba(245,180,83,.5);
 }
 .heroTxtBox.photos-sect > h2 {
	 margin-bottom:53px!important;
 }
 .heroTxtBox.photos-sect > div.photos-list > ul li {
	 margin-bottom:25px!important;
 }
 .heroTxtBox.photos-sect > div.photos-list > ul li:last-child {
 	 margin-bottom:0!important;
  }
/*
PHOTO-DETAIL PAGE
 ----------------------------------------------------------------------------------------*/
 .heroTxtBox.photos-sect-detail {
 	 background-color:rgba(245,180,83,.5);
	 padding-top:166px;
 }
 .detailBox1, .detailBox2 {
	 display:-webkit-flex;
	 display:flex;
	 justify-content: space-between;
 }
 .detailBox2  {
	 flex-direction:row;
 }
 .detailBox2  {
	 flex-direction: row-reverse;
 }
.detailBox1 .detail-img,
.detailBox2 .detail-img {
  max-width:350px;
  width:100%;
}
.detailBox1 .detail-txt,
.detailBox2 .detail-txt {
	width:300px;
  padding:60px 15px;
	max-height:230px;
}
.detailBox3 .detail-txt{
  padding:15px 15px;
}
/* ModalWindow Compornent */
@keyframes fadeIn {
	0% { opacity: 0;  }
	100% { opacity: 1;  }
}
.modal__window {
  position:absolute;
  z-index:9998;
  background:#fff;
  padding:20px;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  width:auto;
  height:auto;
  max-width:80%;
  max-height:80%;
  box-sizing:border-box;
}
.modal__image {
  position:relative;
  display:inline-block;
  width:100%;
  height:100%;
}
.modal__image > img {
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
}
/* Buttons */
button {
  cursor: pointer;
  outline: 0;
}
.modal__close {
  	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC40MTQgN2w0Ljk1LTQuOTVMMTEuOTQ4LjYzOCA3IDUuNTg3IDIuMDUuNjM2LjYzOCAyLjA1IDUuNTg3IDdsLTQuOTUgNC45NSAxLjQxNCAxLjQxM0w3IDguNDEzbDQuOTUgNC45NSAxLjQxMy0xLjQxNEw4LjQxMyA3eiIgZmlsbD0iIzAwMCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+) no-repeat center center;
  border: 0;
  height: 20px;
  line-height: 20px;
  opacity: .3;
  position: absolute;
  top:2px;
  right: 2px;
  text-indent: -9999px;
  transition: all .2s ease-out;
  width: 1rem;
}
.modal__close:hover {
  opacity: .6;
}
.modal__close:focus{
  border:none;
  outline: 0;
}
.modal-wrapper-wrapper {
  position:relative;
}
.layer {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(255,255,255,0.5);
  z-index:9997;
}
.modal {
  position:fixed;
  z-index:9999;
  top:0;
  left:0;
  right:0;
  bottom:0;
  visibility:hidden;
}
.modal[data-state='open'] {
  visibility:visible;
}
[data-state='open'] .modal__window {
  animation: fadeIn 1.5s forwards;
}
.modal-item a {
  display:block;
}
.modal-item a img {
  width:100%;
  heigth:auto;
  max-width:100%;
}
/* .detailBox1 .detail-txt:before,
.detailBox2 .detail-txt:before  {
  position:absolute;
  top:50%;
  margin-top:-30px;
  content:"";
  display:block;
}
.detailBox1 .detail-txt:before {
	left:-30px;
	border-top:30px solid transparent;
	border-right:30px solid #f8b551;
	border-bottom:30px solid transparent;
}
.detailBox2 .detail-txt:before {
	left:100%;
	right:-30px;
	margin-left:0;
	border-top:30px solid transparent;
	border-left:30px solid #f8b551;
	border-bottom:30px solid transparent;
} */
/*
TOPIC PAGE
 ----------------------------------------------------------------------------------------*/
/*
WORKS PAGE
 ----------------------------------------------------------------------------------------*/
 .heroTxtBox.works-sect {
	 padding-top:195px;
 }
/*
POPUP
-----------------------------------------------------------------------------------------*/
	.puLayer {
		position:fixed;
		display:block;
		background-color:rgba(0,0,0,.5);
		width:100vw;
		height:100vh;
		top:0;
		left:0;
	}
	.puContentWrap {
		position:absolute;
		display:block;
	}
	.pucloseBtn {


	}
	.puFullsize {
		display:block;


	}
	.puThumbnailLink:hover {
		opacity:0.5;
	}
}