﻿@import url("/fuzoku.common.css?id=22s58");
html {
	//background-color: #666666;
	//color: #ffffff;
}
@media screen and (max-width: 600px)  {
	#main > header {
		border-bottom: 1px solid #cccccc;
		background-color: #ffffff;
		padding: 5px;
		box-sizing: border-box;
		//margin-left: -5px;
		margin-left: auto;
		margin-right: auto;
		z-index: 10;
		position: fixed;
		//display: block;
		//justify-content: space-between;
		top: 72px;
		left: 0;
		right: 0;
		min-width: 300px;
		max-width: 600px;
		width: 100%;
	}

	#main > header > h1 {
		margin: 0px;
		font-size: x-large;
	}
	#main > header > h1 span {
		font-size: small;
	}
	#main > header > h1 span:before {
		content: "\00AB";
		font-size: small;
		font-weight: normal;
		margin: 0px 2px;
	}
	#main {
		bottom: 36px;
		padding-bottom: 36px;
	}
	#main h1 {
		//font-size: small;
	}

	#shop {
		position: sticky;
		top: 0px;
		left: 0px;
		right: 0px;
		//bottom: 36px;
		overflow: hidden;
		transition: max-height 0.3s ease;
		height: 25px;
		border-bottom: 1px solid #cccccc;
		padding: 5px;
		background: #ffffff;
		z-index: 3;
		box-shadow: 0px 0px 5px 0px #cccccc;
	}
	#shop.expand {
		height: auto; /* 必要に応じて調整 */
	}
	#shop h1 {
		font-size: 18px;
		margin: 0px 25px 0px 0px;
		bottom: 0px;
		//left: 0px;
		font-size: medium;
		//width: 320px;
		//margin: 5px;
		padding: 0px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	#shop.expand h1 {
		overflow: visible;
		text-overflow: unset;
		white-space: normal;
	}
	#_shop {
		position: absolute;
		top: 5px;
		right: 5px;
		padding: 5px;
	}
	#shop dl {
		
	}
	#shop dl dt {
		margin: 0px;
	}
	#shop dl dd {
		margin: 0px;
	}

	#result {
		position: sticky;
		top: 36px;
		left: 0px;
		right: 0px;
		//bottom: 36px;
		overflow: hidden;
		transition: max-height 0.3s ease;
		height: 26px;
		border-bottom: 1px solid #cccccc;
		box-shadow: 0px 0px 5px 0px #cccccc;
		padding: 5px;
		background: #ffffff;
		z-index: 2;
	}
	#result.expand {
		height: auto; /* 必要に応じて調整 */
	}
	#result h1 {
		font-size: 18px;
		margin: 0px 25px 10px 0px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		align-items: flex-end;
	}
	#result.expand h1 {
		overflow: visible;
		text-overflow: unset;
		white-space: normal;
	}
	#_result {
		position: absolute;
		top: 5px;
		right: 5px;
		padding: 5px;
	}
	#result th {
		background-color: #fafafa;
		font-size: xx-small;
	}
	#result td {
		background-color: #ffffff;
		box-sizing: border-box;
	}
	#result .img {
		//text-align: left;
		position: sticky;
		//top: 0px;
		left: 0px;
	//	background: #fafafa;
		//z-index: 2;
		//box-shadow: 1px 0px 4px 0px rgba(200, 200, 200, 0.5);
	}
	#result .img img {
		display: block;
		//text-align: left;
		width: 36px;
		height: 36px;
		object-fit: cover;
		box-sizing: border-box;
	}
	#result .name {
		//text-align: left;
		position: sticky;
		//top: 0px;
		left: 39px;
		//background: #ffffff;
		//z-index: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	#result td.name {
		box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
	}
	#result td.age,
	#result td.height,
	#result td.weight,
	#result td.bust,
	#result td.waist,
	#result td.hip {
		text-align: right;
		//padding-right: 5px;
		//text-overflow: ellipsis;
		//white-space: nowrap;
	}
	#result .cup {
		text-align: center;
		//text-overflow: ellipsis;
		//white-space: nowrap;
	}
	#result td.age:not(:empty)::after {
		content: "歳";
		font-size: xx-small;
	}
	#result td.height:not(:empty)::after,
	#result td.weight:not(:empty)::after,
	#result td.bust:not(:empty)::after,
	#result td.waist:not(:empty)::after,
	#result td.hip:not(:empty)::after	{
		content: "cm";
		font-size: xx-small;
	}
	#result .age:empty::before,
	#result .weight:empty::before {
		content: "--";
		color: #000000;
		font-style: italic;
		display: block;
		text-align: center;
	}	

	#cast {
		position: sticky;
		top: 72px;
		overflow: hidden;
		transition: max-height 0.3s ease;
		height: 25px;
		border-bottom: 1px solid #cccccc;
		box-shadow: 0px 0px 5px 0px #cccccc;
		padding: 5px;
		background: #ffffff;
		z-index: 1;
	}
	#cast.expand {
		height: auto; /* 必要に応じて調整 */
	}
	#cast h1 {
		font-size: 16px;
		margin: 5px 25px 0px 0px;
		top: 0px;
		left: 0px;
		font-size: medium;
		//width: 320px;
		//margin: 5px;
		padding: 0px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	#cast.expand h1 {
		overflow: visible;
		text-overflow: unset;
		white-space: normal;
	}
	#_cast {
		position: absolute;
		top: 5px;
		right: 5px;
	}
	#cast .inline {
		display: flex;
	}
	#cast .inline dl {
		margin: 5px 15px 0px 0px;
	}
	#cast .inline dt {
		font-size: small;
		margin: 0px;
	}
	#cast .inline dd {
		margin: 0px;
		text-align: center;
		vertical-align: bottom;
		align-items: flex-end;
		justify-content: center;
		height: 20px;
		display: flex;
	}
	#cast .age dd:not(:empty)::after {
		content: "歳";
		font-size: small;
	}
	#cast .height dd:not(:empty)::after,
	#cast .bust dd:not(:empty)::after,
	#cast .waist dd:not(:empty)::after,
	#cast .hip dd:not(:empty)::after
	{
		content: "cm";
		font-size: small;
	}
	#cast .weight dd:not(:empty)::after	{
		content: "kg";
		font-size: small;
	}
	#cast .inline dd:empty::after {
		content: "--";
	}
	#cast .birth dd:empty::after {
		content: "----";
	}
	#cast .inline dd b {
		font-size: medium;
	}
	#keep {
		width: 32px;
		height: 32px;
		position: fixed;
		top: 2px;
		right: 72px;
		z-index: 10;
	}
	#photo {
		//margin: 10px 5px;
		//border: thin solid #cccccc;
		//border-radius: 5px;
	}
	#photo h1 {
		margin: 0px;
		font-size: large;
		padding: 4px;
	}
	#photo h1 span {
		font-size: small;
	}
	#photo h1 span:before {
		content: "\00AB";
		font-size: small;
		font-weight: normal;
		margin: 0px 2px;
	}
	#photo #set {
		display: table;
		margin-left: auto;
		margin-right: auto;
		height: 216px;
	}
	#photo ol {
		margin: 5px;
		padding: 0px;
		display: flex;
		//flex-wrap: wrap;
		list-style-type: none;
		overflow-x: auto;
		//width: 100%;
	}
	#photo ol li {
		margin: 0px;
		padding: 0px;
		//width: 20%;
		//height: 72px;
	}

	#photo ol li a {
		display: block;
		border: 2px solid #ffffff;
		//box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.0);
	}
	#photo ol li a:active,
	#photo ol li a:hover	{
		display: block;
		border: 2px solid #0066cc;
		//box-shadow: 0px 0px 5px 0px #aaaaaa;
		//z-index: 1;
	}
	#photo ol li img {
		display: block;
		width: 72px;
		height: 72px;
		object-fit: contain;
		object-fit: cover;
	}

	#option {
		padding: 5px;
		//margin: 10px 5px;
		border-top: 1px solid #cccccc;
		//border-radius: 5px;
	}
	#option h1 {
		margin: 5px 0px;
		font-size: large;
	//	padding: 4px;
	}

	#option th {
		font-size: xx-small;
		white-space: nowrap;
		//margin: 10px 5px;
		//border: thin solid #cccccc;
		//border-radius: 5px;
	}

	#schedule {
		padding: 5px;
		//margin: 10px 5px;
		border-top: 1px solid #cccccc;
		//border-radius: 5px;
	}
	#schedule h1 {
		margin: 0px;
		font-size: large;
		padding: 4px;
	}
}
@media screen and (min-width: 600px) and (max-width: 900px) {
	#main > header {
		border-bottom: 1px solid #cccccc;
		background-color: #ffffff;
		padding: 5px;
		box-sizing: border-box;
		//margin-left: -5px;
		//margin-left: auto;
		//margin-right: auto;
		z-index: 3;
		position: fixed;
		//display: block;
		//justify-content: space-between;
		top: 37px;
		//left: 0;
		//right: 0;
		min-width: 300px;
		max-width: 500px;
		width: 100%;
	}
	#main > header > h1 {
		margin: 0px;
		font-size: x-large;
	}
	#main > header > h1 span {
		font-size: small;
	}
	#main > header > h1 span:before {
		content: "\00AB";
		font-size: small;
		font-weight: normal;
		margin: 0px 2px;
	}
	#main {
		//padding-top: 80px;
	}
	#keep {
		width: 32px;
		height: 32px;
		position: fixed;
		top: 2px;
		right: 72px;
		z-index: 10;
	}
	#photo {
		//margin: 10px 5px;
		//border: thin solid #cccccc;
		//border-radius: 5px;
	}
	#photo h1 {
		margin: 0px;
		font-size: large;
		padding: 4px;
	}
	#photo h1 span {
		font-size: small;
	}
	#photo h1 span:before {
		content: "\00AB";
		font-size: small;
		font-weight: normal;
		margin: 0px 2px;
	}
	#photo img {
		display: table;
		margin-left: auto;
		margin-right: auto;
	}
	#photo ol {
		margin: 5px;
		padding: 0px;
		display: flex;
		flex-wrap: wrap;
		list-style-type: none;
	}
	#photo ol li {
		margin: 0px;
		padding: 0px;
		width: 20%;
		//border: 2px solid #CCCCCC;
	}

	#photo ol li a {
		//display: block;
	}
	#photo ol li a:active,
	#photo ol li a:hover	{
		display: block;
		border: 2px solid #ffd700;
		z-index: 10;
	}
	#photo ol li img {
		width: 100%;
		height: 100%;
	}
}

@media screen and (min-width: 900px) {
	#main > header {
		position: sticky;
		top: 0px;
		z-index: 30;
		border-bottom: 1px solid #ccc;
		background-color: #fff;
		padding: 4px;
		
	}

	#main > header > h1 {
		font-size: x-large;
		margin: 5px;
	}
	#main h1 {
		font-size: large;
		margin: 5px;
	}
	#main h1 span {
		font-size: small;
	}

	#main h1 span:before {
		content: "\00AB";
		font-size: small;
		font-weight: normal;
		margin: 0px 2px;
	}
	#main > dl {
		position: sticky;
		margin: 5px;
	}
	#main > dl > dt {
		font-size: small;
	}
	#main > dl > dd {
		margin-left: 1em;
	}
	#main .inline {
		display: flex;
	}
	#main .inline dl {
		margin: 5px;
	}
	#main .inline dt {
		font-size: small;
	}
	#main .inline dd {
		font-size: small;
		margin-left: 0;
		text-align: right;
	}
	#main .inline dd b {
		font-size: medium;
	}
	#keep {
		position: absolute;
		top: 0px;
		left: 50%;
		transform: translateX(200px);
		z-index: 20;
		width: 32px;
		height: 32px;
		//font-size: large;
		//color: yellow;
		//background-color: #ffffcc;
	}

	#search form dl {
		margin: 5px;
	}
	#filter {
		display: none;
		border: 1px solid #cccccc;
		padding: 4px;
		margin-top: 5px;
		margin-bottom: 5px;
	}
	#filter dl {
		display: flex;
		margin-top: 1px;
		margin-bottom: 1px;
	}
	#filter dl dt {
		display: table-cell;
		min-width: 60px;
	}
	#filter dl dt:after {
		content: ":";
	}
	#filter dl dd {
		display: table-cell;
		margin: 0px;
	}
	#profile {
		margin: 5px;
	}
	#profile h1 {
		font-size: x-large;
	}
	#profile dl {
		margin: 0px;
		
	}
	#profile dl dt {
		//color: #CCCCCC;
		margin: 0px;
		display: inline-block;
		//width: 5em;
		font-size: small;
	}
	#profile dl dt:after {
		content: ":";
	}
	#profile dl dd {
		display: inline-block;
		margin: 0px;
		font-size: xx-small;
	}
	#profile dl dd b {
		font-size: large;
	}
		
		
	#photo {
		//margin: 10px 5px;
		//border: thin solid #cccccc;
		//border-radius: 5px;
	}
	#photo h1 {
		padding: 4px;
	}
	#photo img {
		display: table;
		margin-left: auto;
		margin-right: auto;
	}
	#photo ol {
		margin: 5px;
		padding: 0px;
		display: flex;
		flex-wrap: wrap;
		list-style-type: none;
	}
	#photo ol li {
		margin: 0px;
		padding: 0px;
		width: 20%;
		//border: 2px solid #CCCCCC;
	}

	#photo ol li a {
		//display: block;
	}
	#photo ol li a:active,
	#photo ol li a:hover	{
		display: block;
		border: 2px solid #ffd700;
		z-index: 10;
	}
	#photo ol li img {
		width: 100%;
		height: 100%;
	}

	#shift {
		//margin: 10px 5px;
		padding: 5px;
		//border: thin solid #cccccc;
		//border-radius: 5px;
	}
	#shift h1 {
		position: sticky;
		top: 40px;
		z-index: 30;
	}

	#shift .today {
		background-color: #ffffcc;
	}
		
	#cast {
		//margin: 10px 5px;
		border-top: thin solid #cccccc;
		//border-radius: 5px;
		padding: 5px;
	}
	#cast h1 {
		font-size: large;
		margin: -5px -5px 5px -5px;
		padding: 5px;
		background-color: #fafafa;
	}
	#cast b {
		text-align: right;
		margin-left: auto;
	}
	#cast b:after {
		font-size: xx-small;
		font-weight: normal;
	}
	#cast thead {
		font-size: small;
	}
	#cast thead .name {
		position: sticky;
		top: 0px;
		left: 0px;
		background: #fafafa;
		z-index: 12;
		text-align: center;
	}
	#cast tbody .name {
		position: sticky;
		left: 0px;
		background: #ffffff;
		text-align: left;
	}
	#cast td {
		text-align: right;
	}
	#cast .name {
	}
	#cast .cup {
		text-align: center;
	}
	#cast .age b:after {
		content: "歳";
	}
	#cast .weight b:after {
		content: "kg";
	}
	#cast .height b:after,
	#cast .bust b:after,
	#cast .waist b:after,
	#cast .hip b:after	{
		content: "cm";
	}

	#shops {
		font-size: small;
		position: fixed;
		top: 36px;
		left: 50%;
		transform: translateX(250px);
		margin: 0px;
		background-color: #fff;
		border-top: 1px solid #ccc;
		//border-radius: 5px;
		z-index: 30;
	}
	#shop h1 {
		//font-size: small;
		margin: 0px;
		padding: 5px;
	}
	#shop dl {
		margin: 0px 0px 5px 0px;
		//border: thin solid #cccccc;
		//border-radius: 5px;
		font-size: x-small;
	}
	#shop dl dt {
		display: none;
		font-size: small;
	}
	#shop dl dd {
		margin: 0px 0px 0px 1em;
	}
}
