@charset "UTF-8";

@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');

/*=============================
header
=============================*/



/*=============================
main
=============================*/
#temporary{
	font-size: 0.7rem;
}
main h2{
	padding-top: calc(200/1920*100%);
	padding-left: calc(360/1920*100%);
	padding-bottom: calc(150/1920*100%);
}

/*photograph*/
.work_photo {
    position: relative;
	width: 100%; /*調整！！*/
}
.work_photo::before{
	content: "";
	display: block;
	padding-top: 500%;
}
.top_photograph{
	position: absolute;
}

.top_photograph:nth-child(1){
	width: calc(520/1920*100%);
	top: 0;
	left: calc(360/1920*100%);
}
.top_photograph:nth-child(2){
	width: calc(315/1920*100%);
	top: calc(358/9600*100%);
	right: calc(490/1920*100%);
}
.top_photograph:nth-child(3){
	width: calc(370/1920*100%);
	top: calc(500/9600*100%);
	right: calc(170/1920*100%);
}
.top_photograph:nth-child(4){
	width: calc(370/1920*100%);
	top: calc(700/9600*100%);
	right: calc(400/1920*100%);
}
.top_photograph:nth-child(5){
	width: calc(640/1920*100%);
	top: calc(1000/9600*100%);
	left: calc(218/1920*100%);
}
.top_photograph:nth-child(6){
	width: calc(320/1920*100%);
	top: calc(1212/9600*100%);
	right: calc(360/1920*100%);
}
.top_photograph:nth-child(7){
	width: calc(310/1920*100%);
	top: calc(1610/9600*100%);
	left: calc(746/1920*100%);
}
.top_photograph:nth-child(8){
	width: calc(370/1920*100%);
	top: calc(1718/9600*100%);
	left: calc(436/1920*100%);
}
.top_photograph:nth-child(9){
	width: calc(810/1920*100%);
	top: calc(1932/9600*100%);
	right: 0;
}
.top_photograph:nth-child(10){
	width: calc(332/1920*100%);
	top: calc(2275/9600*100%);
	left: calc(290/1920*100%);
}
.top_photograph:nth-child(11){
	width: calc(563/1920*100%);
	top: calc(2620/9600*100%);
	left: calc(456/1920*100%);
}
.top_photograph:nth-child(12){
	width: calc(268/1920*100%);
	top: calc(2920/9600*100%);
	right: calc(360/1920*100%);
}
.top_photograph:nth-child(13){
	width: calc(723/1920*100%);
	top: calc(3216/9600*100%);
	left: calc(366/1920*100%);
}
.top_photograph:nth-child(14){
	width: calc(366/1920*100%);
	top: calc(3590/9600*100%);
	right: calc(248/1920*100%);
}
.top_photograph:nth-child(15){
	width: calc(410/1920*100%);
	top: calc(3640/9600*100%);
	left: calc(136/1920*100%);
}
.top_photograph:nth-child(16){
	width: calc(320/1920*100%);
	top: calc(4000/9600*100%);
	right: calc(510/1920*100%);
}
.top_photograph:nth-child(17){
	width: calc(450/1920*100%);
	top: calc(4230/9600*100%);
	left: calc(360/1920*100%);
}
.top_photograph:nth-child(18){
	width: calc(420/1920*100%);
	top: calc(4725/9600*100%);
	right: calc(470/1920*100%);
}
.top_photograph:nth-child(19){
	width: calc(305/1920*100%);
	top: calc(5028/9600*100%);
	right: calc(230/1920*100%);
}
.top_photograph:nth-child(20){
	width: calc(495/1920*100%);
	top: calc(5170/9600*100%);
	left: calc(170/1920*100%);
}
.top_photograph:nth-child(21){
	width: calc(360/1920*100%);
	top: calc(5395/9600*100%);
	right: calc(290/1920*100%);
}
.top_photograph:nth-child(22){
	width: calc(350/1920*100%);
	top: calc(5560/9600*100%);
	left: calc(728/1920*100%);
}
.top_photograph:nth-child(23){
	width: calc(330/1920*100%);
	top: calc(5750/9600*100%);
	left: calc(440/1920*100%);
}
.top_photograph:nth-child(24){
	width: calc(770/1920*100%);
	top: calc(6075/9600*100%);
	left: calc(575/1920*100%);
}
.top_photograph:nth-child(25){
	width: calc(300/1920*100%);
	top: calc(6440/9600*100%);
	right: calc(300/1920*100%);
}
.top_photograph:nth-child(26){
	width: calc(590/1920*100%);
	top: calc(6808/9600*100%);
	left: calc(164/1920*100%);
}
.top_photograph:nth-child(27){
	width: calc(240/1920*100%);
	top: calc(7095/9600*100%);
	left: calc(840/1920*100%);
}
.top_photograph:nth-child(28){
	width: calc(454/1920*100%);
	top: calc(7370/9600*100%);
	left: calc(438/1920*100%);
}
.top_photograph:nth-child(29){
	width: calc(424/1920*100%);
	top: calc(7520/9600*100%);
	right: calc(376/1920*100%);
}
.top_photograph:nth-child(30){
	width: calc(800/1920*100%);
	top: calc(7885/9600*100%);
	right: 0;
}
.top_photograph:nth-child(31){
	width: calc(900/1920*100%);
	top: calc(8150/9600*100%);
	left: 0;
}
.top_photograph:nth-child(32){
	width: calc(660/1920*100%);
	top: calc(8680/9600*100%);
	right: calc(252/1920*100%);
}
.top_photograph:nth-child(33){
	width: calc(300/1920*100%);
	top: calc(9000/9600*100%);
	left: calc(750/1920*100%);
}

/*shortstory*/
.shortstory h2{
	background-color: #293C53;
}
.work_shortstory {
    position: relative;
	width: 100%;
	z-index: -5;
}
.work_shortstory::before{
	content: "";
	display: block;
	padding-top: 74.38%;
    background-color: #293c53;
}
.top_shortstory{
	position: absolute;
}
.top_shortstory:nth-child(1){
	width: calc(222/1920*100%);
	top: 0;
	right: calc(360/1920*100%);
}
.top_shortstory:nth-child(2){
	width: calc(600/1920*100%);
	top: calc(40/1428*100%);
	left: calc(360/1920*100%);
	z-index: 5;
}
.top_shortstory:nth-child(3){
	width: calc(470/1920*100%);
	top: calc(464/1428*100%);
	right: calc(470/1920*100%);
	z-index: 10;
}
.top_shortstory:nth-child(4){
	width: calc(434/1920*100%);
	top: calc(670/1428*100%);
	left: calc(420/1920*100%);
	z-index: 15;
}
.top_shortstory:nth-child(5){
	width: calc(840/1920*100%);
	height: calc(600/1428*100%);
	background-color: #F5EFE2;
	opacity: 0.8;
	top: calc(240/1428*100%);
	left: calc(240/1920*100%);
}
.top_shortstory:nth-child(6){
	top: calc(470/1428*100%);
	left: calc(420/1920*100%);	
}
.letter_shortstory{
	width: calc(510/1920*100%);
	height: calc(168/1428*100%);	
	color: #6A6A6A;
	font-size: 0.8rem;
	/*writing-mode: vertical-rl;   -webkit-*/
}



/**/
.work_website {
    position: relative;
	width: 100%; /*調整！！*/
}
.work_website::before{
	content: "";
	display: block;
	padding-top: 74.48%;
}
.top_website{
	position: absolute;
}
.caption_website{
	padding-top: calc(15/1430*100%);
	font-size: 0.7rem;
	display: flex;
	justify-content: space-between;
}
.top_website:nth-child(1){
	width: calc(800/1920*100%);
	top: 0;
	right: calc(560/1920*100%);
}
.top_website:nth-child(2){
	width: calc(800/1920*100%);
	top: calc(586/1430*100%);
	right: calc(560/1920*100%);
}


/*----- タブレット -----*/
@media only screen and (max-width : 1024px) {
	
	
}

@media only screen and (max-width : 599px) {
	
	
}