
/**************************************
formContents
**************************************/
#formContents{}

#formContents input[type=text],
#formContents input[type=password],
#formContents input[type=tel],
#formContents input[type=email],
#formContents input[type=text],
#formContents input[type=number],
#formContents textarea{
  background: #FEF2F2;
}

/**************************************
ログインページ
**************************************/
.loginForm{
  display: block;
  margin: 0 auto;
  padding: 0 var(--contentsMargin);
  position: relative;
}

.loginFormWrap{
  display: block;
  width: 100%;
  margin: 0 auto;
}

.loginFormWrap .userLoginBox,
.loginFormWrap .userEntryBox{
  display: block;
  width: 100%;
  padding: 2rem 2rem 3rem;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,.16);
}

.loginFormWrap .userLoginBox{
  background: #FFFFFF;
  margin-bottom: 3rem;
}

.loginFormWrap .userEntryBox{
  background: #FFF8F4;
}

.loginFormWrap .userLoginBox > *:nth-last-child(1),
.loginFormWrap .userEntryBox > *:nth-last-child(1){
  margin-bottom: 0;
}


.loginForm .loginBoxTTL{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 1rem;
  width: 100%;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #E2E2E2;
  margin-bottom: 2rem;
}

.loginForm .loginBoxTTL > img{
  display: block;
  width: 3rem;
  height: auto;
}
.loginForm .loginBoxTTL > span{
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 2.163636363636364;
}

.loginForm .loginBoxTTL > a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  margin-top: 1rem;
  gap: 0 0.6rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: #484848;
  text-decoration: underline;
}
.loginForm .loginBoxTTL > a::after{
  content: '';
  display: block;
  width: 0.992rem;
  height: 0.496rem;
  background: url("../img/common/custom/arrow_link_under.svg") center center no-repeat;
  background-size: 100% auto;
}


.loginForm dl.loginFormBox{
  display: block;
  width: 100%;
}

.loginForm dl.loginFormBox:not(:nth-last-child(1)){
  margin-bottom: 3rem;
}

.loginForm dl.loginFormBox > dt{
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.644444444444444;
}

.loginForm dl.loginFormBox > dd.lede{
  margin-bottom: 2rem;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 1.714285714285714;
  text-align: left;
}

.loginForm dl.loginFormBox > dd.snsLoginBtns .m-socialLogin{
  display: block;
  margin: 0;
  padding: 0;
  background-color: transparent;
}

.loginForm dl.loginFormBox > dd.snsLoginBtns ul.m-socialLogin__list{
  display: block;
  margin: 0;
  padding: 0;
}

.loginForm dl.loginFormBox > dd.snsLoginBtns ul.m-socialLogin__list > li{
  display: block;
  width: 100%;
}

.loginForm dl.loginFormBox > dd.snsLoginBtns ul.m-socialLogin__list > li + li{
  margin-top: 1rem;
}

.loginForm .c-btn-socialLogin{
  height: 5rem;
  border-radius: 4px 14px 4px 14px;
}

.loginForm .c-btn-socialLogin.c-btn-socialLogin--amazon{
  border-radius: none;
}

#AmazonLoginCv2Button{height: 5rem!important;}


.loginForm .c-btn-socialLogin__button{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  padding: 0 0 0 1.2rem;
  gap: 0;
  transition: all 0.15s ease-in-out;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
}

.loginForm .c-btn-socialLogin__button > img{
  display: block;
  width: 2.4rem!important;
  height: auto!important;
  padding: 0!important;
  margin: 0!important;
  border: none!important;
}

.loginForm .c-btn-socialLogin__button-text{
  display: block;
  width: calc(100% - 2.4rem);
  text-align: center;
  margin: 0;
  background-color: transparent;
}

/*消し****************/
 #formContents.loginForm:not(.cart) .userEntryBox ul.m-socialLogin__list > li.guestEntry{display: none!important;}
 #formContents.loginForm .userLoginBox ul.m-socialLogin__list > li.guestEntry{display: none!important;}
 #formContents.loginForm .userLoginBox ul.m-socialLogin__list > li.newEntry{display: none!important;}

/*form****************/
.loginForm .inputForm{display: block;}

.loginForm .inputForm > dl{
  display: block;
}

.loginForm .inputForm > dl + dl{margin-top: 1.5rem;}

.loginForm .inputForm > dl > dt{
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.loginForm .inputForm .c-formInput-item{
  margin-top: 1rem;
  font-size: 1.4rem;
}

.loginForm .p-login-form__body-button{
  width: 100%;
  margin: 2rem auto 0;
}
.loginForm .p-login-form__body-button  .c-btn-progress{
  min-height: 5rem;
}

.loginForm .p-login-form__body-link{
  margin-top: 1.5rem;
  font-size: 1.4rem;
  font-weight: 500;
}

.loginForm .p-login-form__body-link{
  display: inline;
  padding: 0;
  background-color: transparent;
  border-radius: 0;
  border: none;
  color: #484848!important;
  font-size: 1.4rem;
  text-decoration: underline;
}


/******************/
.loginFormBox.snsLogin > dd.userValue{
  display: block;
  padding: 1.5rem 1.5rem;
  background: #FFFFFF;
  border-radius: 10px;
}
.loginFormBox.snsLogin > dd.userValue > ul{display: block;}
.loginFormBox.snsLogin > dd.userValue > ul > li{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.loginFormBox.snsLogin > dd.userValue > ul > li + li{margin-top: 1.9rem;}

.loginFormBox.snsLogin > dd.userValue > ul > li > img{
  display: block;
  width: 4.5rem;
  height: 4.5rem;
}

.loginFormBox.snsLogin > dd.userValue > ul > li > p{
  width: calc(100% - 5.5rem);
  font-size: 1.4rem;
  line-height: 1.6;
  text-align: left;
  font-weight: 500;
}

.loginFormBox.snsLogin > dd.userValue > ul > li > p > strong{
  font-weight: 500;
  color: #E60012;
}




/*******************/
#amazonCopyBtn{
  position: relative;
}

.amazonpay-button-container {
  display: grid;
  justify-items: stretch;
  min-height: 42px;
  min-width: 113px;
  max-width: 600px;
  height: 100%;
  width: 100%;
  touch-action: manipulation;
  max-height: 193px;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

.amazonpay-next-gen-button-container {
  min-height: 40px;
  min-width: 72px;
  max-width: 500px;
  max-height: 72px;
  height: 100%;
  width: 100%;
  touch-action: manipulation;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

.amazonpay-small-button-view1 {
  grid-row: 1/2;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-rows: 13% 13% 1fr 1fr 10% 16%;
  grid-template-columns: 10% 1fr 10%;
  justify-items: center;
  justify-self: stretch;
  align-self: stretch;
}

.amazonpay-next-gen-small-button-view1 {
  grid-row: 1/2;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-rows: 10% 10% 1fr 1fr 10% 10%;
  grid-template-columns: 10% 1fr 10%;
  justify-items: center;
  justify-self: stretch;
  align-self: stretch;
}

.amazonpay-custom-ngb-offset-button-view1 {
  grid-row: 1/2;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-rows: 10% 1fr 10%;
  grid-template-columns: 8% 1fr 8%;
  justify-items: center;
  justify-self: stretch;
  align-self: stretch;
}

.amazonpay-custom-button-container {
  display: grid;
  justify-items: stretch;
  height: 100%;
  width: 100%;
  touch-action: manipulation;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

.amazonpay-button-container-rows {
    grid-template-rows: 65% 10% 25%;
}

.amazonpay-custom-ngb-microtext-custom-button-container-grid {
  display: grid;
  grid-template-rows: 100%;
}

.amazonpay-custom-ngb-button-container-grid {
  display: grid;
  grid-template-rows: 70% 1fr 25%;
}

.amazonpay-custom-ngb-microtext-row {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
}
  
.amazonpay-button-container-rows-affirm {
  grid-template-rows: 60% 5% 35%;
}

.amazonpay-custom-button-container-rows {
    grid-template-rows: 100%;
}

.amazonpay-button-view1 {
  grid-row: 1/2;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-rows: 13% 13% 1fr 1fr 10% 16%;
  grid-template-columns: 4% 10% 6% 1fr 6% 10% 4%;
  justify-items: center;
  justify-self: stretch;
  align-self: stretch;
}

.amazonpay-next-gen-button-view1 {
  grid-row: 1/2;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-rows: 10% 10% 1fr 1fr 10% 10%;
  grid-template-columns: 4% 10% 6% 1fr 6% 10% 4%;
  justify-items: center;
  justify-self: stretch;
  align-self: stretch;
}

.amazonpay-custom-ngb-button-view1 {
  grid-row: 1/2;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-rows: 10% 1fr 10%;
  grid-template-columns: 5% 7% 4% 1fr 5% 7% 4%;
  justify-items: center;
  justify-self: stretch;
  align-self: stretch;
}

.amazonpay-next-gen-button-view {
  border-radius: 4px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 8% 1fr 8%;
  grid-template-rows: 10% 1fr 10%;
  justify-items: center;
  justify-self: stretch;
  align-self: stretch;
}

.amazonpay-next-gen-small-button-view {
  border-radius: 4px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 8% 1fr 8%;
  grid-template-rows: 13% 13% 1fr 1fr 10% 16%;
  justify-items: center;
  justify-self: stretch;
  align-self: stretch;
}

.amazonpay-psp-falcon-button-view {
  border-radius: 3px;
  border-width: 0px;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-rows: 10% 1fr 10%;
  grid-template-columns: 8% 1fr 8%;
  justify-items: center;
  justify-self: stretch;
  align-self: stretch;
}

.amazonpay-button-view1-gold {
  border-color: #a88734 #9c7e31 #846a29;
  background: linear-gradient(to bottom, #f7dfa5, #f0c14b);
}

.amazonpay-button-view1-gray {
  border-color: #ADB1B8 #A2A6AC #8D9096;
  background: linear-gradient(to bottom, #F7F8FA, #E7E9EC);
}

.amazonpay-button-view1-gray-custom-ngb {
  border-color: #ADB1B8 #A2A6AC #8D9096;
  background: #E3E6E6;
  border-style: none;
  border-width: 0px;
}

.amazonpay-button-view1-ink {
 border-color: #3d444c #2f353b #2c3137;
  background: linear-gradient(to bottom, #71777D, #444C54);
}

.amazonpay-button-view1-white {
 background: #ffffff !important;
}
.amazonpay-button-view1-white:hover {
    background: #F7FAFA !important;
}
.amazonpay-button-enabled {
  cursor: pointer;
}

.amazonpay-button-disabled {
  cursor: default;
  opacity: 0.25;
  filter: grayscale(100%);
}

.amazonpay-button-view1 .amazonpay-button-sandbox-logo {
  grid-row: 2/4;
  grid-column: 2/3;
}

.amazonpay-button-view1 .amazonpay-button-logo {
  grid-row: 3/6;
  grid-column: 4/5;
}

.amazonpay-next-gen-button-view1 .amazonpay-button-logo {
  grid-row: 3/6;
  grid-column: 4/5;
}

.amazonpay-custom-ngb-button-view1 .amazonpay-button-logo {
  grid-row: 2/3;
  grid-column: 4/5;
}

.amazonpay-small-button-view1 .amazonpay-button-logo-for-small-button {
  grid-row: 3/6;
  grid-column: 2/3;
}

.amazonpay-next-gen-small-button-view1 .amazonpay-button-logo-for-small-button {
  grid-row: 3/6;
  grid-column: 2/3;
}

.amazonpay-custom-ngb-offset-button-view1 .amazonpay-button-logo-for-small-button,
.amazonpay-custom-ngb-offset-button-view1 .amazonpay-button-logo {
  grid-row: 2/3;
  grid-column: 2/3;
}

.amazonpay-next-gen-button-view .amazonpay-button-logo {
  height: auto;
  width: auto;
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  justify-self: center;
  align-self: center;
}

.amazonpay-next-gen-button-view .amazonpay-button-chevrons {
  display: grid;
  grid-row: 2/3;
  grid-column: 2/4;
  place-items: center;
  justify-self: end;
  margin-right: 12px;
}

.amazonpay-next-gen-small-button-view .amazonpay-button-logo {
  height: auto;
  width: auto;
  grid-column: 2 / 3;
  grid-row: 3/6;
  justify-self: center;
  align-self: center;
}

.amazonpay-psp-falcon-button-view .amazonpay-button-logo {
  height: auto;
  width: auto;
  grid-column: 2/3;
  grid-row: 2/3;
  justify-self: center;
  align-self: center;
}

.amazonpay-cardboard-button-blue-tape {
    position: absolute;
    top: 0px;
    left: 0px;
}

.amazonpay-cardboard-button-blue-tape-large {
    height: 20px;
    width: 20px;
}

.amazonpay-cardboard-button-blue-tape-small {
    height: 16px;
    width: 16px;
}

.amazonpay-button-view1 .amazonpay-signin-button-sandbox-logo,
.amazonpay-button-view1 .amazonpay-donation-button-sandbox-logo {
  grid-row: 1/3;
  grid-column: 1/2;
}

.amazonpay-button-view1 .amazonpay-signin-button-logo,
.amazonpay-button-view1 .amazonpay-donation-button-logo {
  grid-row: 3/6;
  grid-column: 2/7;
}

.amazonpay-button-view1 .amazonpay-button-chevrons {
  grid-row: 3/5;
  grid-column: 6/7;
 }

.amazonpay-next-gen-button-view1 .amazonpay-button-chevrons {
  grid-row: 3/5;
  grid-column: 6/8;          
  justify-self: end;         
  margin-right: 12px;
 }

.amazonpay-custom-ngb-button-view1 .amazonpay-button-chevrons {
  grid-row: 2/3;
  grid-column: 6/7;          
  justify-self: end;         
 }

.amazonpay-button-view1-yellow {
    outline: none;
    border: 0px;
    border-style: none;
    border-width: 0px;
    background: #ffd814;
}
.amazonpay-button-view1-yellow:hover {
    background: #f7ca00;
}
.amazonpay-button-view1-squidink {
    background: #01222d;
    border-style: none;
    border-width: 0px;
}
.amazonpay-button-view1-squidink:hover {
    background: #01191f;
}
.amazonpay-next-gen-button:active {
    background: #f0b800;
}
.amazonpay-custom-ngb-button:active {
    background: #f0b800;
}
.amazonpay-button-view1-squidink:active {
    background: #010c0f;
}
.amazonpay-button-view1-cardboard {
    background: #dcb676;
}
.amazonpay-button-view1-cardboard:hover {
    background: #d4ac67;
}
.amazonpay-button-view1-cardboard:active {
    background: #c8a261;
}
.amazonpay-button-view1-gold:active {
  background: #f0c14b;
  outline: none;
  border-color: #e77600;
  box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
}
.amazonpay-button-view1-gray:active {
  background: #DCDFE3;
  outline: none;
  border-color: #e77600;
  box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
}
.amazonpay-button-view1-ink:active {
  background: #444C54;
  outline: none;
  border-color: #32373e #24282d #212429;
    box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
}

.amazonpay-button-view1-gold:focus {
  outline: none;
  border-color: #e77600;
  box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
}
.amazonpay-button-view1-gray:focus {
  outline: none;
  border-color: #e77600;
  box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
}
.amazonpay-button-view1-ink:focus {
  outline: none;
  border-color: #32373e #24282d #212429;
  box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
}

.amazonpay-button-view1-gold:hover {
  background: linear-gradient(to bottom, #f5d78e, #eeb933);
}
.amazonpay-button-view1-gray:hover {
  background: linear-gradient(to bottom, #E6E9EF, #D9DCE1);
}
.amazonpay-button-view1-ink:hover {
  background: linear-gradient(to bottom,  #64696F, #393F47);
}
.amazonpay-button-view1-white:hover {
  background: #F7FAFA !important;
}
.amazonpay-button-view2 {
  grid-row: 2/3;
}

.amazonpay-button-view3 {
  grid-row: 3/4;
  justify-items: center;
  justify-self: stretch;
  align-self: stretch;
}

.amazonpay-button-view1 .amazonpay-button-sandbox-logo img,
.amazonpay-button-view1 .amazonpay-signin-button-sandbox-logo img,
.amazonpay-button-view1 .amazonpay-donation-button-sandbox-logo img,
.amazonpay-button-view1 .amazonpay-button-logo img,
.amazonpay-next-gen-button-view1 .amazonpay-button-logo img,
.amazonpay-small-button-view1 .amazonpay-button-logo-for-small-button img,
.amazonpay-next-gen-small-button-view1 .amazonpay-button-logo-for-small-button img,
.amazonpay-button-view1 .amazonpay-signin-button-logo img,
.amazonpay-button-view1 .amazonpay-donation-button-logo img,
.amazonpay-button-view1 .amazonpay-button-chevrons img,
.amazonpay-next-gen-button-view1 .amazonpay-button-chevrons img,
.amazonpay-next-gen-button-view .amazonpay-button-logo img,
.amazonpay-next-gen-small-button-view .amazonpay-button-logo img,
.amazonpay-button-view3 .amazonpay-button-microtext img,
.amazonpay-custom-ngb-microtext-row .amazonpay-button-microtext img,
.amazonpay-custom-ngb-microtext img  {
  display: block;
  height: 100%;
  width: 100%;
  user-select: none;
  -webkit-touch-callout: none;
}

.amazonpay-button-view1 .amazonpay-button-sandbox-logo img,
.amazonpay-button-view1 .amazonpay-signin-button-sandbox-logo img,
.amazonpay-button-view1 .amazonpay-donation-button-sandbox-logo img,
.amazonpay-button-view1 .amazonpay-button-logo img,
.amazonpay-custom-ngb-button-view1 .amazonpay-button-logo img,
.amazonpay-small-button-view1 .amazonpay-button-logo-for-small-button img,
.amazonpay-custom-ngb-offset-button-view1 .amazonpay-button-logo-for-small-button img,
.amazonpay-custom-ngb-offset-button-view1 .amazonpay-button-logo img,
.amazonpay-button-view1 .amazonpay-signin-button-logo img,
.amazonpay-button-view1 .amazonpay-donation-button-logo img,
.amazonpay-button-view1 .amazonpay-button-chevrons img,
.amazonpay-custom-ngb-button-view1 .amazonpay-button-chevrons img,
.amazonpay-custom-ngb-button-view .amazonpay-button-logo img,
.amazonpay-custom-ngb-small-button-view .amazonpay-button-logo img,
.amazonpay-button-view3 .amazonpay-button-microtext img, 
.amazonpay-custom-ngb-microtext-row .amazonpay-button-microtext img {
  display: block;
  height: 100%;
  width: 100%;
  user-select: none;
  -webkit-touch-callout: none;
}

.amazonpay-button-view1 .amazonpay-button-sandbox-logo img,
.amazonpay-button-view1 .amazonpay-signin-button-sandbox-logo img,
.amazonpay-button-view1 .amazonpay-donation-button-sandbox-logo img,
.amazonpay-button-view1 .amazonpay-button-logo img,
.amazonpay-next-gen-button-view1 .amazonpay-button-logo img,
.amazonpay-small-button-view1 .amazonpay-button-logo-for-small-button img,
.amazonpay-next-gen-small-button-view1 .amazonpay-button-logo-for-small-button img,
.amazonpay-button-view1 .amazonpay-signin-button-logo img,
.amazonpay-button-view1 .amazonpay-donation-button-logo img,
.amazonpay-next-gen-button-view1 .amazonpay-button-chevrons img,
.amazonpay-button-view1 .amazonpay-button-chevrons img  {
  object-fit: contain;
}

.amazonpay-button-view1 .amazonpay-button-sandbox-logo img,
.amazonpay-button-view1 .amazonpay-signin-button-sandbox-logo img,
.amazonpay-button-view1 .amazonpay-donation-button-sandbox-logo img,
.amazonpay-button-view1 .amazonpay-button-logo img,
.amazonpay-custom-ngb-button-view1 .amazonpay-button-logo img,
.amazonpay-small-button-view1 .amazonpay-button-logo-for-small-button img,
.amazonpay-custom-ngb-offset-button-view1 .amazonpay-button-logo-for-small-button img,
.amazonpay-custom-ngb-offset-button-view1 .amazonpay-button-logo img,
.amazonpay-button-view1 .amazonpay-signin-button-logo img,
.amazonpay-button-view1 .amazonpay-donation-button-logo img,
.amazonpay-custom-ngb-button-view1 .amazonpay-button-chevrons img,
.amazonpay-button-view1 .amazonpay-button-chevrons img  {
  object-fit: contain;
}

.amazonpay-button-view3 .amazonpay-button-microtext img,
.amazonpay-custom-ngb-microtext-row .amazonpay-button-microtext img {
  object-fit: contain;
}

.amazonpay-psp-falcon-button-view .amazonpay-button-logo img {
  display: block;
  height: 90%;
  width: 90%;
  justify-self: center;
  align-self: center;
  user-select: none;
  -webkit-touch-callout: none;
}

.animate-chevron .amazonpay-button-chevrons{
  -webkit-animation: slide 2s ease-out;
  -webkit-animation-direction: running;
  -webkit-animation-iteration-count: 3;
  -webkit-animation-delay: 0.5s;
  animation: slide 2s ease-out;
  animation-direction: running;
  animation-iteration-count: 3;
  animation-delay: 0.5s;
 }

@keyframes slide {
  from {
    grid-column: 5/6;
    opacity: 1; 
  }
  10% {
    opacity: 0.5;
  }
  25% {
    opacity: 0.1; 
  }
  50% {
    grid-column: 5/7;
    opacity: 1;
  }
  60% {
    opacity:0.5
  }
  75% {
    opacity: 0.1; 
  }
  to {
    grid-column: 6/7; 
    opacity: 1;
  }
}

  div[class^='ala-'] {
    text-align: center;
  }

  .ala-xs span, 
  .ala-sm span, 
  .ala-md span, 
  .ala-lg span,
  .ala-xl span {
    display: inline-block; 
    font-family: "Amazon Ember", Arial, sans-serif; 
    font-weight: bold;
    text-align: center;
  }

  .ala-xs span {
    font-size: 8px;
  }
  .ala-sm span {
    font-size: 10px;
  }
  .ala-md span {
    font-size: 11px;
  }
  .ala-lg span {
    font-size: 12px;
  }
  .ala-xl span {
    font-size: 14px;
  }

  .ala-xs img.affirm-logo, 
  .ala-sm img.affirm-logo, 
  .ala-md img.affirm-logo,
  .ala-lg img.affirm-logo,
  .ala-xl img.affirm-logo {
    display: inline;
  }

  .ala-xs img.affirm-logo {
    height: 10.5px;
    margin-left: 2px;
    margin-right: 2px;
  }
  .ala-sm img.affirm-logo {
    height: 12px;
    margin-left: 2px;
    margin-right: 4px;
  }
  .ala-md img.affirm-logo {
    height: 14px;
    margin-left: 2px;
    margin-right: 4px;
  }
  .ala-lg img.affirm-logo {
    height: 14px;
    margin-left: 2px;
    margin-right: 4px;
  }
  .ala-xl img.affirm-logo {
    height: 16px;
    margin-left: 4px;
    margin-right: 8px;
    transform: translateY(1%);
  }
  
  .ala-xs img.info-button, 
  .ala-sm img.info-button, 
  .ala-md img.info-button,
  .ala-lg img.info-button,
  .ala-xl img.info-button {
    display: inline;
  }

  .ala-xs img.info-button{
    height: 8px;
    transform: translateY(5%);
  }
  .ala-sm img.info-button{
    height: 10px;
    transform: translateY(8%);
  }
  .ala-md img.info-button{
    height: 10px;
     transform: translateY(5%);
  }
  .ala-lg img.info-button {
    height: 10px;
    transform: translateY(5%);
  }
  .ala-xl img.info-button {
     height: 12px;
    transform: translateY(5%);
  }
  
.promo-button {
    align-items: center;
    justify-content: center;
    font-family: "Amazon Ember", Arial, sans-serif;
    font-weight: bold;
    text-align: center;
}

.promo-xs {
    font-size: 8px;
}

.promo-sm {
    font-size: 10px;
}

.promo-md {
    font-size: 11px;
}

.promo-lg {
    font-size: 12px;
}

.promo-xl {
    font-size: 14px;
}

.promo-button .promo-image {
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle;
}

.promo-xs .promo-image {
    height: 10.5px;
}

.promo-sm .promo-image {
    height: 12px;
}

.promo-md .promo-image {
    height: 14px;
}

.promo-lg .promo-image {
    height: 14px;
}

.promo-xl .promo-image {
    height: 16px;
    transform: translateY(1%);
}

.promo-button .info-button {
    display: inline-block;
    height: 8px;
    margin-left: 4px;
    cursor: pointer;
    vertical-align: middle;
}

.promo-sm .info-button {
    height: 10px;
    transform: translateY(8%);
}

.promo-md .info-button {
    height: 10px;
    transform: translateY(5%);
}

.promo-lg .info-button {
    height: 10px;
    transform: translateY(5%);
}

.promo-xl .info-button {
    height: 12px;
    transform: translateY(5%);
}

/* Active States */
.amazonpay-custom-ngb-button-view1-gold:active {
  background: #f0c14b;
  outline: none;
  border-color: #e77600;
  box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
}

.amazonpay-custom-ngb-button-view1-gray:active {
  background: #DCDFE3;
  outline: none;
  border-color: #e77600;
  box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
}

.amazonpay-custom-ngb-button-view1-ink:active {
  background: #444C54;
  outline: none;
  border-color: #32373e #24282d #212429;
  box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
}

.amazonpay-custom-ngb-button-view1-yellow:active {
  background: #f0b800;
}

.amazonpay-custom-ngb-button-view1-squidink:active {
  background: #010c0f;
}

.amazonpay-custom-ngb-button-view1-cardboard:active {
  background: #c8a261;
}

/* Focus States */
.amazonpay-custom-ngb-button-view1-gold:focus {
  outline: none;
  border-color: #e77600;
  box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
}

.amazonpay-custom-ngb-button-view1-gray:focus {
  outline: none;
  border-color: #e77600;
  box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
}

.amazonpay-custom-ngb-button-view1-ink:focus {
  outline: none;
  border-color: #32373e #24282d #212429;
  box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
}

/* Hover States */
.amazonpay-custom-ngb-button-view1-gold:hover {
  background: linear-gradient(to bottom, #f5d78e, #eeb933);
}

.amazonpay-custom-ngb-button-view1-gray:hover {
  background: linear-gradient(to bottom, #E6E9EF, #D9DCE1);
}

.amazonpay-custom-ngb-button-view1-gray-custom-ngb:hover {
  background: #D8DCDC;
}

.amazonpay-custom-ngb-button-view1-ink:hover {
  background: linear-gradient(to bottom, #64696F, #393F47);
}

.amazonpay-custom-ngb-button-view1-white:hover {
  background: #F7FAFA !important;
}

.amazonpay-custom-ngb-button-view1-yellow:hover {
  background: #f7ca00;
}

.amazonpay-custom-ngb-button-view1-squidink:hover {
  background: #01191f;
}

.amazonpay-custom-ngb-button-view1-cardboard:hover {
  background: #d4ac67;
}

/* Generic focus style for all custom NGB buttons */
.amazonpay-custom-ngb-button:focus {
  outline: none;
  border-color: #e77600;
  box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
}

/* Color-specific focus styles */
.amazonpay-custom-ngb-button.amazonpay-button-view1-gold:focus {
  outline: none;
  border-color: #e77600;
  box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
}

.amazonpay-custom-ngb-button.amazonpay-button-view1-gray:focus {
  outline: none;
  border-color: #e77600;
  box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
}

.amazonpay-custom-ngb-button.amazonpay-button-view1-gray-custom-ngb:focus {
  outline: none;
  border-color: #e77600;
  box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
}

.amazonpay-custom-ngb-button.amazonpay-button-view1-ink:focus {
  outline: none;
  border-color: #32373e;
  box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
}

.amazonpay-custom-ngb-button.amazonpay-button-view1-yellow:focus {
  outline: none;
  border-color: #e77600;
  box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
}

.amazonpay-custom-ngb-button.amazonpay-button-view1-squidink:focus {
  outline: none;
  border-color: #32373e;
  box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
}

.amazonpay-custom-ngb-button.amazonpay-button-view1-cardboard:focus {
  outline: none;
  border-color: #e77600;
  box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
}

.amazonpay-custom-ngb-button.amazonpay-button-view1-white:focus {
  outline: none;
  border-color: #e77600;
  box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
}

/* Target the button view1 element directly as well for completeness */
.amazonpay-custom-ngb-button-view1:focus {
  outline: none;
  border-color: #e77600;
  box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5);
}


