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

@import url('https://fonts.googleapis.com/css2?family=Lato&family=Noto+Sans+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;400&display=swap');





#common_top{
	margin: 0 auto;
	position: relative;
}
/*=============================
main
=============================*/

.prev{
	z-index: 200;
	position: absolute;
	width: 50vw;
	height: calc(900/1080*100vh);
	left: 0;
}
.next{
	z-index: 200;
	position: absolute;
	width: 50vw;
	height: calc(900/1080*100vh);
	right: 0;	
}

.arrow-left{
	z-index: 200;
	position: absolute;
	bottom: calc(150/1080*100vh);
	width: 1em;
	left: calc(310/1920*100vw);
	color: #EF7474;
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	height: 1em;
	transform: translateX(25%) rotate(-135deg);
}
.arrow-right{
	z-index: 200;
	position: absolute;
	bottom: calc(150/1080*100vh);
	width: 1em;
	right: calc(310/1920*100vw);
	color: #EF7474;
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	height: 1em;
	transform: translateX(-25%) rotate(45deg);
}
.arrow-left::before,.arrow-right::before, .arrow-left::after,.arrow-right::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 0.1em;
}
.arrow-left::before,.arrow-right::before {
  top: 0;
  left: 0;
  right: 0;
  height: 0.1em;
}
.arrow-left::after,.arrow-right::after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 0.1em;
}
.photo_box{
	width: 100vw;
	height: calc(900/1080*100vh);
}
.photo_wrap{
	position: relative;
	overflow: hidden;
	width: 100vw;
	height: calc(900/1080*100vh);
	background-color: rgb(255,255,255,0.2);	
}
.category{
	z-index: 250;
	position: absolute;
	display: flex;
	flex-direction: column;
	bottom: calc(70/1080*100vh);
    right: calc(360/1920*100vw);
}

/* スクロールを促す線 */
.category::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 70px;    
	right: 0;
    /*線の形状*/
	width: 1px;
	height: 30px;
	background: #EF7474;
    /*線の動き2秒かけて動く。永遠にループ*/
	animation: pathmove 2s ease-in-out infinite;
	opacity:0;
}
/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:10px;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		bottom:50px;
		opacity: 0;
	}
}
.last_category::after{
	display: none;
}
#common_top h2{
	font-size: 15px;
}
#common_top h3{
	font-size: 15px;
}
.work_name{
	z-index: 200;
	font-size: 0.8rem;
	line-height: 1.2;
	position: absolute;
	left: calc(360/1920*100vw);
	bottom: calc(70/1080*100vh);
}
.photo_hr_wrap{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.photo_hr{
	float: right;
	width: 12px;
	height: 1px;
	margin-left: 6px;
}
.hr_color{
	color: #EF7474;
}

.photo_li img{
	position: absolute;
    width: auto;
    max-height: 100%;
    max-width: 100%;
    max-height: calc(800/1080*100vh);
	top: 50%;
	left: 50%;
   -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#photo_portrait{
	background-color: #293C53;
}
#header_common{}
#photo_landscape .photo_wrap:last-child{
	margin-bottom: 0;   /*最後*/
}

/*-----1ページスクロール　firefox注意！-----*/
.fullPageScroll {
  width: 100vw;
  height: 100vh;
  scroll-snap-type: y mandatory;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.section {
  width: 100vw;
  height: 100vh;
  padding-top: calc(180/1080*100vh);
  scroll-snap-align: start;
}

/*----- タブレット -----*/
@media only screen and (max-width : 1024px) {
.photo_li img{
    max-width: 90%;
    height: auto;		
	}
.arrow-left{
	left: calc(200/1920*100vw);
}
.arrow-right{
	right: calc(200/1920*100vw);
}
.category{
    right: calc(200/1920*100vw);
}
.work_name{
	left: calc(200/1920*100vw);
}		
	
}

/*----- スマホ -----*/
@media only screen and (max-width : 599px) {

.arrow-left{
	left: calc(100/1920*100vw);
}
.arrow-right{
	right: calc(100/1920*100vw);
}
.category{
    right: calc(100/1920*100vw);
}
.work_name{
	left: calc(100/1920*100vw);
}		
}