﻿@import url('/fuzoku.common.css?id=11111');
/* CSS Document */
@media screen and (max-width: 900px)  {
	header {
		top: 0px;
	}
	header h1 {
		font-size: large;
		margin: 5px;
	}
	#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 {
		position: sticky;
		background-color: #ffffff;
		border-bottom: 1px solid #cccccc;
		top: 0px;
		padding: 1px;
		font-size: x-small;
	}
	#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 #cccccc;
		//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: 2px 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 {
		//position: absolute;
		//top: 160px;
	}
	#result .body dl {
		display: block;
		margin: 5px;
	}
	#result .body dl dt {
		color: #999999;
		display: table-cell;
		font-size: x-small;
	}
	#result .body dl dd {
		display: table-cell;
		font-size: xx-small;
		margin-right: 2px;
	}
	#result .body dl dd b {
		font-size: large;
		margin: 2px;
	}
	#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;
		font-size: xx-small;
	}
	#result .size dl dd b {
		font-size: large;
		margin: 2px;
	}
	#result .image {
		//position: absolute;		
		//top: 5px;
	}
	#result .image img {
		object-fit: cover;
		width: 20%;
		height: 72px;		
		//top: 5px;
	}
	#result .shop {
		background-color: #FFFFFF;
		//position: absolute;
		//top: 200px;
		padding: 5px;
	}
	#result .shop h3 {
		font-size: small;
		padding: 0px;
		margin: 0px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}		
	#result .address {
		font-size: small;
		margin: 1px;
		//position: absolute;
	}
	#result .business {
		font-size: small;
		margin: 1px;
		//position: absolute;
	}
	#result dl.category dt,
	#result dl.course dt,
	#result dl.business dt,
	#result dl.address dt {
		display: none;
		font-size: small;
		//color: #FF99FF;
		margin-bottom: 1px;
	}
	#result dl.category dd,
	#result dl.course dd,
	#result dl.business dd,
	#result dl.address dd {
		margin: 0px;
		//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 {
		position: sticky;
		bottom: 0px;
		height: 32px;
		//width:100%;
		background-color: #ffffff;
		border-top: 1px solid #cccccc;
		margin: 0px;
		padding: 0px;
		overflow-x: auto;
		align-items: center;
		
	}
	#paging ul {
		box-sizing: border-box;
		margin: 0px;
		padding: 0px;
		display: flex;
		gap: 0px;
		list-style: none;
		align-items: center;
		line-height: 1;
		//height: 30px;
	}
	#paging ul li {
		display: block;
		//flex-direction: column;
		//margin: 0px;
		//padding: 0px;
		min-width: 32px;
		height: 32px;
		//height: 32px;
		text-align: center;
		vertical-align: middle;
		font-size: 16px;
	}
	#paging ul li a {
		display: block;
		//border-right: 1px solid #cccccc;
		padding: 8px 0px;
		margin: 0px;
		text-decoration: none;
		//width: 100%;
		//height: 30px;
	}
	#paging ul li a:hover {
		background-color: #fafafa;
	}
	#paging ul li b {
		display: block;
		//width: 16px;
		//height: 30px;
		background-color: #eeeeee;
		//border-right: 1px solid #e0e0e0;
		padding: 8px 0px;
		margin: 0px;
	}
	
	#_search {
		position: fixed;
		//display: block;
		top: 60px;
		right: 30px;
	//	z-index: 10;
	}
	
	#search .cup {

	}
	#search .cup dd {
		display: flex;
		box-sizing: border-box;
		text-align: center;
		width: 100%;
	}
	#search .cup dd label {
		display: block;
		width: 10%;
		text-align: center;
		justify-content: center;
	}
	#search .cup dd label input {
		justify-content: center;
		display: block;
		text-align: center;
	}
	#search .hip {
		margin-bottom: 36px;
	}
	#search .button {
		box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
	}
	#search .submit {
		
	}
	#latest {
		clear: both;
		display: block;
		float: none;
		width: 100%;
	}
	#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: 900px)  {
	#mains {
		//position: absolute;
		top: 36px;
		//left: 240px;
		//right: 210px;
		padding-bottom: 100px;
	}
	#main a {
		//color: #0066CC;
	}

	#main h1 {
		font-size: large;
		padding: 0px;
		//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: " < ";
	}
	
	#number {
		margin: 5px;
	}
	#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 #cccccc;
		//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: small;
		//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: " < ";
	}
	#search form .cup {
		//padding: 0px 10px 0px 10px;
		//display: block;
	}
	#search form .cup label {
		display: inline-block;
		width: 20%;
	}

	#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: 2em;
	}
	#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 {
	}

	#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 */

