/* ========================================
   MEMBER CARD
======================================== */
.member-card{
    position:relative;
    width:100%;
    max-width:1000px;
    margin:30rem auto;
    background:var(--C4);
    overflow:hidden;
    box-sizing:border-box;
    border:2rem solid;
    border-image: var(--C21);
}


.member-card:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:2rem;
    background:rgba(120,70,10,0.35);
    z-index:2;
}

.member-card .horse-bg{
    position:absolute;
    left:20rem;
    top:120rem;
    width:320rem;
    height:700rem;
    background:url("../images/member/cut01.png")
        no-repeat center top;
    background-size:contain;
    opacity:1;
    pointer-events:none;
    z-index:1;
}

.member-card .horse-bg2{
    position:absolute;
    right:20rem;
    bottom:20rem;
    width:749rem;
    height:360rem;
    background:url("../images/member/cut02.png")
        no-repeat center top;
    background-size:contain;
    opacity:1;
    pointer-events:none;
    z-index:1;
}

.member-card .horse-bg3{
    position:absolute;
    right:0rem;
    bottom:-120rem;
    width:749rem;
	/*width:40%;*/
    height:650rem;
    background:url("../images/member/cut03.png")
        no-repeat right bottom;
    background-size:contain;
    opacity:1;
    pointer-events:none;
    z-index:1;
}

.member-card .horse-bg4{
    position:absolute;
    right:-120rem;
    bottom:20rem;
    width:749rem;
    height:500rem;
    background:url("../images/member/cut04.png")
        no-repeat center top;
    background-size:contain;
    opacity:1;
    pointer-events:none;
    z-index:1;
}

.member-card .horse-bg6{
    position:absolute;
    left:-140rem;
    bottom:0rem;
    width:749rem;
    height:350rem;
    background:url("../images/login/cut06.png")
        no-repeat center top;
    background-size:contain;
    opacity:1;
    pointer-events:none;
    z-index:1;
}

.member-card .horse-bg7{
    position:absolute;
    left:120rem;
    bottom:20rem;
    width:749rem;
    height:400rem;
    background:url("../images/login/cut07.png")
        no-repeat center top;
    background-size:contain;
    opacity:1;
    pointer-events:none;
    z-index:1;
}

.member-card h2,
.member-card .member-content{
    position:relative;
    z-index:3;
}

/* ========================================
   CONTENT
======================================== */
.member-content{
    position:relative;
    z-index:3;
}

/* ========================================
   INFO
======================================== */
.member-info{
    margin:0 auto;
}

.info-row{
    margin:0;
    text-align:center;
}

.info-label{
    font-weight:bold;
    color:var(--C11);
}

.info-box{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#e3e3e3;
    border-top:2rem solid #9f9f9f;
    border-bottom:2rem solid #9f9f9f;
    color:var(--C11);
    font-weight:bold;
    box-sizing:border-box;
}

/* ========================================
   POINTCHECK
======================================== */
/* 最初の列の右側の縦線を白色にする */
.PointCheckTable td:first-child, th:first-child {
  border-right: 2px solid #ffffff;
}
/* 2列目の右側の縦線だけ白色にする */
.PointCheckTable td:nth-child(2), th:nth-child(2) {
  border-right: 2px solid #ffffff;
}
/* 最後の列の左側の縦線を白色にする */
.PointCheckTable td:last-child, th:last-child {
  border-left: 2px solid #ffffff;
}

/* ========================================
   USEREDIT
======================================== */
.UserEditTable .TableInput,
.UserEditTable .TableSelect,
.UserEditTable .TableTexterea,
.UserEditTable .TableInput::placeholder{font-weight: bold;}
.UserEditTable .Th, .UserEditTable .Td{padding:10rem;}
.UserEditTable td{
	opacity:.60;
}
.UserEditTable th {
	white-space: nowrap;
	width: 25%;
}
.UserEditTable .Td {
	text-align: left;
}
/* 最初の列の右側の縦線を無くす */
.UserEditTable th {
	border-right: none;
}
/* 底線を白色にする */
.UserEditTable tr:not(:last-child) th,
.UserEditTable tr:not(:last-child) td {
	border-bottom: 1px solid #ffffff;
}
/* ========================================
   USEREDIT　と　名前登録画面
======================================== */
.Mix{
	display:flex;
	align-items:center;
	justify-content:center;
}
 .Mix span{
	color:black;
	padding-right: 0.2em;
	padding-top: 0.1em;
}
.Mix span:not(:first-child){
	padding-left: 0.3em;
}
/* ========================================
   名前登録画面
======================================== */
.RegNameTable th {
	white-space: nowrap;
	width: 22%;
}
.RegNameTable .Th, .RegNameTable .Td{padding:auto 10rem;}
.RegNameTable th {border-right: none;}
/* ========================================
   POINT
======================================== */
.point-area{
    display:flex;
}

.point-box{
    flex:1;
    text-align:center;
}

.point-label{
    font-weight:bold;
    color:var(--C11);
}

.point-value{
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--C17);
    color:var(--C11);
    border-top:2rem solid var(--C14);
    border-bottom:2rem solid var(--C14);
    font-weight:bold;
}

/* ========================================
   MAIL
======================================== */
.MailResetTable{
	table-layout:fixed;
	width: 100%;
}

.MailResetTable .Th, .MailResetTable .Td{
	border: 1rem solid var(--C12);
}

.MailResetTable .Td{padding: 15rem}

.TableInputMail {
	width: 95%;
	border: 1rem solid var(--C9);
	margin: 0 auto;
	padding: .5em;
	border-radius: 10rem;
	resize: none;
	font-weight: bold;
	field-sizing: content;
	vertical-align: middle;
	line-height: 1.75;
}


h3.domain-label {
	border: 3rem solid var(--C15);
	background: var(--C15);
	text-align: center;
	color: var(--C4);
	padding:5rem 0;
}

div.domain-box {
	border: 3rem solid var(--C15);
	background:none;
	padding: 10rem 40rem;
}

div.domain-box2 {
	border: 3rem solid var(--C15);
	background:none;
	padding: 10rem 10rem;
}

.ListDomainBox {text-align: center;}
.ListDomain{display:list-item; color:var(--C15); list-style: none}

/* ========================================
   LINE
======================================== */
.member-line{
    height:3rem;
    background:linear-gradient(to right,
        #a4681f,
        #be8032 16%,
        #ffffaf 50%,
        #be8032 84%,
        #a4681f 100%
    );;
}
/* ========================================
   RESIST
======================================== */
.agree-item{
	display: flex;
	align-items: baseline; /* チェックボックスを1行目の上端に合わせる */
	
}
.agree-item input {
  flex-shrink: 0; /* チェックボックスの幅を潰さない（最重要） */
  margin-right: 8px; /* チェックボックスと文字の間の隙間 */
  transform: scale(1.3);
  transition: transform 0.1s ease-out; 
  transform-origin: center;
}

/* ========================================
   BUTTON
======================================== */
.member-btn-area {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

.member-btn, 
.member-btn:visited, 
.member-btn:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 20px;
    background: linear-gradient(to bottom, #4f0d93 0%, #2f055e 50%, #1a0236 100%) !important;
    border: 2px solid #ffffff; 
    box-shadow: 
        0 0 0 2px #2f055e,            
        inset 0 0 0 1px #2f055e,      
        inset 0 0 4px 2px rgba(255, 255, 255, 0.45);
    box-sizing: border-box;
    transition: all 0.3s ease;
    opacity: 1 !important; 
    filter: none !important; 
}

.member-btn span {
    color: #ffffff !important; 
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
    white-space: nowrap; 
}


.member-btn:hover,
.member-btn:active {
    background: linear-gradient(to bottom, #6a19bf 0%, #430b80 50%, #2a0454 100%) !important;
    transform: translateY(-1px);
    opacity: 1 !important; 
    box-shadow: 
        0 0 0 2px #2f055e,                  
        inset 0 0 0 1px #2f055e,              
        inset 0 0 6px 3px rgba(255, 255, 255, 0.65),
        0 4px 12px rgba(79, 13, 147, 0.35);
}

.member-btn:active {
    transform: translateY(1px);
}

/* =========================================================
   SP
========================================================= */
@media(max-width:789px){
    .member-card{
        width:calc(100% - 24rem);
        margin:20rem auto;
        border-width:3rem;
    }

    .member-card .horse-bg{
        left:-240rem;
        top:60rem;
        width:100%;
        height:100%;
        opacity:1;
    }

	.member-card .horse-bg3{
		right:-50rem;
		bottom:-90rem;
	}

	.member-card .horse-bg6{
	    left:-150rem;
	    bottom:0rem;
	}
	
	.member-card .horse-bg7{
	    left:-40rem;
	    bottom:20rem;
	}

    .member-content{
        padding:
            24rem
            18rem
            36rem;
    }
    .member-info{
        width:60%;
    }
    .info-row{
        margin-bottom:24rem;
    }
    .info-label{
        font-size:22rem;
        margin-bottom:10rem;
    }
    .info-box{
        min-height:50rem;
        font-size:22rem;
        padding:10rem;
    }
    /* point */
	.point-area{
	    width:60%;
	    flex-direction:column;
	    gap:24rem;
	    margin:10rem auto 0;
	}
	.point-box{
	    flex:none;
	    width:100%;
	}
    .point-label{
        font-size:20rem;
        margin-bottom:10rem;
    }
    .point-value{
        min-height:50rem;
        font-size:24rem;
    }

	/* user edit */
	.UserEditTable .Th,
	.UserEditTable .Td{font-size:30rem;}
	.UserEditTable .TableInput::placeholder{font-size:.85em;}

	/* mail address */
	.MailResetTable .Th {
		width:25%;
		font-size:28rem;
		font-weight: bold;
	}
	.MailResetTable .Td {
		font-size:26rem;
		font-weight: bold;
	}
	.TableInputMail {
		font-size:26rem;
	}
	.mail-label {
		font-size:26rem;
		font-weight: bold;
	}
	.mail-recp-label {
		font-size:26rem;
		font-weight: bold;
		padding: 150rem 0;
	}
	.mail-reset-btn {
		width: 500rem;
	}
	h3.domain-label {
		font-size:26rem;
		font-weight: bold;
	}

	div.domain-box，div.domain-box2{
		font-size:26rem;
		font-weight: bold;
	}
 	/* line */
    .member-line{
        margin:36rem 0;
    }
	.member-btn-area {
        gap: 8px;        
        padding: 10px;   
    }
    
    .member-btn,
    .member-btn:visited {
        height: 40px;  
        padding: 0 4px;   
        border-radius: 11px; 
        border: 1px solid #ffffff; 
        box-shadow: 
            0 0 0 1px #2f055e,        
            inset 0 0 0 1px #2f055e,  
            inset 0 0 3px 1px rgba(255, 255, 255, 0.6); 
        opacity: 1 !important;
    }
    
    .member-btn span {
        font-size: clamp(11px, 3.4vw, 13px); 
        letter-spacing: 0px; 
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); 
    }
    
    .member-btn:hover,
    .member-btn:active {
        background: linear-gradient(to bottom, #6a19bf 0%, #430b80 50%, #2a0454 100%) !important;
        opacity: 1 !important;
        box-shadow: 
            0 0 0 1px #2f055e,        
            inset 0 0 0 1px #2f055e,   
            inset 0 0 4px 2px rgba(255, 255, 255, 0.7);
    }
	.agree-text {
		font-size: 28rem;
	}
}
/* =========================================================
   PC
========================================================= */
@media(min-width:790px){
    .member-card{
        width:1000rem;
        margin:30rem auto;
    }

    .member-card .horse-bg{
        left:-340rem;
        top:50rem;
        width:100%;
        height:100%;
    }
 
    /* content */
    .member-content{
        padding:
            30rem
            60rem
            50rem;
    }
    /* info */
    .member-info{
        width:430rem;
    }
    .info-row{
        margin-bottom:24rem;
    }
    .info-label{
        font-size:24rem;
        margin-bottom:12rem;
    }
    .info-box{
        min-height:30rem;
        font-size:28rem;
        padding:10rem 20rem;
    }
    /* point */
    .point-area{
        gap:40rem;
        margin-top:50rem;
    }
    .point-label{
        font-size:22rem;
        margin-bottom:10rem;
    }
    .point-value{
        min-height:30rem;
        font-size:28rem;
    }    
	/* mail address */
	.MailResetTable .Th {
		width:20%;
		font-size:22rem;
		font-weight: bold;
	}
	.MailResetTable .Td {
		font-size:22rem;
		font-weight: bold;
	}
	.TableInputMail {
		font-size:22rem;
	}	
	.mail-label {
		font-size:22rem;
		font-weight: bold;
	}
	.mail-recp-label {
		font-size:22rem;
		font-weight: bold;
		padding: 150rem 0;
	}
	.mail-reset-btn {
		width: 350rem;
	}
	h3.domain-label {
		font-size:22rem;
		font-weight: bold;
	}

	div.domain-box，div.domain-box2 {
		font-size:22rem;
		font-weight: bold;
	}
    /* line */
    .member-line{
        margin:50rem 0 42rem;
    }
	.member-btn-area {
        max-width: 800px;  
        gap: 20px;         
        padding: 20px;
    }
    .member-btn {
        height: 80px;     
        padding: 0 20px;
    }
    .member-btn span {
        font-size: 24px;   
        letter-spacing: 2px; 
    }
	.agree-text {
		font-size: 19rem;
	}
}