/*基本設定*/

.pc {
	display:block;
}

.sp {
	display:none;
}
.spflex {
	display:none;
}
p{
  margin:5px 0;
}
body {
  font-family: 'Noto Sans JP', sans-serif;
}
input:not([type="checkbox"]):focus, textarea:focus, select:focus {
   border: 1px solid #ffd13c !important;
   outline: 2px solid #ffd13c !important;
}
/*カラー設定*/

:root {
  --main: #645D46;
  --main2: #FDF3D3;
	--main-rgb: 100, 93, 70;
}
.text-red-600{
  color: #ef4444;
}
a:visited {
  color: unset; /* 訪問済みリンクの色 */
}
/*全体*/
.client-error-message{
  max-width: 450px;
}
.bm {
	background-color:var(--main);
}

.ct {
	display:flex;
	flex-direction: column;
}

.psr {
	position: relative;
}

/* アニメーション */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeup {
  opacity: 0;
  animation: fadeUp 0.8s ease-out forwards;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.5s; }
.delay-4 { animation-delay: 0.7s; }
.delay-5 { animation-delay: 0.9s; }

/* アニメーション */
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

#login_main {
  width: 100%;
  height: 55svh;
  background-image: url('../img/indeximg.jpg');
  background-size: cover;         /* 全体をカバー */
  background-position: center;    /* 中央寄せ */
  background-repeat: no-repeat;   /* 繰り返しなし */
	display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: flex-end;
  transition: padding-top 0.6s ease;
  padding-top: 45svh;
}

#login_main.shift-start {
  padding-top: 0px; /* アニメーションで上に上がる感じ */
  justify-content: flex-start;
}

.login_frame {
  width: 100%;
	height:65svh;
  background-color: rgba(255, 255, 255, 0.8);
	display:flex;
	flex-direction: column;
    align-items: center;
	  backdrop-filter: blur(6px); /* ← 背景ぼかし効果 */
  -webkit-backdrop-filter: blur(6px); /* Safari対応 */
  transition: transform 0.5s ease;
  transform: translateY(0);
}

.mainlogo {
	width:320px;
	height:111px;
}

.login_title {
	font-size:26px;
	text-align:center;
	color:#645D46;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 300; /* 細字（Light） */
	letter-spacing: 1.56px;
	line-height: 40.8px;
}

.login_btn_bw {
  width: 327px;
  height: 48px;
  background-color: #645D46;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 16px;
  border: none;
  border-radius: 4px; /* お好みで角丸に */
  cursor: pointer;
	display:flex;
	align-items: center;
    justify-content: center;
	margin-top:40px;
	transition: background-color 0.3s ease;
}

.login_btn_bw:hover {
  background-color: #F7C242;
}

.login_bt-bottom {
	display:flex;
	height:100%;
}

#login_footer {
	background-color:#fff;
	width:100%;
}

.login_hr {
  border: none;
  border-top: 1px solid #645D46;
  margin: 20px 0; /* 必要に応じて調整 */
	width:95%;
	display: inline-block;
}

.footer-links {
  display: flex;
	justify-content: center;
  flex-wrap: wrap;
  gap: 100px; /* spanごとのスペースを広めに確保 */
}

.footer-links a {
  font-size: 14px;
  color: #645D46;
  text-decoration: underline;
  text-decoration-color: #645D46;
}
.footer-links a:hover {
  opacity: 0.7; /* ホバー時の視覚効果（任意） */
}

.login_copy {
	font-size:14px;
	color:#645D46;
	margin-top:20px;
	margin-bottom:30px;
}

.login_form_overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto; /* ← 高さはフォーム分だけ */
  display: none;
  justify-content: center;
  align-items: flex-end;
  z-index: 9999;
}

.login_form_inner {
  background: white;
  padding: 35px 0 0 0;
  width: 100%;
	height: calc(100svh - 255px);
  border-radius: 50px 50px 0 0;
  box-shadow: 0 0px 8px rgba(0,0,0,0.3);
  transform: translateY(100%);
  animation: slideUp 0.6s ease forwards;
	pointer-events: auto;
	display: flex;
    justify-content: center;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

}

.login_form_inner::-webkit-scrollbar {
  width: 6px;
}
.login_form_inner::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}

.inner310 {
	color:#242424;
	width:100%;
	max-width:325px;
}

.inner620 {
	max-width:620px;
}

.login_input::placeholder { color: #B9B9B9; }       /* 標準 */
.login_input::-webkit-input-placeholder { color: #B9B9B9; } /* Chrome, Safari */
.login_input:-ms-input-placeholder { color: #B9B9B9; }       /* IE */

.login_input {
  display: block;
  width: calc(100% - 24px);
  padding: 0px 12px 0px 12px;
	height:47px;
  margin-bottom: 25px;
	margin-top:2px;
  border: 1px solid #CCC;
  border-radius: 4px;
  font-size: 16px;
}


.login_submit {
  width: 100%;
  height: 48px;
  background: #645D46;
  color: white;
  padding: 12px;
  border: none;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
	font-size:16px;
	transition: background-color 0.3s ease;
  margin-bottom:15px;
}


.login_submit:hover {
  background: #F7C242;
}

.login_kakunin {
	margin:0 auto;
	margin-top:50px;
	width:310px;
	display: flex;
    justify-content: center;
}

#loginFormOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
}

.forgot-password {
  font-size: 16px;
  color: #242424;
  text-decoration: underline;
  text-decoration-color: #242424;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
  margin-top: 45px;
  transition: color 0.3s ease; /* スムーズな変化 */
	margin-bottom:15px;
}

.forgot-password:hover {
  color: #F7C242; /* ホバー時の色 */
  text-decoration-color: #F7C242;
}

.checkbox-wrap {
  font-size: 12px;
  color: #6A6A6A;
  margin: 20px 0 10px;
}

.remember-check {
  margin-right: 6px;
}

.login_border_btn {
  background-color: #fff;
  border: 2px solid #645D46;
  color: #645D46;
  font-weight: bold;
  font-size: 16px;
  width: 100%;
	height:46px;
  border-radius: 4px;
  cursor: pointer;
	transition: background-color 0.3s ease;
}

.login_border_btn:hover {
  background-color: #F7C242;
}


.checkbox-wrap {
  font-size: 12px;
  color: #6A6A6A;
  margin: 20px 0 10px;
}

.checkbox-label {
  position: relative;
  padding-right: 20px; /* 右にスペースを確保 */
  cursor: pointer;
  user-select: none;
  display: inline-block;
}

.remember-check {
  display: none; /* 非表示にしてカスタムスタイル使用 */
}

.custom-checkbox {
  position: absolute;
  top: 0;
  right: 0;
  height: 12px;
  width: 12px;
  background-color: #fff;
  border: 1px solid #6A6A6A;
  border-radius: 2px;
	margin-top:2px;
}

/* チェックされたときのスタイル */
.remember-check:checked + .custom-checkbox {
  background-color: #D0BF89;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 10.2L3.5 7.7L2.5 8.7L6 12.2L14 4.2L13 3.2L6 10.2Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.input-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.input-wrapper .login_input {
  width: 100%;
  padding-right: 40px; /* アイコン分の余白 */
}

.toggle-password-icon {
  position: absolute;
  right: 12px;
  top: 35%;
  transform: translateY(-50%);
  width: 17px;
  height: 14px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.toggle-password-icon:hover {
  opacity: 1;
}

.toggle-password-icon2 {
  top: 45%;
}

.login_txt {
	font-size:16px;
	font-weight:bold;
	color:#645D46;
	text-align:center;
	margin-bottom:44px;
}

.login-etxt {
	color:#FF3A2C;
	font-size:12px;
}

.input-label {
	display:block;
	font-weight:bold;
	font-size:14px;
	margin-top:16px;
}

.input-label2 {
	display:block;
	font-weight:bold;
	font-size:12px;
	margin-top:10px;
	color:#B9B9B9;
}

.register_inputs label{
	display:flex;
	justify-content: space-between;
}

.register_inputs input{
	width:1000px;
	max-width:450px;
	margin-bottom:12px;
}
.register_inputs textarea {
    width: 1000px;
    max-width: 450px;
    margin-bottom: 12px;
}

.login_pass2 {
	width:423px !important;
}

.required {
	color:red;
	margin-left:2px;
}

.input-jusyo {
	width:100%;
	display:flex;
	justify-content: space-between;
    align-items: center;
}

.input-jusyo-left {
	
}
.input-jusyo-right {
	display:flex;
	flex-direction: column;
}

.postal-wrapper {
	display:flex;
}

.login_input-yubin {
	width:120px !important;
	margin-right:32px;
}

.address-search-btn {
  background-color: #fff;
  border: 2px solid #645D46;
  color: #645D46;
  font-weight: bold;
  font-size: 16px;
  width: 155px;
	height:49px;
  border-radius: 4px;
  cursor: pointer;
	transition: background-color 0.3s ease;
	margin-top:2px;
}

.address-search-btn:hover {
  background-color: #F7C242;
}

.input-gyou {
	display:flex;
	align-items: center;
}

.input-2gyou {
	display:flex;
	flex-direction: column;
}

.input-mail {
	margin-top:5px;
}

.login_rtn {
  font-size: 16px;
  color: #B9B9B9;
  text-decoration: underline;
  text-underline-offset: 3px; /* 下線の位置調整（任意） */
  cursor: pointer;
  transition: color 0.3s;
	text-align:center;
	margin-top:40px;
	padding-bottom:70px;
}

.login_rtn:hover {
  color: #645D46; /* ホバー時の色（お好みで変更可） */
}




@media screen and (max-width: 768px) { 

#login_main {
  background-image: url('../img/indeximg-sp.jpg');
	position: relative; /* 擬似要素を使うために必要 */
}

#login_main::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10%; /* グラデーションの高さ（調整可） */
    background: linear-gradient(to bottom, transparent, white);
    pointer-events: none; /* ユーザー操作に干渉しない */
    z-index: 1;
}

.login_frame {
    position: relative;
    z-index: 2; /* グラデーションより上に表示 */
	padding:0;
	height:100%;
	max-height:none;
}

.mainlogo {
	width:80%;
	height:auto;
}

.login_title {
	font-size:1.75rem;
}

.footer-links {
	flex-direction: column;
	gap:12.5px;
}

.login_bt-bottom {
	width:100%;
	align-items: flex-end;
	justify-content: center;
}
.login_btn_bw {
	font-size: clamp(16px, 4.5vw, 32px);
	width:85%;
	margin-bottom:15vw;
}

.footer-links a {
	font-size: clamp(16px, 4vw, 32px);
}

.login_copy {
	font-size: clamp(16px, 4vw, 32px);
	margin-bottom:15vw;
}

.login_submit {
	margin-bottom:10vw;
}

.register_inputs {
	width:90%;
	margin:0 auto;
}

.register_inputs label {
	flex-direction: column;
}

.register_inputs input {
	width: calc(100% - 24px);
}
.register_inputs textarea {
	width: calc(100% - 24px);
}
.login-etxt {
	margin-left:5%;
}

.input-jusyo {
	align-items: flex-start;
    flex-direction: column;
}

.input-gyou {
	align-items: flex-start;
}

.input-2gyou {
	width:100%;
}

.login_pass2 {
	width: calc(100% - 24px) !important;
}

.input-jusyo-right {
	width:100%;
}

}


/* 登録完了画面*/

#completed_main {
  position: relative; /* ←追加 */
  /* 以下は既存の内容でOK */
  width: 100%;
  height: 100svh;
  background-image: url('../img/indeximg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  justify-content: flex-end;
  transition: padding-top 0.6s ease;
}



#completed_main::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20svh; /* 画面高さの10% */
  background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
  pointer-events: none; /* クリックイベントを透過 */
  z-index: 1;
}


#completed.shift-start {
  padding-top: 0px; /* アニメーションで上に上がる感じ */
  justify-content: flex-start;
}

.completed-text {
	color:#242424;
	font-size:18px;
	font-weight:bold;
	text-align:center;
}

.completed-text2 {
	color:#242424;
	font-size:14px;
	text-align:center;
	margin-top:28px;
}

.completed-icon {
	margin-top:75px;
	margin-bottom:20px;
}

.completed-submit {
  width: 310px;
  height: 48px;
  background: #D0BF89;
  color: white;
  padding: 12px;
  border: none;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  margin-top: 60px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2); /* ← 右下方向の影 */
}

.completed-submit:hover {
  background: #F7C242;
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.25); /* ホバー時に影を少し強調 */
}


.completed_frame {
	height:100svh;
	display:flex;
	justify-content: center;
}

.confirm-list {
  list-style: none;
  padding: 0;
  margin: 40px 0;
}

.confirm-list li {
  margin-bottom: 30px;
  color: #242424;
  font-size: 16px;
  line-height: 1.6;
}

.confirm-list li strong {
  display: block;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #242424;
}

.confirm-label {
  font-size: 14px;
  font-weight: bold;
  color: #242424;
  margin-bottom: 16px;
}
.confirm-value {
  font-size: 16px;
  color: #242424;
}

.login_submit5{
	width:310px;
}

@media screen and (max-width: 768px) { 

#completed_main {
  background-image: url('../img/indeximg-sp.jpg');
	position: relative; /* 擬似要素を使うために必要 */
}

#completed_main::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10%; /* グラデーションの高さ（調整可） */
    background: linear-gradient(to bottom, transparent, white);
    pointer-events: none; /* ユーザー操作に干渉しない */
    z-index: 1;
}

/*基本設定*/

.pc {
	display:none;
}

.sp {
	display:block;
}
.spflex {
	display:flex;
}


}