@charset "utf-8";

/*==========================================
 ヘッダーのスタイル
===========================================*/
header {
	text-align      : center;
}

header#websiteHeader {
	position        : fixed;
	width           : 100%;
	height          : 60px;
	z-index         : 999;
	top             : 0px;
	margin-top      : -2px;
	overflow        : visible;
	background      : #fff;
	border-bottom   : 1px solid #aaa;
}

#header-center-container {
	position        : absolute;
	display         : flex;
	align-items     : center;
	gap             : 10px; 
	left            : 50%;
	top             : 50%;
	transform       : translate(-50%, -50%);
}

/* ロゴやサイト名画像のスタイル調整（任意） */
#header-logo img,
#header-site-name img {
	height          : 40px; /* 高さを揃えるなど必要に応じて調整 */
}

header #header-logo {
	padding-top     : 3px;
}	

#header-icon-listMenu {
    display         : block;
    position        : absolute;
    height          : 32px;
    width           : 32px;
    left            : 8px;
    top             : 19px;
    background      : url(/sites/motosuke/img/icons/hamburgerMenu_m.png) no-repeat left top;
    -webkit-background-size: 100%;
    background-size : 100%;
    cursor          : pointer;
}

#onlinesalon-entry-login-icon {
    position        : relative;
    float           : right;
    width           : 80px;
    height          : auto;
    top             : 16px;
    right           : 8px;
    cursor          : pointer;
    font-size       : 10px;
    font-family     : 'Arial', 'Helvetica', sans-serif;    
    color           : #00d;
    text-align      : center;
    line-height     : 1.3;
}

#onlinesalon-entry-login-icon img {
    width           : 26px;
    margin-left     : -2px;
}

#header-menu {
    position        : absolute;
    bottom          : 0; 
    left            : 50%; 
    transform       : translateX(-50%); 
    background-color: transparent;	
	clear           : both;
    width           : 598px;
    margin          : -9px auto 0px auto;
	font-size       : 16px;
    font-family     : "Kosugi Maru",sans-serif;
	line-height     : 11px;    
}

#header-menu ul li {
    position        : relative;
    float           : left;
    height          : 30px;
    line-height     : 16px;
	margin          : 15px 12px 0px 12px;
    cursor          : pointer;
}

.header-menu-item {
	padding         : 0px 3px;
}

.header-menu-item:hover {
	color           : #2a85c6;
}

.header-menu-item:before {
	content         : '';
   	position        : absolute;
   	bottom          : 5px;
   	right           : 50%;
   	width           : 0;
   	height          : 4px;
	background      : linear-gradient(to left, #b3424a , 40%, #a52a2a);
   	transition      : all 0.4s ease-out;
}

.header-menu-item:after {
   	content         : '';
   	position        : absolute;
   	bottom          : 5px;
   	left            : 50%;
   	width           : 0;
   	height          : 4px;
	background      : linear-gradient(to right, #a52a2a, 60%, #8f353b);
	transition      : all 0.4s ease-out;
}

.header-menu-item.on:before,
.header-menu-item:hover:before {
   	width           : 50%;
}

.header-menu-item.on:after,
.header-menu-item:hover:after {
   	width           : 50%;
}

.header-menu-panel {
	position        : absolute;
    width           : 100%;
    top             : 90px;
    border-bottom   : 2px solid #8a0623;
	border-top      : 4px solid #8a0623;
    background-color: #fff;
    padding         : 16px 10px 16px 10px;
    font-size       : 16px;
    box-sizing      : border-box;
}

#user-name-display {
	position        : relative;
	float           : right;
  	margin-right    : 10px;
  	font-family     : "Rounded Mplus 1c", "Hiragino Kaku Gothic ProN", sans-serif;    	
  	font-weight     : bold;
  	color           : #333;
  	line-height     : 80px;
}
.user-icon {
  	margin-right    : 5px;
}

#popup-user-menu {
    position         : absolute;
    top              : 60px;
    right            : 8px;
    width            : 260px;
    background-color : #fff;
    border           : 1px solid #888;
    box-shadow       : 0 0 15px #fff;	
}

@media screen and (max-width:280px){
	header#websiteHeader {
	    height          : 67px;
	}
	header #header-logo {
	    width           : 40px;
	    top             : 5px;
	    left            : 3px;
	}
	#header-icon-listMenu {
	    right           : 5px;
	    top             : 13px;
	}
	#header-menu {
		float           : left;
        margin-top      : 0px;
        font-size       : 14px;
		line-height     : 11px;
	}
	.header-menu-item {
	    padding         : 0px 2px;
	}
	#header-menu ul li {
    	margin          : 3px 6px 0px 6px;
	}
	#header-menu-item1 {
		display         : block;
	}
	#header-menu-item2 {
		display         : none;
	}
	#header-menu-item3 {
		display         : block;
	}
	#header-menu-item4 {
		display         : block;
	}
	#user-name-display {
		display         : none;    
	}	
}

@media screen and (min-width:281px) and (max-width:320px){
	header#websiteHeader {
	    height          : 67px;
	}
	header #header-logo {
	    width           : 40px;
	    top             : 5px;
	    left            : 3px;
	}
	#header-icon-listMenu {
	    right           : 5px;
	    top             : 13px;
	}
	#header-menu {
		float           : left;
        margin-top      : 14px;
        font-size       : 14px;
	}
	.header-menu-item {
	    padding         : 0px 2px;
	}
	#header-menu ul li {
    	margin          : 3px 6px 0px 6px;
	}
	#header-menu-item1 {
		display         : block;
	}
	#header-menu-item2 {
		display         : none;
	}
	#header-menu-item3 {
		display         : block;
	}
	#header-menu-item4 {
		display         : block;
	}
	#user-name-display {
		display         : none;    
	}	
}

@media screen and (min-width:321px) and (max-width:413px){
	header #header-logo {
	    width           : 40px;
	    top             : 5px;
	    left            : 3px;
	}
	#header-menu {
		float           : left;
        margin-top      : 10px;
	}
	.header-menu-item {
	    padding         : 0px 2px;
	}
	#header-menu ul li {
    	margin          : 3px 6px 0px 6px;
	}
	#header-menu-item1 {
		display         : block;
	}
	#header-menu-item2 {
		display         : none;
	}
	#header-menu-item3 {
		display         : block;
	}
	#header-menu-item4 {
		display         : block;
	}
	#user-name-display {
		display         : none;    
	}	
}

@media screen and (min-width:414px) and (max-width:560px){
	header #header-logo {
	    width           : 40px;
	    top             : 5px;
	    left            : 3px;
	}
	#header-menu {
		float           : left;
        margin-top      : 10px;
		line-height     : 11px;
	}
	.header-menu-item {
	    padding         : 0px 2px;
	}
	#header-menu ul li {
    	margin          : 3px 6px 0px 6px;
	}
	#header-menu-item1 {
		display         : block;
	}
	#header-menu-item2 {
		display         : block;
	}
	#header-menu-item3 {
		display         : block;
	}
	#header-menu-item4 {
		display         : block;
	}
	#user-name-display {
		display         : none;    
	}
}

@media screen and (min-width:561px) and (max-width:640px){
	header #header-logo {
	    width           : 40px;
	    top             : 5px;
	    left            : 3px;
	}
	#header-menu {
		float           : left;
        margin-top      : 10px;
		line-height     : 11px;
	}
	.header-menu-item {
	    padding         : 0px 2px;
	}
	#header-menu ul li {
    	margin          : 3px 6px 0px 6px;
	}
	#header-menu-item1 {
		display         : block;
	}
	#header-menu-item2 {
		display         : block;
	}
	#header-menu-item3 {
		display         : block;
	}
	#header-menu-item4 {
		display         : block;
	}
	
	.header-menu-item:before {
	   	bottom          : 4px;
	}
	.header-menu-item:after {
   		bottom          : 4px;
	}

}

@media screen and (min-width:641px) and (max-width:770px) {
	#header-menu-item1 {
		display         : block;
	}
	#header-menu-item2 {
		display         : block;
	}
	#header-menu-item3 {
		display         : block;
	}
	#header-menu-item4 {
		display         : block;
	}
	#header-menu-item8 {
		display         : none;
	}
	
}

@media screen and (min-width:771px) and (max-width:999px) {
	#header-menu-item1 {
		display         : block;
	}
	#header-menu-item2 {
		display         : block;
	}
	#header-menu-item3 {
		display         : block;
	}
	#header-menu-item4 {
		display         : block;
	}

}

@media screen and (max-width:1024px) {
	header#websiteHeader {
		height          : 60px;
	}
	#header-menu {
		clear           : both;
		line-height     : 11px;
	}
	#header-icon-listMenu {
		display         : block;
	}
	#header-menu {
		display         : none;
	}
	#onlinesalon-entry-login-icon {
    	left            : 2px;
    }
}

@media screen  and (min-width:1025px) {
	#websiteHeader {
    	width           : 1024px;
    	margin-left     : auto;
    	margin-right    : auto;
  	}
	#header-center-container {
	    left            : 10px;
	    transform       : translateY(-50%); /* 縦方向中央に補正 */
	    gap             : 10px;             /* ロゴとサイト名の間隔 */
	}  	
	#header-icon-listMenu {
		display         : none;
	}
	#header-menu {
		display         : block;
	}
}

@media screen  and (min-width:1200px){
}

/*==========================================
 フッターのスタイル
===========================================*/
#site-footer {
	position        : relative;
	z-index         : 10;
  	background-color: #f5f5f5;
  	padding         : 20px 0 60px 0;
  	text-align      : center;
  	border-top      : 1px solid #ddd;
  	font-family     : sans-serif;
}

.footer-content {
  	display         : flex;
  	flex-direction  : column;
  	align-items     : center;
  	gap             : 6px;
}

.footer-produced {
  	display         : flex;
  	margin          : 0;	
	font-size       : 0.9rem;
  	color           : #666;
  	align-items     : center;
  	gap             : 6px;
}

.footer-logo-inline {
  	height          : 32px;
  	width           : auto;
  	vertical-align  : middle;
}

.footer-copy {
  	margin          : 0;
	font-size       : 0.8rem;
  	color           : #999;
}

.footer-cookie {
  	max-width       : 90%;
  	margin          : 8px 0 0;
  	text-align      : center;
  	line-height     : 1.5;
  	font-size       : 0.75rem;
  	color           : #666;
  	
}

.footer-cookie a {
  	color           : #337ab7;
  	text-decoration : underline;
}
.footer-cookie a:hover {
  	text-decoration : none;
}

/*==========================================
 ログインモーダル
===========================================*/

.modal {
  	position         : fixed;
  	width            : 100%; 
  	height           : 100%;
  	left             : 0; top: 0;
  	background-color : rgba(0, 0, 0, 0.5);
  	z-index          : 999;
}

/* モーダル全体 */
.modal {
  	display         : none;
  	position        : fixed;
  	width           : 100%;
  	height          : 100%;
  	left            : 0;
  	top             : 0;
  	padding-top     : 60px;
  	z-index         : 9999;
  	overflow        : auto;
  	background-color: rgba(0,0,0,0.5);
  	font-family     : "Rounded Mplus 1c", "Hiragino Kaku Gothic ProN", sans-serif;    	
}

/* 閉じるボタン */
.modal .close {
  	position        : absolute;
  	top             : 20px;
  	right           : 35px;
  	color           : #fff;
  	font-size       : 40px;
  	font-weight     : bold;
  	cursor          : pointer;
}

.login-close-button {
  	position         : absolute;
  	top              : 10px; 
  	right            : 15px;
  	font-size        : 1.5rem;
  	cursor           : pointer;
}

.modal-content img {
  	max-width       : 90vw;
  	max-height      : 80vh;
  	object-fit      : contain;
}

.modal-content {
  	position         : relative;
  	display          : block;  	
  	width            : 90%;
  	max-width        : 400px;
  	margin           : 10% auto;
  	padding          : 20px;
	text-align       : left;
  	object-fit       : contain;	
  	border-radius    : 10px;
	background-color : #fff;  	
  	box-shadow       : 0 0 15px #fff;	
}	

.modal-content input {
  	width            : 100%;
  	padding          : 8px;
  	margin           : 8px 0;
  	border           : 1px solid #ccc;
  	border-radius    : 4px;
}

.modal-content button[type="submit"] {
  	width            : 100%;
  	margin-top       : 30px;
  	padding          : 10px;
  	background-color : #2a6ebb;
  	color            : white;
  	border           : none;
  	border-radius    : 4px;
  	cursor           : pointer;
}

#loginForm {
	padding          : 0px 30px;
}

#forgetPassword {
    padding          : 40px 0px;
}

.error-msg-text {
    color            : #eb5151!important;
}

.msg-blue {
	color            : #2950cd!important;
}

.type-check {
  	display          : flex;
  	align-items      : center;
  	gap              : 8px;
  	font-size        : 14px;
}

.type-check input[type="checkbox"] {
  	width            : 16px;
  	height           : 16px;
  	margin           : 0;
}

.type-check .label-text {
  	margin           : 0;
 	cursor           : pointer;
}

@media (max-width: 480px) {
  .type-check {
    	flex-wrap    : wrap;
  }
}

/*==========================================
 会員登録フォーム
===========================================*/
#register-form  {
	padding          :0px 0px 100px 0px;
	font-family      : "Hiragino Kaku Gothic ProN", sans-serif;
}

.register-section h2 {
  	font-size        : 1.5rem;
  	color            : #333;
  	margin-bottom    : 0.6em;
}
.register-header {
  	display          : flex;
  	justify-content  : space-between;
  	align-items      : center;
  	margin-bottom    : 1rem;
}

#register-form p {
  	display          : block;
  	margin-bottom    : 0.8em;
  	color            : #555;
  	font-size        : 0.95em;
}

.label-must {
    vertical-align   : 3px;
    font-size        : 12px;
    color            : #eb5151;
}

#register-form input {
	margin-bottom    : 10px;
}

.select-field {
    display          : flex;
    align-items      : center; /* 縦方向の中央揃え */
    justify-content  : center; /* 横方向の中央揃え */
    gap              : 10px; /* 要素間の余白（調整可） */
}

.form-label {
	color            : #000;
	font-weight      : bold;	
}

.name-fields {
  	display          : flex;
  	gap              : 1rem;
}

.name-fields label {
  	flex             : 1;
  	display          : flex;
  	flex-direction   : column;
}

.zip-pref-row {
  	display          : flex;
  	gap              : 1rem;
  	flex-wrap        : wrap; /* スマホ対応 */
}

.zip-field,
.pref-field {
  	display          : flex;
  	flex-direction   : column;
  	flex             : 1 1 200px; /* 最小幅200px、縮小・拡大対応 */
}

.zip-field label,
.pref-field label {
	margin-bottom    : 0rem;
}

#register-birthYear {
	width             : 73px;
	padding-left      : 5px;
}

#register-birthMonth,
#register-birthDate {
	width             : 65px;
	padding-left      : 12px;
}


/* エラーメッセージ */
.register-form-errors  {
  	color             : red;
  	background        : #ffeef0;
  	border            : 1px solid red;
  	padding           : 1em;
  	margin-top        : 1em;
  	border-radius     : 6px;
}

.register-form-errors p {
  	color             : red!important;
}

.register-button {
	width            : 100%;
  	background-color : #444;
  	color            : white;
  	padding          : 10px 20px;
  	border           : none;
  	border-radius    : 4px;
  	cursor           : pointer;
}

.register-button:hover {
  	background-color : #666;
}

.register-buttons {
  	text-align       : center;
  	margin-top       : 2em;
}

.register-submit,
.register-cancel {
  	font-size        : 1em;
  	padding          : 12px 20px;
  	border           : none;
  	border-radius    : 8px;
  	cursor           : pointer;
  	margin           : 0 0.5em;
  	transition       : transform 0.1s;
}

.register-submit {
  	background-color : #ff66aa;
  	color            : white;
}

.register-cancel {
  	background-color : #ccc;
  	color            : #333;
}

.register-submit:active,
.register-cancel:active {
  	transform        : scale(0.96);
}

/*==========================================
 会員登録確認画面
===========================================*/
#register-confirm-form {
  	max-width        : 600px;
  	margin           : 0 auto;
  	font-family      : "Helvetica Neue", sans-serif;
  	background       : #f9f9f9;
   	padding          : 20px 20px 80px 20px;
  	border-radius    : 8px;
}

/* セクションタイトル */
#register-confirm-form h2 {
  	border-left      : 5px solid #4caf50;
  	padding-left     : 10px;
  	margin-top       : 30px;
  	font-size        : 1.2em;
  	color            : #333;
}

/* 各行 */
.confirm-row {
  	display          : flex;
  	flex-direction   : row;
  	justify-content  : space-between;
  	padding          : 8px 0;
  	border-bottom    : 1px solid #ddd;
  	font-size        : 0.95em;
}

/* ラベル */
.confirm-row label {
  	width            : 35%;
  	font-weight      : bold;
  	color            : #555;
}

/* 値 */
.confirm-row span,
.confirm-row pre {
  	width             : 60%;
  	font-size         : 16px;
  	color             : #1a30dd;
  	word-break        : break-word;
  	white-space       : pre-wrap;
}

/* ボタンエリア */
.register-form-buttons {
  	margin-top        : 30px;
	display           : flex;
  	justify-content   : space-between;
}

/* ボタン共通スタイル */
.register-form-buttons button {
  	padding           : 10px 20px;
  	border            : none;
  	border-radius     : 4px;
  	font-size         : 1em;
  	cursor            : pointer;
}

/* 修正ボタン */
.register-form-buttons button[type="button"] {
  	background-color  : #ddd;
  	color             : #333;
}

/* 送信ボタン */
.register-form-buttons button[type="submit"] {
  	background-color  : #4caf50;
  	color             : #fff;
}

/* レスポンシブ対応 */
@media screen and (max-width: 600px) {
  	.confirm-row {
    	flex-direction: column;
  	}

  	.confirm-row label,
  	.confirm-row span,
  	.confirm-row pre {
    	width         : 100%;
  	}

  	.register-form-buttons {
    	flex-direction: column;
    	gap           : 10px;
  	}
}

/*==========================================
 会員登録 仮登録完了画面
===========================================*/
.registration-complete {
  	max-width          : 640px;
  	margin             : 50px auto;
  	padding            : 10px;
  	border             : 1px solid #ccc;
  	border-radius      : 10px;
  	background         : #fff;
  	font-family        : sans-serif;
  	color              : #333;
  	text-align         : left;
  	line-height        : 1.8;
}

.icon-area img {
  	max-width          : 180px;
  	margin-bottom      : 20px;
}

.registration-complete h2 {
  	margin-bottom      : 20px;
	color              : #2c7f4f;
  	font-size          : 1.5em;
  	text-align         : center;
}

.registration-complete .icon-area {
	text-align         : center;
}

.icon-mail {
  	margin-right       : 8px;
}

.lead-message {
  	font-size          : 1.1em;
  	margin-bottom      : 12px;
}

.attention-box {
  	margin             : 30px 0; 	
  	padding            : 15px 20px;
  	border-radius      : 6px;
  	text-align         : left;
  	background         : #fff8e1;
 	border-left        : 6px solid #ff9800;
}

.attention-box h3 {
  	margin-top: 0;
  	color: #e65100;
  	font-size: 1.1em;
}

.attention-box ul {
  	padding-left: 20px;
}

.attention-box li {
  	margin-bottom: 8px;
}

.button-group {
  	margin-top: 30px;
  	display: flex;
  	flex-direction: column;
  	gap: 15px;
  	align-items: center;
}

.resend-button {
  	padding: 12px 20px;
	background: #1976d2;
  	color: white;
  	border: none;
  	border-radius: 4px;
  	font-size: 1em;
  	cursor: pointer;
}

.resend-button:hover {
  	background: #1565c0;
}

.home-link {
  	display: inline-block;
  	background: #4caf50;
  	color: white!important;
  	text-decoration: none;
  	padding: 10px 18px;
  	border-radius: 4px;
}

.home-link:hover {
  	background: #388e3c;
}

/*==========================================
 会員登録 エラー画面
===========================================*/
.error-notice,
.already-regist {
  	margin: 30px auto;
  	max-width: 500px;
  	height: 100vh;
  	text-align: center;
  	padding: 30px;
  	border: 1px solid #eee;
  	border-radius: 10px;
  	background: #fff;
  	box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.error-icon img {
  	width: 120px;
  	height: auto;
  	margin-bottom: 20px;
}

.error-notice h2,
.already-regist h2 {
  	font-size: 1.8em;
  	margin-bottom: 15px;
  	color: #d9534f;
}

.error-notice .message,
.already-regist .message {
  	font-size: 1.1em;
  	margin-bottom: 15px;
  	color: #333;
  	text-align: left;
}

.error-notice .tips,
.already-regist .tips  {
  	font-size: 0.9em;
  	color: #666;
  	margin-bottom: 25px;
    text-align: left;
}

.home-button {
  	background: #007bff;
  	color: white;
  	border: none;
  	padding: 12px 24px;
  	border-radius: 6px;
  	cursor: pointer;
  	font-size: 1em;
  	transition: background 0.3s;
}

.home-button:hover {
  	background: #0056b3;
}

/*==========================================
 会員登録 既に登録済み
===========================================*/
.already-registered-container {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	height: 80vh;
  	background-color: #f9f9f9;
  	padding: 20px;
  	text-align: center;
}

.already-registered-content {
  	background: #fff;
  	border: 1px solid #ddd;
  	border-radius: 12px;
  	padding: 40px 30px;
  	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  	max-width: 400px;
}

.already-registered-content h2 {
  	margin-bottom   : 15px;
  	color           : #d9534f;
  	font-size       : 1.6em;
}

.already-registered-content p {
  	margin-bottom   : 25px;
  	line-height     : 1.6;
  	font-size       : 1em;
}

.login-btn {
  	padding         : 12px 24px;
  	border          : none;
  	border-radius   : 6px;
  	cursor          : pointer;
  	background-color: #007bff;
  	color           : #fff;
  	font-size       : 1em;
}

.login-btn:hover {
  	background-color: #0056b3;
}