body  {
	/*width: 375px;*/  /* width: 375px; */ /* smart */ /* width: 768px;  tablet */
	width: 768px;  /* width: 375px; */ /* smart */ /* width: 768px;  tablet */
	font-size: 16px; line-height:170%;
	color: #231F20;
	padding: 0 10px 0 6px;
	margin: 0 auto 0 auto;
}
@media screen and (max-width: 480px) { 	/* 480px以下に適用されるCSS（スマホ用） */
	body { max-width: 375px; }
}
h1 {
	font:200% 'Times New Roman'; font-weight: bold;
	margin: 3rem 0 3rem 0;
	text-align: center;
}
h2 {	
	font:180% 'Times New Roman'; font-weight: bold;
	border-bottom: 2px solid rgb(229, 0, 127); 
	margin: 3rem 0 1rem 0; 
	border-image: linear-gradient(to right, rgb(229, 0, 127) 10%, white 80%) 1;
}
h3 {	
	font-size:16.5pt; font-weight: bold; color: rgb(229, 0, 127);
	border-left: 4px solid rgb(229, 0, 127);
	border-image: linear-gradient(to right, rgb(229, 0, 127) 10%, white 50%) 1;
	margin: 3em 0 1em 0; padding: 0.4em 0 0.4em 1em;
}
h4 {	
	margin: 1rem 0  0.5rem 0;
	padding: 0.3rem 0 0.1rem 0.5rem;
	font-size: 105%;
	border-bottom: 1px solid rgb(229, 0, 127);
	border-left: 10px solid rgb(229, 0, 127);
	background: linear-gradient(#F0F0F0 0%, #E0E0E0 100%);
}
a {
	text-decoration: underline;
	color: rgb(229, 0, 127);
}
a:hover {
	color: #0000FF;  
}
/********************************/
/*                              */
/* header                       */
/*                              */
/********************************/
header { 
	position: relative;
	width:100%; height: 340px;
}
header div.headvisual { 
	position: absolute; top:0; right: 0;
	width: 270px; height: 100%;
}
header div.headvisual img { 
	width: 100%; height:auto;
}
header div.caption {
	position: absolute; bottom: 175px;; left: 15px;
}
header div.caption p {
	font-size: 125%; font-family: "Times New Roman";
	font-weight: bold;
}
header hr {
	height:2px; border:none; background-color:rgb(229, 0, 127);
	position: absolute;  bottom: 40px; left: 0;
	width:100%; 
}
header div.logo { 
	position: absolute; bottom: 40px;  left: 80px;
	width: 280px;
}
header div.logo img { 
	width: 100%; height: auto;
}
header div.icon { 
	position: absolute;  bottom:10px; left: 15px;
	width: 60px;
}
header div.icon img { 
	width: 100%; height: auto;
}
header div.fb { 
	position: absolute;  bottom:10px; left: 85px;
	width: 25px;
}
header div.fb img { 
	width: 100%; height: auto;
}
header div.ig { 
	position: absolute;  bottom:10px; left: 120px;
	width: 25px;
}
header div.ig img { 
	width: 100%; height: auto;
}
header div.tw { 
	position: absolute;  bottom:10px; left: 155px;
	width: 25px;
}
header div.tw img { 
	width: 100%; height: auto;
}
/********************************/
/*                              */
/* nav                          */
/*                              */
/********************************/
nav {
	display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;
	width:100%;
}
nav div {
	width: 185px; height:3rem; 
	margin-top: 3px;
	/*display:flex; justify-content: center;  align-items: strech; */
}
nav div a { 
	display:flex; justify-content: center;  align-items: center; text-align: center; 
	width:100%; height:100%;
	font:110% 'Times New Roman'; color: #231F20; font-weight:bold; text-decoration: none;
}
nav div:nth-of-type(3) a { /*Contemporary Dance and Choreography の文字を調整*/
	font-size:100%; 
}
nav a:hover { 
	background-color: #FDC2FF;
	color: #231F20;
}
nav a.select {
	background-color: #FDC2FF;
}

/********************************/
/*                              */
/* footer                       */
/*                              */
/********************************/
footer {
	background-color: rgb(229, 0, 127); color: white;
	padding: 0.3rem 1rem 0.3rem 1rem; margin-top:4rem
}
footer p.contact {
	font-size: 110%;   
	text-align: center;
}
footer p.body {
	width: 100%; 
	margin: 0.5em auto 0 auto; 
}
footer p.mailto {
	font-size: 125%; 
	margin: 0.5em auto 0 auto; 
	text-align: center;
}
footer p.mailto a {
	color: white;  
}
footer p.mailto a:hover {
	color: #0000FF;  
}
footer p.copy {
	margin: 4rem auto 0 auto; 
	text-align: center;
} 
/********************************/
/*                              */
/*   home                       */
/*                              */
/********************************/
div#home-gyro, div#home-cdc, div#home-abe {
	width:100%;
	& p {margin:0}
}
/********************************/
/*                              */
/* home-slideshow               */
/*                              */
/********************************/
div#slideshow {
    position: relative;
    width: 360px;    height: 360px;
    margin: 3rem auto 0 auto;
}
div#slideshow div {
    position: absolute;
    top:  0;    left: 0;
    z-index: 8;
    opacity: 0.0;
    margin: 0: ;
    height: 100%;    width:100%;
}
div#slideshow div.active {
    z-index: 10;
    opacity: 1.0;
}
div#slideshow div.last-active {
    z-index: 9;
}
div#slideshow p {
    width: 100%;    height: 100%; 
    background-color:white;
    margin:0 auto 0 auto;;
}
div#slideshow img {
   width: 100%;   height: 100%; 
   object-fit: contain;
}
/********************************/
/*                              */
/*   gyro                       */
/*                              */
/********************************/
div#gyro-main {
	width:100%;
	& p {margin:0}
	& p.komidashi {
		font-size:110%; font-weight: bold;
		margin-top: 1rem;
	}
}
div#gyro-information {
	width: 100%;
	margin: 3rem 0 0 0;
	& div {
		display:flex;  justify-content: center; align-items: flex-start;
		&  iframe {
			width: 80%; height: auto; aspect-ratio: 16 / 9;
			border: none;
		}
	}
}
div#gyro-class {
	& h2 img {
		width:30px; height: auto;
		margin-top:0;
	}
}
div#gyro-class-cont {
	display: flex; justify-content:space-start; align-items: flex-start; flex-wrap: wrap;
	background-image: url(../images/gyrophoto2.jpg); background-repeat: no-repeat; background-size: cover; 
	background-color:rgba(255,255,255,0.6); background-blend-mode:lighten;
	& div#class-photo3  {
		margin:0 auto 0 auto;
		& img { 
			width: 200px; height: auto;
		}
	}
}
div#gyro-class-cont dl {
	width: 375px;
	margin-top: 0;
}
}
div#gyro-class-cont dl dt  {
	font-size: 110%;
	margin-top: 1.5rem;
}
div#gyro-class-cont dl dt p a {
	color: rgb(229, 0, 127);
}
div#gyro-ws  {
	margin: 2rem 0 0 0;
	& img {
		width:100%; height:auto;
	}
}
/********************************/
/*                              */
/*   Dance amd Choreo           */
/*                              */
/********************************/
div#dc-danceandchoreo {
	& p { 
		margin:0
	}
}
div#dc-artists {
	& table {
		border-collapse: collapse;
		& td {
			vertical-align:top;
			padding:0;
		}
		& td:first-of-type {
			width:10rem;
			padding-right:0.2rem;
			line-height:150%;
		}
	}
	& p { 
		margin:0;
	}
}
div#oritatsuizen, div#hoshiwoodoru, div#soukonoakari, div#kingyo, div#sora, div#try, div#silent, div#mamama, div#utawowasureta, div#abesduo, div#mizuto, div#akaitsukiyo {
	& p {
		margin:0;
	}
	& p.dr { /* 段落 */
		margin-top:1rem;
	}
	& p.js { /* 字下げ */
		margin-left:1rem;
	}
	& div.container {
		display:flex;  justify-content:space-between; align-items:flex-start; flex-wrap: wrap;
		& div.descr {
			width: 375px;
		}
		& div.images {
			width: 375px;
			display:flex;  justify-content:space-around; align-items:flex-start; flex-wrap: wrap;
			& img {
				width:180px; height:auto;  object-fit: contain;
			}
		}
	}
}
div#akaitsuki-movie {
	display:flex;  justify-content: center; align-items: flex-start;
	&  iframe {
		width: 80%; height: auto; aspect-ratio: 16 / 9;
		border: none;
	}
}
/********************************/
/*                              */
/*   Abe                        */
/*                              */
/********************************/
div#abe-profile {
	& p {
		margin:0;
	}
	& p.dr {
		margin-top:1rem;
	}
}
div#abe-awards, div#abe-works, div#performances, #classes  {
	& p {margin:0; display:inline}
	& dt { margin:0.75rem 0 0 0; }
	& dd { margin:0; }
	& ul { list-style:  none;  margin:0 0 0 4rem; padding:0}
	& li { text-indent:-1rem;}
	& li:before {
		content:  "";     /* 空の要素作成 */
		width:  7px;               /* 幅指定 */
		height:  7px;              /* 高さ指定 */
		display:  inline-block;     /* インラインブロックにする */
		background-color: rgb(229, 0, 127);  /* 背景色指定 */
		border-radius:  50%;        /* 要素を丸くする */
		margin-right:0.5rem;
	}
}
div#sakuhin {
	& p {margin:0;}
}
/********************************/
/*                              */
/* gallery                      */
/*                              */
/********************************/
div#PhotoGallery {
	width: 100%;
}

div#thumbnail-container { 
	display:flex; 	justify-content: center;
}
div#thumbnail { display: grid;
	/*grid-template-columns: 70px 70px 70px 70px 70px 70px 70px 70px 70px 70px ;
	grid-template-rows: 70px 70px 70px 70px;
	column-gap: 5px;
	row-gap: 5px;*/

	grid-template-columns: 35px 35px 35px 35px 35px 35px 35px 35px 35px 35px ;
	grid-template-rows: 35px 35px 35px 35px;
	column-gap: 2px;
	row-gap: 2px;
}
div#thumbnail div { 
	/*width:45px; height:35px; */
	/*width:70px; height:60px; */
	width:35px; height:30px; 
  }
div#thumbnail div img { 
	width:100%; height:100%; object-fit: cover;  display:block; 
	/*width:100%; height: 100%; object-fit:cover; display:block;*/
}
div#selection {
	display: flex;	justify-content: center; align-items: flex-start;
	margin-top:1rem;
}
div#selection div#indicator {
	width:10em;
	text-align: center;
}
div#show {
	margin: 2rem auto 0 auto;

}
div#show div {
	/*width:600px; height:600px; */
	width:360px; height:360px; 
	margin: 0.5rem auto 0 auto;
}
div#show div img {
	width:100%; height:100%; object-fit: contain;
	object-position:top
}
div#show p#showCaption {
	text-align: center;
	color: rgb(229, 0, 127);
	font-size: 120%;
}
div#gallery-movie {
	& div { 
		display:flex;  justify-content: center; align-items: flex-start;
		margin-top:1rem;
		&  iframe {
			width: 80%; height: auto; aspect-ratio: 16 / 9;
			border: none;
		}
	}
}