@charset "utf-8";
/* レスポンシブ設定
------------------------------------- */
@media screen and (min-width: 769px){
	.sp {
		display: none!important;
	}
	body {
		min-width: 1000px;
		margin: 0 auto;
	}
}

@media screen and (max-width: 768px){
	.pc {
		display: none!important;
	}

	body{
		width: 100%;
		height: 100%;
		color: #000;
		font-size: 4.27vw;
		letter-spacing: 0.08vw;
		font-family: "Yuji Syuku", serif;
		font-style: normal;
		font-weight: 400;
	}

	.hrline{
		margin: 18vw auto;
		width: 100vw;
		height: 9.07vw;
		background: url("../img/hrlineSP.png") no-repeat;
		background-size: 73.6vw 9.07vw;
		background-position: center center;
	}

	/* Header
	------------------------------------- */
	#header{
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		padding: 5.33vw;
		position: relative;
	}

	#header .titleNakajima{
		display: block;
		width: 66.13vw;
		height: 17.87vw;
		background: url("../img/titleNakajima.png") no-repeat;
		background-size: 100%;
		text-indent:100%;
		white-space:nowrap;
		overflow:hidden;
	}

	#header .hamburger{
		display: block;
		width: 8.99vw;
		height: 8.66vw;
		background: url("../img/btnMenuSp.png") no-repeat;
		background-size: 100%;
		transition: opacity 1.0s ease;
		opacity: 1;
	}
	
	#header .hamburger.open{
    	opacity: 0;
	}
	
	#header .boxNavi{
		position: absolute;
		top: 0;
		right: 0;
		background: #fff;
		display: none;
		z-index: 1000;
		width: 57.07vw;
		padding: 20vw 10vw 10vw;
	}

	#header ul.gnavi{
		font-size: 5.2vw;
		display: flex;
		flex-flow: column nowrap;
		letter-spacing: 1.33vw;
		text-align: center;
		width: 37.07vw;
	}

	#header ul.gnavi li{
		margin: 0 0 5.6vw;
	}

	#header ul.gnavi li:not(:last-child)::after{
		content: "";
	}

	#header ul.gnavi::after{
		position: relative;
		content: "";
		top: 4vw;
		left: -3vw;
		width: 43.2vw;
		height: 5.33vw;
		background: url("../img/hrlineSP.png");
		background-size: 100%;
	}
	
	#header ul.lang{
		font-size: 5.2vw;
		display: flex;
		flex-flow: column nowrap;
		letter-spacing: 0.53vw;
		margin: 12vw auto;
		text-align: center;
	}

	#header ul.lang li{
		margin: 2vw auto 2vw;
		padding: 0 1.6vw 0.53vw 2.13vw;
	}

	#header ul.lang li.cur{
		border: 0.27vw solid #000;
	}


	#btnClose{
		position: absolute;
		display: none;
		width: 9.07vw;
		height: 9.07vw;
		background: url("../img/btnClose.svg");
		background-size: 100%;
		top: 5vw;
		right: 5vw;
		z-index: 2000;
		transition: opacity 1.0s ease;
	}
	
	#btnClose.show{
		display: block;
		opacity: 1;
	}
	
	#overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 100;
		transition: opacity 1.0s ease;
	}
	
	#overlay.show{
		display: block;
    	opacity: 1;
	}
	
	/* スライドショー
	------------------------------------- */
	#slide .slider img.arrowL{
		position: absolute;
		width: 7vw;
		height: 7vw;
		z-index: 1;
		top: calc(50% - 3.5vw);
		left: 0;
	}

	#slide .slider img.arrowR{
		position: absolute;
		width: 7vw;
		height: 7vw;
		z-index: 1;
		top: calc(50% - 3.5vw);
		right: 0;
	}

	#slide .slider ul.slideDots{
		position: absolute;
		bottom: -7vw;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-content: center;
		list-style-type: none;
	}

	#slide .slider ul.slideDots li{
		display: inline-block;
		margin: 0 0.8vw;
	}

	#slide .slider ul.slideDots li button{
		position: relative;
		text-indent: -9999px;
		height: 2.0vw;
		width: 2.0vw;
		border-radius: 1.0vw;
		border: none;
		background: #C8C9CA;
	}

	/* ポリシー
	------------------------------------- */
	#policy{
		width: 100vw;
		text-align: center;
		margin: 21.33vw auto 13.33vw;
	}

	#policy h1{
		font-size: 6.4vw;
		letter-spacing: 1.33vw;
		margin: 10vw auto 7vw;
	}

	#policy p{
		font-size: 4.27vw;
		line-height: 2.1;
		letter-spacing: 0.2vw;
		width: 94vw;
		margin: 0 auto;
	}

	/* プロフィール
	------------------------------------- */
	#profile{
		width: 100vw;
		margin: 13.33vw auto 5vw;
		line-height: 2.0;
		font-size: 4.27vw;
		line-height: 1.5;
	}

	#profile .photo{
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-around;
		align-items: center;
		margin: 5.33vw auto 7.33vw;
	}

	#profile .photo img{
		width: 63.2vw;
		height: auto;
	}

	#profile .photo p{
		font-size: 10.67vw;
		letter-spacing: 3.33vw;
		text-align: center;
		line-height: 0.9;
	}

	#profile .photo p span{
		font-size: 5.53vw;
		letter-spacing: 1.67vw;
	}

	#profile dl.history{
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		width: 89.33vw;
		margin: 0 auto;
	}

	#profile dl.history dt{
		width: 100%;
	}

	#profile dl.history dd{
		width: 100%;
		margin-bottom: 5vw;
	}

	#profile p{
		width: 89.33vw;
		margin: 5vw auto 8vw;
	}

	#profile h2{
		font-size: 4.27vw;
	}

	#profile ul.works{
		position: relative;
		width: 83.8vw;
		margin: 5vw auto 8vw;
	}

	#profile ul.works li{
		position: relative;
		left: 0;
		margin-bottom: 3vw;
	}

	#profile ul.works li::before{
		position: absolute;
		content: "■";
		width: 5.53vw;
		height: 5.53vw;
		left: -4.53vw;
	}
	
	/* 書道会
	------------------------------------- */
	#shodoukai{
		width: 100%;
		text-align: center;
	}

	#shodoukai h1{
		font-size: 10.67vw;
		letter-spacing: 1.63vw;
		display: block;
	}

	#shodoukai h1 span{
		font-size: 5.67vw;
		display: block;
		letter-spacing: 0.3vw;
	}

	#shodoukai .timetable{
		width: 93.2vw;
		margin: 8.8vw auto 3.2vw;
		font-size: 3.6vw;
		border: solid 0.53vw #ccc;
		display: grid;
        grid-template-columns: repeat(4, 1fr); /* 行数分の列 */
	}

	#shodoukai .timetable tbody,
	#shodoukai .timetable tr{
		display: contents;
	}
	
	#shodoukai .timetable th,
	#shodoukai .timetable td{
		border: solid 0.27vw #ccc;
		text-align: center;
		width: 23.3vw;
	    display: flex;
    	flex-direction: row;
    	flex-wrap: wrap;
    	justify-content: center;
    	align-items: center;
	}

	#shodoukai .timetable th{
		padding: 2vw 0;
		background: #a0a0a0;
		color: #fff;
	}

	#shodoukai .timetable td{
		padding: 2.67vw 0;
	}

	/* 行と列を入れ替える */
	tr:first-child th:nth-child(2) { grid-row: 2; grid-column: 1; }
	tr:first-child th:nth-child(3) { grid-row: 3; grid-column: 1; }
	tr:first-child th:nth-child(4) { grid-row: 4; grid-column: 1; }
	tr:first-child th:nth-child(5) { grid-row: 5; grid-column: 1; }
	tr:first-child th:nth-child(6) { grid-row: 6; grid-column: 1; }
	tr:first-child th:nth-child(7) { grid-row: 7; grid-column: 1; }
	tr:first-child th:nth-child(8) { grid-row: 8; grid-column: 1; }

	tr:nth-child(2) td:nth-child(1) { grid-row: 1; grid-column: 2; }
	tr:nth-child(3) td:nth-child(1) { grid-row: 1; grid-column: 3; }
	tr:nth-child(4) td:nth-child(1) { grid-row: 1; grid-column: 4; }
	tr:nth-child(5) td:nth-child(1) { grid-row: 1; grid-column: 5; }

	tr:nth-child(2) td:nth-child(2) { grid-row: 2; grid-column: 2; }
	tr:nth-child(2) td:nth-child(3) { grid-row: 3; grid-column: 2; }
	tr:nth-child(2) td:nth-child(4) { grid-row: 4; grid-column: 2; }
	tr:nth-child(2) td:nth-child(5) { grid-row: 5; grid-column: 2; }
	tr:nth-child(2) td:nth-child(6) { grid-row: 6; grid-column: 2; }
	tr:nth-child(2) td:nth-child(7) { grid-row: 7; grid-column: 2; }
	tr:nth-child(2) td:nth-child(8) { grid-row: 8; grid-column: 2; }

	tr:nth-child(3) td:nth-child(2) { grid-row: 2; grid-column: 3; }
	tr:nth-child(3) td:nth-child(3) { grid-row: 3; grid-column: 3; }
	tr:nth-child(3) td:nth-child(4) { grid-row: 4; grid-column: 3; }
	tr:nth-child(3) td:nth-child(5) { grid-row: 5; grid-column: 3; }
	tr:nth-child(3) td:nth-child(6) { grid-row: 6; grid-column: 3; }
	tr:nth-child(3) td:nth-child(7) { grid-row: 7; grid-column: 3; }
	tr:nth-child(3) td:nth-child(8) { grid-row: 8; grid-column: 3; }

	tr:nth-child(4) td:nth-child(2) { grid-row: 2; grid-column: 4; }
	tr:nth-child(4) td:nth-child(3) { grid-row: 3; grid-column: 4; }
	tr:nth-child(4) td:nth-child(4) { grid-row: 4; grid-column: 4; }
	tr:nth-child(4) td:nth-child(5) { grid-row: 5; grid-column: 4; }
	tr:nth-child(4) td:nth-child(6) { grid-row: 6; grid-column: 4; }
	tr:nth-child(4) td:nth-child(7) { grid-row: 7; grid-column: 4; }
	tr:nth-child(4) td:nth-child(8) { grid-row: 8; grid-column: 4; }

	#shodoukai ul.additional{
		font-size: 4.0vw;
		list-style: disc;
		margin: 3vw auto 5vw;
	}

	#shodoukai .roomphoto{
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
		margin-bottom: 5vw;
	}

	#shodoukai .roomphoto img{
		width: 30vw;
		height: auto;
		margin: 0.8vw;
	}

	#shodoukai p.contact{
		font-size: 4.27vw;
	}

	#shodoukai .googlemap{
		width: 94vw;
		margin: 6vw auto;
		font-size: 4.27vw;
	}

	#shodoukai .googlemap iframe{
		width: 94vw;
		height: 70.5vw;
	}

	#shodoukai .googlemap a{
		display: block;
	}

	#shodoukai .officeNewYork{
		font-size: 4.27vw;
		text-align: center;
	}
	
	/* Gallery
	------------------------------------- */
	h1.titleGallery{
		width: 70.93vw;
		height: 31.73vw;
		background: url("../img/titleGalleryENG.png") no-repeat;
		background-size: 100%;
		text-indent:100%;
		white-space:nowrap;
		overflow:hidden;
		margin: 8vw auto;
	}

	h2.titleGallerySub{
		text-align: center;
		margin: 12vw auto 4vw;
		font-size: 5.87vw;
	}

	ul.exhibition{
		width: 90vw;
		display: flex;
		flex-flow: column-reverse wrap;
		justify-content: space-around;
		align-items: flex-start;
		margin: 10vw auto 0vw;
	}

	ul.exhibition li:nth-child(1){
		order: 2;
		width: 100%;
		margin-bottom: 6vw;
	}
	
	ul.exhibition li:nth-child(2){
		order: 1;
		width: 100%;
		margin-bottom: 3vw;
	}

	ul.exhibition li h3{
		font-size: 5.87vw;
		letter-spacing: 1.33vw;
		margin-bottom: 1vw;
	}

	ul.exhibition li .details{
		font-size: 4.27vw;
		line-height: 1.6;
		text-align: left;
	}

	ul.exhibition li .details h4{
		font-size: 5.39vw;
		margin-bottom: 3.39vw;
	}

	ul.exhibition li p{
		width: 100%;
		text-align: center;
		font-size: 5.87vw;
	}

	ul.artwork{
		width: 96vw;
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-items: flex-start;
		margin: 0 auto 6.4vw;
	}

	ul.artwork li{
		width: 30vw;
		margin: 1vw;
	}

	ul.artwork li img{
		width: 30vw;
		height: 30vw;
		object-fit: cover;
	}

	.boxModal{
		display: none;
	}

	.modaal-content-container img{
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.btnBack{
		text-align: center;
		margin: 10vw auto;
		font-size: 6vw;
	}
	
	/* Footer
	------------------------------------- */
	#footer{
		width: 100vw;
		padding-bottom: 9.07vw;
	}

	#footer p{
		font-size: 5vw;
		text-align: center;
		margin: 0 auto;
	}

	#footer ul{
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
	}

	#footer ul li{
		margin: 10.67vw 2.67vw;
	}

	#footer ul li img{
		width: 14vw;
		height: 14vw;
	}

}