@charset "utf-8";
@media screen and (max-width: 768px) {
	.background {
		background:none
	}
}
@media screen and (min-width: 767px) and (max-device-width: 768px) {
	body {
		min-height:1200px;
	}
}

/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width: 640px) {
	.pc {
		display:none;
	}
	.sp {
		display:block;
	}
	.display-none {
		display:none;
	}
	img {
		max-width: 100%;
		height: auto;
		width: auto;
	}

	body {
		-webkit-text-size-adjust: 100%;
	}
	.image-responsive {
		width: 100%;
		height: auto;
	}
	#page-top {
		position: fixed;
		bottom: 20px;
		right: 20px;
	}
	.anchor {
		margin-top: -30px;
		padding-top: 30px;
	}

	.breadcrumbs {
		margin: 10px auto 0;
		background: #dbdbdb;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
	}
	.breadcrumbs ul {
		font-size: 13px;
	}
	.breadcrumbs ul li {
		padding: 2vw 1vw 2vw 6vw;
		font-size: 13px;
	}

	.mt50{
		margin-top:30px;
	}

	/*----------------------- form */
	input[type="text"], input[type="email"], input[type="password"], select, textarea, input[type="text"].form-lg {
		width: 93.5%;
	}
	input[type="text"], input[type="email"], input[type="password"], textarea {
		padding: 2px 2%;
	}
	input[type="text"].form-sm, select.form-sm {
		width: 80%;
	}
	input.timepicker {
		margin-top: 5px;
	}
	input[type="text"].w100, input[type="email"].w100, input[type="password"].w100, select.w100 {
		width:95.3% !important;
		padding:2px 2%;
	}

	/*----------------------- button */
	.btn {
		width: inherit;
		padding: 3px 15px;
		margin-top: 5px;
	}
	.btn-search {
		width: 100%;
		margin-top: 5px;
	}
	.btn-sm {
		padding: 3px 5px;
	}
	.btn-lg {
		padding: 6px 20px;
	}
	.w100.btn-lg {
		padding: 6px 0;
	}

	/*----------------------- header */
	header, .wrap, .content {
		width: 100%;
	}
	header .sp {
		padding: 0;
	}
	header .sp .logo {

	}

	header .sp .nav {
		width: 40%;
	}
	header .sp .nav {
		width: 60%;
	}
	header .sp ul {
		display: table;
		width: 100%;
	}
	header .sp ul li {
		display: table-cell;
		width: 20%;
		padding: 0;
		text-align:center;
		font-size: 0.9em;
		white-space: nowrap;
		border-left: 1px solid #fff;
	}
	header .sp ul li a {
		display: block;
		width:100%;
		padding:10px 0;
	}

	header .sp .nav-link {
		display: flex;
		justify-content: flex-end;
		background-color: black;
	}
	header .sp .nav-link a.logo {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 39%;
		margin-right: auto;
	}
	header .sp .nav-link a.logo img {
		width: auto;
		height: auto;
	}

	header .sp .nav-link a.reserve {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		line-height: normal;
		background: #333;
		border-left: 1px #fff solid;
	}
	header .sp .nav-link a.reserve p {
		color: #FFF;
		font-size: 3.5vw;
	}

	header .sp .nav-link a.mypage {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 21%;
		line-height: normal;
		background: #dbdbdb;
		border-left: 1px #fff solid;
	}
	header .sp .nav-link a.mypage p {
		color: #333;
		font-size: 3.5vw;
	}

	header .sp .nav-link a.logout {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		line-height: normal;
		background: #dbdbdb;
		border-left: 1px #fff solid;
	}
	header .sp .nav-link a.logout p {
		color: #333;
		font-size: 3.5vw;
	}

	/*----------------------- footer */
	#footer {
		width: 100%;
		min-width: inherit;
		height: 200px;
	}
	footer .sp {
		padding: 15px;
	}
	footer .sp li{
		margin-bottom: 5px;
	}
	footer .sp p, footer .txt-sm {
		font-size: .7em;
	}

	/*----------------------- content */
	#wrap > .content {
		padding-top: 10%;
	}
	.content-inner {
		width: 100%;
		padding: 0 3%;
		box-sizing: border-box;
	}
	.box-half {
		width: 100%;
		margin-bottom: 20px;
	}
	.box-inner {
		padding: 15px;
	}

	/*----------------------- table */
	/* テーブル横スクロール出す */
	.table-scroll {
		width: 100%;
		overflow-x: auto;
	}
	.nowrap {
		white-space: nowrap;
	}

	.table th, .table td {
		display: block;
		border: none;
	}
	.table td {
		border: none;
	}
	.table span.address {
		display:block;
	}

	.table-appointment td, .table-appointment th {
		font-size: .85em;
		padding: 5px;
	}

	/*
	 *  ログイン画面
	 */
	#login header .sp .nav {
		width: 40%;
	}
	#login h1 {
		margin-left: 3%;
	}

	#login p.msg-submit {
		padding-bottom: 3%;
	}

	#login .box-half:nth-of-type(2) {
		padding: 10% 0 15%;
	}
	#login .box-half input[type="submit"] {
		margin-top: 10%;
	}

	/*
	 *  マイページ画面
	 */
	#mypage h1 {
		margin-left: 3%;
	}

	#mypage .box-half:nth-of-type(1) {
    margin-bottom: 12%;
	}
	#mypage .box-half h2 {
		margin: 0;
		text-indent: 8px;
	}

	/*
	 *  予約の確認画面
	 */
	#member-list h1 {
		margin-left: 3%;
	}

	#member-list .note {
		font-size: .9em;
	}

	/*
	 *  予約状況(予約の履歴)画面
	 */
	#member-history h1 {
		margin-left: 3%;
	}

	#member-history .course-data {
		font-size: .85em;
	}
	#member-history .course-data span {
		display: inline-block;
	}

	/*
	 *  登録情報変更画面
	 */
	#member-edit h1 {
		margin-left: 3%;
	}

	#member-edit table.table th {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
	}
	#member-edit table.table td {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
	}
	#member-edit table.table td input {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
	}

	#member-edit table.table .pref-field select[name="pref"] {
		width: 50%;
	}

	#member-edit table.table .address-field .zip-field input[name="zip"] {
		width: 35%;
	}
	#member-edit table.table .address-field .address-note {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
	}

	#member-edit table.table .sex-field .radio-btn {
		display: -webkit-flex;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	#member-edit table.table .sex-field .radio-btn label:nth-of-type(1) {
		padding: 0 5% 0 0;
	}
	#member-edit table.table .sex-field .radio-btn label:nth-of-type(2) {
		padding: 0 0 0 5%;
	}

	#member-edit table.table .birthday-field .flex {
		display: -webkit-flex;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	#member-edit table.table .note-field textarea {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
	}

	#member-edit .submit-btn input[name="submit"] {
		width: 30%;
	}

	/*
	 *  登録情報変更の完了画面
	 */
	#member-edit-done h1 {
		margin-left: 3%;
	}
	#member-edit-done .content p.tc:nth-of-type(1) {
		margin: 20% 0 50%;
		font-size: 1em;
	}

	/*
	 *  パスワード変更画面
	 */
	#member-passedit h1 {
		margin-left: 3%;
	}
	#member-passedit h2 {
		padding: 0;
		margin: 0 0 2%;
	}
	#member-passedit p.msg {
		padding: 0 3% 0;
		margin: 0;
	}
	#member-passedit p.msg:last-of-type {
		padding-bottom: 3%;
	}

	#member-passedit table.table th {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
	}

	#member-passedit table.table input {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
	}
	#member-passedit input[type="submit"] {
		width: 30%;
		padding: 5px 0;
		color: #fff;
	}

	/*
	 *  退会画面
	 */
	#member-withdraw-conf h1 {
		padding-left: 3%;
	}

	/*
	 *  パスワードをお忘れの方画面
	 */
	#member-password h1 {
		margin-left: 3%;
	}

	#member-password .box-half input[type="submit"] {
		margin: 5% 0 10%;
	}

	/*
	 *  予約状況画面
	 */
	#member-reserve h1 {
		margin-left: 3%;
	}

	#member-reserve table.table-appointment th,
	#member-reserve table.table-appointment td {
		font-size: 1em;
	}
	#member-reserve table.table-appointment .btn {
		margin: 0;
	}

	/*
	 *  予約をする画面
	 */
	#reserve-index h1 {
		margin-left: 3%;
	}
	#reserve-index .box-warning {
		padding: 2.5% 1.5%;
		margin: 0 3%;
	}

	#reserve-index .step1 .content-inner {
		text-align: center;
	}

	#reserve-index .step2 .show-scroll {
		max-height: 83vw;
	}
	#reserve-index .step2 .course-field {
		background-color: #fff;
	}
	#reserve-index .step2 .course-field label {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
	}
	#reserve-index .step2 .course-field label div {
		width: 80%;
	}
	#reserve-index .step2 .course-field a {
		position: absolute;
		top: 50%;
		right: -5%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		padding: 1% 3%;
		margin: 0;
		font-size: .85em;
	}
	#reserve-index .step2 .course-field span {
		margin-left: 3%;
		font-size: .9em;
	}

	#reserve-index .step3 #number_select {
		text-align: center;
	}

	#reserve-index .step4 input[name="reserve_time"] {
		margin-top: 2%;
	}

	#reserve-index input[type="submit"] {
		margin-top: 20%;
	}

	#reserve-index .candidate {

	}
	#reserve-index .candidate h3 {
		width: 100%;
	}
	#reserve-index .candidate table input[type="submit"] {
		width: 40%;
		padding: 3% 0;
		margin: 0;
		font-size: .9em;
	}

	/*
	 *  予約をする確認画面
	 */
	#reserve-confirm h1 {
		padding-left: 3%;
	}
	#reserve-confirm table.table th {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
	}
	#reserve-confirm table.table td {
		padding: 3%;
	}

	/*
	 *  予約をする完了画面
	 */
	#regist-finish h1 {
		padding-left: 3%;
	}

	/*
	 *  会員登録画面
	 */
	#reserve-regist h1 {
		margin-left: 3%;
	}

	#reserve-regist .msg-submit p {
		padding-top: 2%;
		font-size: .9em;
	}

	#reserve-regist table.table th {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
	}
	#reserve-regist table.table td input {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
	}

	#reserve-regist table.table tr.zip-field p.zip-note {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
	}

	#reserve-regist table.table tr.pref-field select[name="pref"] {
		width: 50%;
	}

	#reserve-regist table.table tr.sex-field .radio-btn {
		justify-content: center;
	}

	#reserve-regist table.table tr.birthday-field .flex {
		justify-content: center;
	}


	#reserve-regist .btn-field {
		flex-wrap: nowrap;
	}
	#reserve-regist .btn-field .back-btn {
		padding: 0;
		margin: 0;
	}
	#reserve-regist .btn-field .back-btn input {
		width: inherit;
		padding: 6px 20px;
		margin-right: 1.5vw;
		font-size: 14px;
	}
	#reserve-regist .btn-field .confirm-btn {
		padding: 0;
		margin: 0;
	}
	#reserve-regist .btn-field .confirm-btn input {
		width: inherit;
		padding: 6px 20px;
		margin-left: 1.5vw;
		font-size: 14px;
	}

	/*
	 *  会員登録確認画面(予約内容のご確認、基本情報の登録内容)
	 */
	#reserve-regist-confirm h1 {
		margin-left: 3%;
	}
	#reserve-regist-confirm td {
		min-height: 2.5vh;
	}

	#reserve-regist-confirm .table th {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
	}

	#reserve-regist-confirm .btn-field .btn {
		margin-top: 0;
	}
	#reserve-regist-confirm .btn-field input[name="submit"] {
		margin-top: 5%;
	}

	/*
	 *  メニュー詳細
	 */
	#menu-detail h1 {
		margin-left: 3%;
	}

	#menu-detail p.breadcrumb {
		padding-left: 10px;
	}
	#menu-detail p.breadcrumb span {
		display: contents;
	}

	#menu-detail h2 {
		padding: 6vw 3vw 0 3vw;
		line-height: 1.3;
		font-size: 1.2em;
	}

}