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

* {
	-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
	-webkit-font-smoothing: subpixel-antialiased;
	margin: 0;
	
}




body {
	width: 100%;
  height: 100vh;
	margin: 0;
	font-family: 'Swiss721W01-BoldCondens',"fot-cezanne-pron",'YuGothic','Yu Gothic',"arial narrow",'Arial',sans-serif;
	color: #4B5C6C;
}

.wrap {
	overflow: hidden;
}

/*header*/

header {
	padding: 0px auto;
	margin: 0 auto;
	width: 100%;
}

nav {
	margin: 0.8% auto 0;
  display: flex;
	-webkit-display: flex;
	align-items: center;
  -webkit-align-items: center;
	mix-blend-mode: multiply;
	z-index: 3;
}


nav a{
	margin-right: auto;
	width: 22%;
	height: auto;
	padding-left: 5%;
}


.menu {
	width: 100%;
	margin: 0;
	list-style: none;
	justify-content: flex-end;
	padding-right: 1%;
	display : -webkit-inline-box;
	display : -ms-inline-flexbox;
	display : -webkit-inline-flex;
	display : inline-flex;
}


.menu li {
	text-align: center;
	color:#4B5C6C;
	margin:5%;
	letter-spacing: 0.11em;
	font-size:1.15vw;
}

.menu a {
	text-decoration: none;
	color:#808072;
}

.menu a:hover {
	color: #F2E633;
}

.menu a:active {
	color: #D9E021;
}


@media (max-width:479px) {
  
  nav{
    margin: 8% 0 10%;
    flex-wrap: wrap;
    width: 100%;
  }
  
  nav img {
    padding-bottom: 5%;
    width: 100%;
  }
  
  
  nav a {
    width: 30%;
    padding-left: 5%;
  }
  
  .menu {
    width: 100%;
    margin: 1% auto 0;
    justify-content: center;
    padding-right: 11.5%;
  }
  
  .menu li {
    margin:4%;
    font-size:3.2vw;
  }
  
  
}



/*main*/

main {
margin: 0 auto;
	width: 100%;
	padding: 0;
}


img {
    max-width: 100%;
    height: auto;
		display: block;
}





/*photo-archives*/

#photog-top {
	width: 100%;
	height: auto;
  position: relative;
  padding-bottom: 100%;
}

#photog-title {
	width: 100%;
	height: auto;
	margin-top: 5%;
}

.title-back {
	width: 23%;
	height: auto;
}


.title {
	text-align: left;
	padding-bottom: 2%;
	width: 100%; 
}




.title-ja {
	margin: 0;
	width: 100%;
	padding-left: 1%;
	padding-bottom: 0.1%;
	text-align: left;
	font-weight: normal;
	letter-spacing: 0.12em;
	font-size:1.2vw;
	top: 0%;
	left:3%;
	position: absolute;
}


.date {
	position: absolute;
	top:1.2%;
	left:27%;
	text-align: right;
	font-size:0.8vw;
	letter-spacing: 0.05em;
	font-family: "Swiss721W01-Condensed";
  color:#808072;
	padding-left: 2%;
}

.date::before{
	  position: absolute;
    content: '';
    background: #808072;
    height: 1px;
	  left: -12%;
    width: 16%;
    top:50%;
}



.title-en {
	text-align: right;
	font-size:1.1vw;
	letter-spacing: 0.07em;
	padding-bottom: 0.2%;
	font-family: "Swiss721W01-Condensed";
  border-bottom: 2px solid #F2E633;
}

.title-en-pos1 {
  position: absolute;
	top:45%;
	left:0%;
	width: 21.5%;
}

.title-en-pos2 {
  position: absolute;
	top:51%;
	left:0%;
	width: 21.5%;
}


#photog-text {
	width: 100%;
	height: auto;
}


.ja-text {
	font-size: 0.95vw;
	letter-spacing: 0.05em;
	line-height: 2.2em;
	position: absolute;
	top:10%;
	left:10%;
}


.en-text {
	font-size: 1.0vw;
	font-family:"ff-zwo-corr-web-pro","arial",sans-serif;
	letter-spacing: 0.03em;
	font-weight:300;
	line-height: 1.7em;
}

.en-text-pos1 {
  position: absolute;
	top:54%;
	left:10%;
}

.en-text-pos2 {
  position: absolute;
	top:58%;
	left:10%;
}

.photog-hero {
	position: absolute;
	top:3.5%;
	right: 9%;
	width: 34%;
	height: auto;
}


/*-------@media (max-479)--------*/

@media (max-width:479px) {
  
  
  #photog-top {
    padding-bottom: 300%;
  }
  
  .title-ja {
    top:0.1%;
    font-size:4vw;
    left:7%;
  }
  
  .title-back {
	width: 65%;
  padding-top: 1%;
  }
  
  .br-pc {
	display: none;
}
  
  
  .date {
    font-size: 3vw;
    top:3%;
    left:14%;
    padding-left: 4%;
  }
  
  .ja-text {
    top:47%;
    left:8%;
    max-width: 420px;
	width:80%;	
	line-height: 2.1;
	letter-spacing: 0;
	font-size:3.4vw;
  }
  
  .photog-hero {
	position: absolute;
	top:5%;
	right: 13%;
	width: 80%;
	height: auto;
  margin-top: 7%;
}
  
  .title-en {
    font-size: 4vw;
    letter-spacing: 0.03em;
    width: 46%;
  }
  
  .title-en-pos2 {
    top:83%;
  }
  
  .en-text {
    top:87%;
    font-size: 3.7vw;
    width: 80%;
    max-width: 420px;
  }
  
}

/*-------@media (max-479)--------*/




/*photo grid*/

#photos {
	width: 100%;
	height: auto;
  margin-top:0;
}

#photos .grid {
	margin: 0 auto 11%;
	width: 80%;
}

.subtitle {
	width: 100%;
	height: auto;
	margin: 5% 0 3%;
	padding-bottom: 9%;
	position: relative;
}

.subtitle-none {
	width: 100%;
	height: auto;
	margin: 4.5% 0 6%;
	padding-bottom: 4%;
	position: relative;
}

.sub-text {
	background: url(img-photos/g1/2019.svg) no-repeat;
	background-size: 100%;
	padding-bottom: 5%;
	width: 8%;
	height: auto;
	top:0%;
	left:11.5%;
	position: absolute;
}

.sub-baseline {
	background: url(img-photos/g1/subtitle-baseline.svg) no-repeat;
	background-size: 100%;
	padding-bottom: 5%;
	width: 20%;
	height: auto;
}

.sub-space {
  position: absolute;
	top:40%;
	left:0%;
}

.sub-nospace {
  position: absolute;
	top:50%;
	left:0;
}

.subtitle p {
	font-size: 0.9vw;
	font-family:"ff-zwo-corr-web-pro","arial",sans-serif;
	letter-spacing: 0.03em;
	font-weight:300;
}

.subtitle-none p {
	font-size: 0.9vw;
	font-family:"ff-zwo-corr-web-pro","arial",sans-serif;
	letter-spacing: 0.03em;
	font-weight:300;
}

.under-line {
	padding-top: 2%;
	padding-right: 2%;
	text-align: right;
  position: absolute;
	top:42%;
	left:6.5%;
}

.on-line {
	padding-top: 0%;
	padding-right: 2%;
	text-align: right;
  position: absolute;
	top:10%;
	left:6.5%;
}

.enlarge {
	background: url(img-photos/enlarge.svg) no-repeat;
	background-size: 100%;
	padding-bottom: 3%;
	width: 0.8%;
	height: auto;
}

.enlarge-under {
  position: absolute;
	top: 66%;
	left: 18.9%;
}

.enlarge-on {
  position: absolute;
	top: 16%;
	left: 18.9%;
}


.subtitle2 {
	margin-top: 10%;
}

.sub-text2 {
	background: url(img-photos/g1/2017.svg) no-repeat;
	background-size: 100%;
	padding-bottom: 5%;
	width: 8%;
	height: auto;
	top:0%;
	left:11.5%;
	position: absolute;
}


#photos img {
	width: 100%;
}

#photos ul {
	list-style: none;
	padding: 0;
	width: 100%;
	margin: 0 0 6%;
	display : -webkit-box;
	display : -ms-flexbox;
	display : -webkit-flex;
	display : flex;
	-ms-flex-wrap : nowrap; /*for IE10*/
	-webkit-flex-wrap : nowrap; /*for old webkit browser*/
	flex-wrap : nowrap;
	-webkit-justify-content: space-around;
	-ms-flex-pack: justify;
	-webkit-box-pack: justify;
	justify-content: space-around;
}

#photos li {
	width: 19%;
	list-style: none;
	padding: 0;
}

#photos .grid img {
	width: 100%;
	height: auto;
	border-radius: 13%;
}


/*-------photos grid @media (max-479)--------*/
	
@media (max-width:479px) {

	#photos .grid {
	margin: 320px auto 0;
	padding-right: 2px;
	width: 97%;
}

#photos ul {
	margin: 0;
	display : -webkit-box;
	display : -ms-flexbox;
	display : -webkit-flex;
	display : flex;
	-webkit-justify-content: space-around;
	-ms-flex-pack: justify;
	-webkit-box-pack: justify;
	justify-content: space-around;
	-ms-flex-wrap:wrap;/*--- IE10用 ---*/
  -webkit-flex-wrap:wrap;/*--- safari（PC）用 ---*/
	flex-wrap: wrap;
}

#photos li {
	width: 38%;
	margin: 5% 0;
}

#photos .grid img {
	border-radius: 10%;
}

}


/*-------photos grid @media (max-479)--------*/



#imagelightbox
{
	background-color: #fff;
			background-color: rgba( 255, 255, 255, .9 );
			position: fixed;
			z-index: 9998;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
}





/*footer*/

footer {
	margin: 0 auto;
	width: 100%;
}

#footer-img {
	background-image: url("img/footer2.jpg");
	padding-bottom: calc(100%*281/1920);
	width: 100%;
	height: auto;
	background-size:cover;
	margin: 0 auto;
	position: relative;
}

footer .back-to-top {
	width: 100%;
	margin: 0 auto;
}

footer .arrow a {
	position: absolute;
	width: 10%;
	height: 8%;
	bottom: 60%;
	left: 45.65%;
	margin: 0 auto;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.05em;
	font-size: 1.3vw;
	color: #fff;
	opacity: 0.6;
}

footer .arrow img {
	transform: rotate(-180deg);
	width: 40%;
	margin: 0 0% 5% 29%;
	height: auto;
	color: #fff;
	opacity: 0.7;
}


.footer-text {
	position: absolute;
	font-size:0.9vw;
	color:#536873;
	letter-spacing: 0.05em;
	margin: 0 0.5% 0 0;
	padding-right: 2%;
	text-align: right;
	bottom: 12%;
	right:10.8%;
	border-right: 2px solid #808072;
	opacity: 0.7;
	mix-blend-mode: multiply;
}

.copyright {
	font-size: 1vw;
}

.c-mark {
	font-size: 1vw;
	vertical-align: bottom;
}

.icons {
	position: absolute;
	width: 18%;
	bottom: 12%;
	right: 1.3%;
}

.icons ul {
	list-style: none;
	padding-right: 3.3%;
	text-align: right;
}

.icons li {
	width: 15%;
	display: inline-block;
	margin: 0 2.5% 0 0;
	padding: 0 0.7%;
	text-align: right;	
}

.fb {
	margin-right:0.5%;
	padding-right: 0;
	padding-bottom: 0.1%;
}

.icons a img {
	opacity: 0.8;
	mix-blend-mode: multiply;
}

.icons a img:hover {
	opacity: 1;
}