@import url('/fuzoku.common.css');
/* CSS Document */
@media screen and (max-width: 959px)  {
	#navi form {
		margin: 5px;
	}
	#navi form .submit {
		display: block;
		width: auto;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}
	#form .cups {
		width: 20%;
		display: inline-block;
	}
	#number {
		margin: 5px;
	}
	#number b {
		font-size: large;
	}
	#result {
	}
	#result ol {
		margin: 0px;
		padding: 0px;
	}
	#result ol li {
		margin: 5px;
		padding: 0px;
		display: block;
		list-style-type: none;
		border: 1px solid #999999;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		position: relative;
		//height: 300px;
	}
	#result ol li h2 {
		font-size: large;
		padding: 5px;
		//position: absolute;
		top: 0px;
		width: auto;
		z-index: 5;
		margin: 0px;
		smargin-left: -5px;
		smargin-right: -5px;
		smargin-bottom: 5px;
		background: linear-gradient(#FFFFFF, #FAFAFA);
		border-top-width: 2px;
		border-top-style: solid;
		border-top-color: #CC99FF;
	/*
		border-left-width: 1px;
		border-left-style: solid;
		border-left-color: #CCCCCC;
		border-right-width: 1px;
		border-right-style: solid;
		border-right-color: #CCCCCC;
	*/
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #CCCCCC;
	/*
		boader-radius: 5px, 5px, 0px, 0px;
		-moz-border-radius: 5px, 5px, 0px, 0px;
		-webkit-border-radius: 5px, 5px, 0px, 0px;
	*/
	}
	#result .body {
		//position: absolute;
		//top: 160px;
	}
	#result .body dl {
		display: block;
		margin: 5px;
	}
	#result .body dl dt {
		color: #999999;
		display: table-cell;
		font-size: small;
	}
	#result .body dl dd {
		display: table-cell;
	}

	#result .size {
		//position: absolute;
		//top: 180px;
		
	}
	#result .size dl {
		display: inline;
		margin: 5px;
	}
	#result .size dl dt {
		color: #999999;
		display: table-cell;
		font-size: small;
	}
	#result .size dl dd {
		display: table-cell;
	}
	#result .image {
		//position: absolute;		
		//top: 5px;
	}

	#result .shop {
		background-color: #FFFFFF;
		//position: absolute;
		//top: 200px;
	}
	#result .shop h3 {
		font-size: medium;
		padding: 5px;
		//position: absolute;
	}		
	#result .address {
		margin: 5px;
		//position: absolute;
	}
	#result dl.category dt,
	#result dl.course dt,
	#result dl.address dt {
		font-size: small;
		color: #FF99FF;
		margin-bottom: 1px;
	}
	#result dl.category dd,
	#result dl.course dd,
	#result dl.address dd {
		margin: 5px;
		//display: table-cell;
	}
	#result dl.category dd:after,
	#result dl.course dd:after {
		content: ",";
		margin-right: 5px;
	}
	#result dl.course dd:last-child:after {
		content: "";
	}

	#paging {
		
	}
	#paging ul {
		
	}
	#paging ul li {
		border: 1px solid #ccc;
		display: inline-block;
		padding: 2px 4px 2px 4px;
		margin: 0px 2px 0px 2px;
		
	}
	#_search {
		position: fixed;
		//display: block;
		top: 60px;
		right: 30px;
	//	z-index: 10;
	}
	#latest {
		//min-width: 320px;
		//max-width: 639px;
		//width: 100%;
		display: block;
		//border: 1px solid #cccccc;
	}
	#latest ol {
		//min-width: 320px;
		//max-width: 639px;
		display: grid;
		//grid-template-columns: 140px 140px 140px 140px;
		grid-template-columns: repeat(auto-fill, minmax(25%, 25%));
		gap: auto;
		margin: 5px;
		padding: 5px;
	}
	#latest ol li {
		display: flex;
		position: relative;
		/width: 20%;
		height: 190px;
		z-index: 0;
		word-wrap:;
		word-break: break-all;
	}
	#latest img {
		position: absolute;
		top: 0;
		left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
	z-index: 1;
	}
	#latest .name {
		font-size: clamp(12px, 2.0vw, 24px);
		position: absolute;
		bottom: 3em;
		z-index: 1;
	}
	#latest .size {
		position: absolute;
		font-size: clamp(9px, 1.2vw, 18px);
		bottom: 2em;
		z-index: 1;
	}
	#latest .shop {
		font-size: clamp(6px, 1.0vw, 12px);
		position: absolute;
		bottom: 1em;
		z-index: 1;
	}
	#room h2 {
		background-color: #9900FF;
		padding: 5px;
		color: #FFFFFF;
	}
	#room ul {
		margin: 0px;
		padding: 0px;
	}
	#room ul li {
		margin: 0px;
		padding: 0px;
		list-style-type: none;
	}
	#room ul li img {
		width: 100%;
	}
	#photo h2 {
		background-color: #9900FF;
		padding: 5px;
		color: #FFFFFF;
	}
	#photo ul {
		margin: 0px;
		padding: 0px;
	}
	#photo ul li {
		margin: 0px;
		padding: 0px;
		list-style-type: none;
	}
	#photo ul li img {
		width: 100%;
	}
}

@media screen and (min-width: 960px)  {
	#main {
		//position: absolute;
		width: 760px;
		top: 36px;
		//left: 240px;
		//right: 210px;
		padding-bottom: 100px;
	}
	#main a {
		color: #0066CC;
	}

	#main h1 {
		font-size: 120%;
		padding: 5px;
		//position: fixed;
		//top: 0px;
		margin: 5px;
		//width: 100%;
		height: 36px;
		background: linear-gradient(#FFFFFF, #FAFAFA);
		border-top: 2px solid #CC99FF;
		border-left: 1px solid #CCCCCC;
		border-right: 1px solid #CCCCCC;
		border-bottom: 1px solid #CCCCCC;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}
	#main h1 span {
		font-size: 50%;
		font-weight: normal;
		#padding-top: 5px;
		//margin-bottom: 10px;
	}
	#main h1 span:before {
		content: " < ";
	}
	#latest {
		
	}
	#latest ol {
		display: grid;
		/grid-template-columns: 140px 140px 140px 140px;
		grid-template-columns: repeat(auto-fill, minmax(144px, 144px));
		gap: 1px;
		margin: 5px;
		padding: 5px;
	}
	#latest ol li {
		display: flex;
		position: relative;
		/width: 20%;
		height: 190px;
		z-index: 0;
	}
	#latest img {
		position: absolute;
		top: 0;
		left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
	z-index: 1;
	}
	#latest .name {
		position: absolute;
		bottom: 28px;
		z-index: 1;
	}
	#latest .size {
		position: absolute;
		bottom: 14px;
		z-index: 1;
	}
	#latest .shop {
		font-size: x-small;
		position: absolute;
		bottom: 0px;
		z-index: 1;
	}
	#search_form {
		display: block;
		position: absolute;
		width: 200px;
		//min-height: 270px;
		//height: 100%;
		top: 40px;
		left: 50%;
		bottom: 72px;
		//bottom: 36px;
		margin-left: 280px; /* mainの右端にぴったり */
		//padding: 5px;
		//background-color: #f5f5f5;
		z-index: 1;
		overflow-y: auto;
	}
	#search_form form {
		border-top: 1px solid #cccccc;
		border-right: 1px solid #cccccc;
		border-left: 1px solid #cccccc;
	}
	#search_form dl {
		margin: 0px 5px 5px 5px;
	}
	#search_form dl dt {
		margin: 0px;
	}
	#search_form dl dd {
		margin: 0px;
	}
	#search_form input[type=number] {
		width: 3em;
	}
	#search_form .button {
		display: block;
		//width: 200px;
		position: sticky;
		bottom: 0px;
		//margin-bottom: -1px;
		padding: 4px;
		background-color: #fafafa;
		border-top: 1px solid #cccccc;
		border-bottom: 1px solid #cccccc;
		z-index: 2;
		text-align: center;
	}
	#navi {
	}
	#result {
	}
	#result ol {
		margin: 5px;
		padding: 0px;
	}
	#result ol li {
		display: block;
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
		margin-bottom: 10px;
		padding: 0px;
		border: 1px solid #CC99FF;
		list-style-type: none;
		border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
	}
	#result ol li h2 {
		font-size: large;
		padding: 4px;
		margin-top: 0px;
		//margin-left: -5px;
		//margin-right: -5px;
		//margin-bottom: 5px;
		background: linear-gradient(#FFFFFF, #FAFAFA);
		border-top: 1px solid #CC99FF;
	/*
		border-left-width: 1px;
		border-left-style: solid;
		border-left-color: #CCCCCC;
		border-right-width: 1px;
		border-right-style: solid;
		border-right-color: #CCCCCC;
	*/
		border-bottom: 1px solid #CCCCCC;
	/*
		boader-radius: 5px, 5px, 0px, 0px;
		-moz-border-radius: 5px, 5px, 0px, 0px;
		-webkit-border-radius: 5px, 5px, 0px, 0px;
	*/
	}
	#result .body {
		display: flex;
		//top: 160px;
	}
	#result .body dl {
		//display: block;
		margin: 5px;
	}
	#result .body dl dt {
		color: #999999;
		display: table-cell;
		font-size: small;
	}
	#result .body dl dd {
		display: table-cell;
		font-size: small;
	}
	#result .body b {
		font-size: medium;
	}
	#result .size {
		display: flex;
	}
	#result .size b {
		font-size: medium;
	}
	#result .size dl {
		display: inline;
		margin: 5px;
	}
	#result .size dl dt {
		color: #999999;
		display: table-cell;
		font-size: small;
	}
	#result .size dl dd {
		display: table-cell;
	}

	#result .image {
		top: 5px;
	}

	#result .shop {
		background-color: #FFFFFF;
		border-top: 1px solid #cccccc;
	}
	#result .shop h3 {
		font-size: medium;
		background-color: #fafafa;
		padding: 4px;
		margin: 0px;
	}
	#result .address {
		margin: 2px;
	}
	#result .address dt {
		color: #CC99FF;
		font-size: x-small;
		margin: 0px;
	}
	#result .address dd {
		font-size: small;
		margin: 0px;
	}
	#result .business {
		margin: 2px;
	}
	#result .business dt {
		color: #CC99FF;
		font-size: x-small;
		margin: 0px;
	}
	#result .business dd {
		font-size: small;
		margin: 0px;
	}
	#result h2 span {
		font-size: 50%;
		font-weight: normal;
		#padding-top: 5px;
		margin-bottom: 10px;
	}
	#result h2 span:before {
		content: " < ";
	}

	#main h3 span {
		font-size: 50%;
		font-weight: normal;
		#padding-top: 5px;
		margin-bottom: 10px;
	}
	#main h3 span:before {
		content: " < ";
	}

	#navi form .height input[type=number] {
		width: 3em;
	}
	#navi form .height b {
		font-weight: normal;
		margin: 2px;
	}
	#navi form .height i {
		margin: 2px;
	}
	#navi form .weight {
		width: 3em;
	}
	#navi form .bust {
		width: 3em;
	}
	#navi form .age b {
		font-weight: normal;
		margin: 2px;
	}
	#navi form .age i {
		margin: 2px;
	}
	#navi form .cups {
		width: 20%;
		display: inline-block;
	}
	#navi form .waist {
		width: 3em;
	}
	#navi form .hip {
		width: 3em;
	}
	#navi form .submit {
		display: block;
		width: 100px;
		margin-left: auto;
		margin-right: auto;
	}
	#option dl dt {
		color: #CC99FF;
	}
	#option dl dd {
		margin-left: 0px;
	}
	#option .charge dd {
		margin: 5px;
		display: table-cell;
	}
	#option .charge dd:after {
		content: "円～";
		margin-right: 5px;
	}
	#option .charge dd:last-child:after {
		content: "円";
	}


	#result dl.category dt,
	#result dl.course dt {
		color: #CC99FF;
		font-size: small;
		margin-bottom: 1px;
	}
	#result dl.category dd,
	#result dl.course dd,
	#result dl.address dd {
		margin: 5px;
		display: table-cell;
	}
	#result dl.category dd:after,
	#result dl.course dd:after {
		content: ",";
		margin-right: 5px;
	}
	#result dl.course dd:last-child:after {
		content: "";
	}
	#foot {
		position: fixed;
		bottom: 0px;
		background-color: #FFFFFF;
		display: block;
		width: 100%;
		height: 36px;
		border-top-width: thin;
		border-top-style: solid;
		border-top-color: #CCCCCC;
	}
}

/* For Desktop */

/* For Desktop */

/* For Smartphone */