@charset "UTF-8";
/*
* Don't Delete
* Login Common - Change as needed
*/
.custom-login {
  /*background: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)), url(../../img/footer.jpg);*/
  background-size:cover;
  background-repeat: no-repeat;
  background-position: bottom;
  background-attachment: fixed;
}
/*
* Don't Delete
* Register Common - Change as needed
*/
.costom-register {
  max-width: 1024px;
  margin-top: 4.5rem;
}
.costom-register h2 {
  font-size: 1.25rem;
  margin-bottom: 15px;
}
.badge-require {
  border: 1px solid #ea0000;
  color: #ea0000;
  background-color: #fff;
}
.badge-optional {
  border: 1px solid #00bcff;
  color: #00bcff;
  background-color: #fff;
}

/*
* Don't Delete - Change as needed
* StepBar Common
*/
.stepBar {
  display: flex;
  max-width: 100%;
  position: relative;
  margin: 20px auto;
  text-align: center;
  padding-left: 0;
}
.stepBar li {
  font-size: 12px;
  list-style: none;
  position: relative;
  width: 33.333%;
}
.stepBar li:after {
  background: rgba(0, 0, 0, 0.3);
  content: "";
  width: calc(100% - 30px);
  height: 2px;
  position: absolute;
  left: calc(-50% + 15px);
  top: 14px;
}
.stepBar li:first-child:after {
  display: none;
}
.stepBar li span {
  height: 30px;
  width: 30px;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  display: inline-block;
  margin-bottom: 5px;
  line-height: 40px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.stepBar .visited:after, .stepBar .visited span {
  background: rgba(32, 168, 216, 1);
}

/*
* Don't Delete - Change as needed
* RadioButton Button Style
*/
.form-check-btn {
  margin-right: 0;
}
.form-check-btn input[type="radio"],
.form-check-btn input[type="checkbox"] {
  display: none;
}
.form-check-btn input[type="radio"]:checked + label,
.form-check-btn input[type="checkbox"]:checked + label { 
  background-color: #f174b6;
  color: #fff;
}
.form-check-btn .aspNetDisabled + label,
.form-check-btn .aspNetDisabled + label:active {
  color: #f174b6!important;
  background-color: transparent!important;
  opacity: 0.65!important;
  cursor:not-allowed;
}

/*credit list- delete btn style*/
.position-badge-credit {
  position:absolute!important;
  top: -5px!important;
  right: -6px!important;
}
.position-badge-credit i {
  font-size: 15px;
}

/*
* Common Style
*/
/* Blink Common */
.blinking{
  -webkit-animation:blink 1.5s ease-in-out infinite alternate;
  -moz-animation:blink 1.5s ease-in-out infinite alternate;
  animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
  0% {opacity:0;}
  80% {opacity:1;}
  100% {opacity:1;}
}
@-moz-keyframes blink{
  0% {opacity:0;}
  80% {opacity:1;}
  100% {opacity:1;}
}
@keyframes blink{
  0% {opacity:0;}
  80% {opacity:1;}
  100% {opacity:1;}
}
.border-hover {
 border-bottom: solid 2px #d4d4d4 ;
}
.border-hover:hover{
 border-bottom: solid 2px #167495;
}

.custom-bg{
  background-color: #242244;
  color: #fff;
}

/*welfare*/
.g-w350 {
    max-width: 350px;
}

.welfare-item-title{
  background-color: #101d49d4!important; 
  width: 90%; 
  margin-right: 0; 
  margin-left: auto; 
  border-radius: 2px; 
  padding-right: 0; 
  padding-left: 0.9375rem; 
  padding-top: 0.3125rem; 
  padding-bottom: 0.3125rem; 
  top: -30%; 
  transform: translateY(5%);
}
.custom-svg-icon{
  width:14px;
  vertical-align: baseline !important;
  stroke:#fff;
}
/*タイトルの背景色*/
.ttl-bg-bronze {
  background: #b16321; /* fallback for old browsers */
  background: -webkit-linear-gradient(45deg, #b16321 0%, #a96b1f 45%, #ce8224 70%, #e0982b 85%, #ea9310 90% 100%);
  background: linear-gradient(45deg, #b16321 0%, #a96b1f 45%, #ce8224 70%, #e0982b 85%, #ea9310 90% 100%);
}
.ttl-bg-shilver {
  background: #757575; /* fallback for old browsers */
  background: -webkit-linear-gradient(45deg, #757575  0%, #9E9E9E  45%, #E8E8E8  70%, #9E9E9E  85%, #757575 90% 100%);
  background: linear-gradient(45deg, #757575  0%, #9E9E9E  45%, #E8E8E8  70%, #9E9E9E  85%, #757575 90% 100%);
}
.ttl-bg-gold {
  background: #B67B03; /* fallback for old browsers */
  background: -webkit-linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #f1d05f 70%, #DAAF08 85%, #eabd0c 90% 100%);
  background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #f1d05f 70%, #DAAF08 85%, #eabd0c 90% 100%);
}
.ttl-bg-ruby{
  background: #dd1818;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #dd1818, #333333);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #dd1818, #333333); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.ttl-bg-sapphire{
  background: #1830dd;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #1830dd, #30364e);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #1830dd, #30364e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.ttl-bg-emerald{
  background: #18dd39;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #18dd39, #0c3c1d);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #18dd39, #0c3c1d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.ttl-bg-pearl{
  background: #ffefba; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #ffefba, #ffffff); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #ffefba, #ffffff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.pearl-icon{
  color: #e6eded;
  background: -webkit-linear-gradient(0deg, #e6eded, #fd8fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ttl-bg-diamond{
  background: #00e7ff;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #00e7ff, #067167);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #00e7ff, #067167); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.ttl-bg-whitediamond {
  background: #c5c5c5; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #c5c5c5, #ffffff); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #c5c5c5, #ffffff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.ttl-bg-blackdiamond {
  background: #000; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #000, #bfb3b3); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #000, #bfb3b3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.ttl-bg-goldenempress {
  background: #B67B03; /* fallback for old browsers */
  background: -webkit-linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #f1d05f 70%, #DAAF08 85%, #eabd0c 90% 100%);
  background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #f1d05f 70%, #DAAF08 85%, #eabd0c 90% 100%);
}
.unread-border{
  border-left-width: 5px!important;
  border-left-color: #c31432 !important;
}

.custom-pale-bgc-blue {
  background-color: #6CA5C3;
}
.custom-pale-bgc-green {
  background-color: #52B2AE;
}
.custom-pale-bgc-khaki{
  background-color: #99B5B1;
}
.not-shipping-month{
  color:#d2d2d2;
}

/*愛用者用CSS追加*/
.text-custom-favorite-done{
  color: #66cdaa;
}
.text-custom-favorite-still{
  color: #fd7602;
}

/*アクティブ会員*/
.text-running{
  color: #4169e1;

}

.sidebar .nav-dropdown.open>.nav-dropdown-items>.nav-item>.nav-link {
    /*background-color: #fff;*/
    text-indent: 0.05em;
}

@media (min-width: 1200px){
  .py-4_5{
    padding: 2.5rem 0;
  }
}
.pc_area{
  display:block;
}
.phone_area{
  display:none;
}

@media screen and (max-width:768px){
  .pc_area{
    display:none;
  }
  .phone_area{
    display:block;
  }
}
/*@media screen and (mini-width:768px){
pc_area{
  display:block;
}
phone_area{
  display:none;
}
}*/


.app-header .navbar-brand {
  width: auto !important;
}
@media screen and (max-width:992px) {
  .app-header .navbar-brand {
    width: auto !important;
    margin-left: -80px !important;
  }
}

/*bootstrap*/
body{
  background-color: #fdeff5!important;
}
.app-header{
  height: 87.5px;
}
.btn-primary{
  color: #fff!important;
}
.btn-secondary{
  color: #fff!important;
}
.btn-outline-primary:hover {
  color: #fff !important;
}
.text-secondary{
  color: #2fcd74!important;
}
.alert-danger {
    color: #d93838;
    background-color: #ffc9c8;
    border-color: #fdd6d6;
}
/*EC*/
.custom-blue-btn {
  background-color: #6CA5C3;
}
.custom-blue-btn:hover {
  background-color: #55a9d6;
}
.custom-green-btn {
  background-color: #52B2AE;
}
.custom-green-btn:hover {
  background-color: #0dc3bc;
}
.custom-carousel-wrap{
  background: #242244;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #242244, #8282d2, #242244);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #242244, #8282d2, #242244); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  text-align: center;
  padding: 24px;
}
@media (max-width: 768px) {
  .custom-carousel-wrap{
  padding: 0;
}
}
.custom-carousel-img{
  width:75%;
  margin: auto;
}
@media (max-width: 768px) {
  .custom-carousel-img {
	width:100%;
}
}

.section-wrap{
  padding:24px 0;
}
.section-concept{
  /*background-color:#ecf6ff;
  background-image: url(../../img/bg-texture.jpg);*/
  background: #242244;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #242244, #8282d2, #242244);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #242244, #8282d2, #242244 ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.section-products{
  /*background-color:#c7fbe0;
  background-image: url(../../img/bg-texture.jpg);*/
  background: #242244;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #242244, #8282d2, #242244);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #242244, #8282d2, #242244 ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.section-buy{
  /*background-color:#ffefb4;
  background-image: url(../../img/bg-texture.jpg);*/
  background: #242244;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #242244, #8282d2, #242244);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #242244, #8282d2, #242244); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.section-contents{
  width: 95%;
  margin: auto;
  background-color:#fff;
  padding: 48px 0;
}

.main-visual{
  height: 80vh;
  background-image: url(../../img/top1-1.jpg);
  background-size: cover;
}


.product-select-item{
    width: 45%;
  }
@media (max-width: 768px){
  .product-select-item{
    width: 100%;
    margin-bottom: 48px;
  }
}


.product-select-img-wrap{
  max-width:250px;
  width: 90vw;
  margin: 0 auto;
}
.product-select-img{
  width: 65%;
  min-width: 300px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 768px) {
  .product-select-img{
  width: 50%;
  max-width: 300px;
}
}
.product-select-qty{
    width: 100%;
    max-width: initial;
}
@media (max-width: 768px){
  .product-select-qty{
    
  }
}
.price-item{
  width: 30%;
  margin: 0 auto;
  text-align: center; 
}
@media (max-width: 768px){
  .price-item{
    width: 100%;
    text-align: center; 
  }
}
.concept-paragraph{
  font-family: serif;
  font-style: italic;
  font-size: 20px;
  letter-spacing: 0.08em;
}
@media (max-width: 768px) {
  .concept-paragraph{
  font-size: 18px;
}
}
.concept-item-wrap{
  max-width: 300px;
  width: 30%;
}
@media (max-width: 768px) {
  .concept-item-wrap{
  width:100%;
  max-width:100%;
}
}
.concept-item-bg-blue{
  background: #000046;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1CB5E0, #000046);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1CB5E0, #000046); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.concept-item-bg-pink{
  background: #FBD3E9;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #BB377D, #FBD3E9);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #BB377D, #FBD3E9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.concept-item-bg-green{
 background: #11998e;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #38ef7d, #11998e);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #38ef7d, #11998e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.concept-label{
  width:70%;
  font-style: italic;
  font-family: serif;
}
@media (max-width: 768px){
  .concept-label{
    width: 100%;
    margin: 24px 0;
  }
}
.concept-label-r{
  bottom: 20px;
  left: 40%;
  letter-spacing: 0.09em;
  min-width: 450px;
  position: absolute;
} 
@media (max-width: 768px){
  .concept-label-r{
    width: 75%;
    position: static;
    min-width: inherit;
    display:block;
    margin: auto;
  }
}

.product-img{
  width: 35%;
  margin-right: 5%;
  max-width: 350px;
}
@media (max-width: 768px){
  .product-img{
  width: 100%;
  max-width: 300px;
  margin : 0 auto;
  margin-bottom:24px;
}
}


.product-ingo-title {
display: inline-block;
position: relative;
height: 50px;
line-height: 50px;
vertical-align: middle;
text-align: center;
padding: 0 100px;
font-size: 24px;
background: #242244;
letter-spacing: 0.3em;
color: #fff;
box-sizing: border-box;
font-family: serif;
}
@media (max-width: 768px) {
  .product-ingo-title{
    left: 50%;
    transform: translateX(-50%);
    padding: 0 40px;
  }
}

.product-ingo-title:before, .product-ingo-title:after{
position: absolute;
content: '';
width: 0px;
height: 0px;
z-index: 1;
}

.product-ingo-title:before{
top: 0;
left: 0;
border-width: 25px 0px 25px 15px;
border-color: transparent transparent transparent #fff;
border-style: solid;
}

.product-ingo-title:after{
top: 0;
right: 0;
border-width: 25px 15px 25px 0px;
border-color: transparent #fff transparent transparent;
border-style: solid;
}

.product-paragraph{
  width: 60%;
}
@media (max-width: 768px){
  .product-paragraph{
  width: 100%;
}
}
.product-contain-detail{
  padding-left:0.75rem;
}
@media (max-width: 768px){
  .product-contain-detail{
  padding:0 0.75rem;
}
}
.otokupoint-wrap{
  padding:12px 0;
  border-top: solid 4px #ff0000;
  border-bottom: solid 4px #ff0000;
}


#sectionPricePanel{
  position: fixed;
  width: 100%;
  /*max-width: 994px;*/
  z-index: 100;
  top:55px;
  left: 50%;
  transform: translateX(-50%);
}
#sectionProductSelect{
  margin-top: 64px;
}
@media (max-width: 768px){
    #sectionProductSelect{
    margin-top: 96px;
  }
}
.otoku-example-img-wrap{
  
}
@media (max-width: 768px){
  .otoku-example-img-wrap{
  text-align: center;
  width: 100%; 
}
}
.otoku-example-img{
  width: 200px;
}
@media (max-width: 768px){
   .otoku-example-img{
    width: 50%;
    margin: auto; 
    min-width: 200px;
  }
}
.otoku-normal{
  font-size: 1.25rem;
}

@media (max-width: 768px){
  .otoku-normal{
  font-size: 16px;
}
  }

.otoku-auto{
  font-size: 2rem;
}
@media (max-width: 768px) {
  .otoku-auto {
    font-size: 20px;
  }
}

.otoku-month-font-size{
  font-size: 64px;
}
@media (max-width: 768px){
  .otoku-month-font-size {
    font-size: 25px;
  }
}
.otoku-year-font-size{
  font-size: 96px;
}
@media (max-width: 768px){
  .otoku-year-font-size {
    font-size: 30px;
  }
}
.confirm-select-img{
  max-width: 150px;
}
@media (max-width: 768px){
    .confirm-select-img{
      max-width: 40vw;
    }
}

.svg-title{
  fill:none;
  stroke:transparent;
  stroke-width:2px;
}
.svg-title2{
  fill:none;
  stroke:transparent;
  stroke-width:2px;
}
.svg-title3{
  fill:none;
  stroke:transparent;
  stroke-width:2px;
}
.path {
fill: none; /*塗り*/
stroke: #acacac; /*線の色*/
stroke-dasharray: 2000;/*線の間隔*/
stroke-dashoffset: 0;/*線の開始位置*/
stroke-width: 1;/*線の太さ*/
animation: write 3s ease-in forwards;
-webkit-animation: write 3s ease-in forwards;
}

@keyframes write {
0% {
stroke-dashoffset: 2000;
fill:transparent;
}
50% {
fill:transparent;
}
100% {
stroke-dashoffset: 0;
fill:#acacac;
}
}


.svg-size{
  width: 100%;
  height: 80px;
}
@media (max-width: 768px) {
  .svg-size{
  width: 100%;
  height: 45px;
}
}
.svg-size2{
  width: 100%;
  height: 80px;
}
@media (max-width: 768px) {
  .svg-size2{
  width: 100%;
  height: 45px;
}
}
.svg-size3{
  width: 100%;
  height: 80px;
}
@media (max-width: 768px) {
  .svg-size3{
  width: 100%;
  height: 45px;
}
}

.svg-subtitle{
  font-family: serif;
  font-size:20px;
}
@media (max-width: 768px){
  .svg-subtitle{
  font-size:16px;
}
}
.custom-bg-gold{
   background: #B67B03; /* fallback for old browsers */
  background: -webkit-linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #d9ba4e 70%, #DAAF08 85%, #eabd0c 90% 100%);
  background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #d9ba4e 70%, #DAAF08 85%, #eabd0c 90% 100%);
}
.custom-bg-ticket{
  background: #000428; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #000428, #004e92); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #000428, #004e92); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.custom-bg-nomal{
  background: #75DB85; 
}

.custom-text-nomal{
  color: #75DB85;
}

.custom-bg-fairy{
  background: #DB7FB6; 
}

.custom-text-fairy{
  color: #DB7FB6;
}

.custom-bg-royal {
  background: #7B9CDC;
}

.custom-text-royal{
  color: #7B9CDC;
}



.custom-bg-silver{
  background: #F2F2F2;  /* fallback for old browsers */
  background: -webkit-linear-gradient(0deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #8F8F8F, #B8B8B8, #F2F2F2, #8F8F8F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.custom-text-silver{
  color: #B8B8B8;
  background: -webkit-linear-gradient(0deg, #757575 0%, #9E9E9E 45%, #cbcbcb 65%, #9E9E9E 75%, #757575 90% 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.custom-bg-hige{
  background: #2E2E2E;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #2E2E2E, #575656, #8E8D8D, #2E2E2E);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #2E2E2E, #575656, #8E8D8D, #2E2E2E); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.custom-text-hige {
  color: #603813;
  background: -webkit-linear-gradient(0deg, #b29f94, #603813);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

.custom-bg-king{
  background: #BE2A2A;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #910B0B, #BE2A2A, #DE4D4D, #910B0B);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #910B0B, #BE2A2A, #DE4D4D, #910B0B); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.custom-text-king {
  color: #BE2A2A;
  background: -webkit-linear-gradient(0deg, #910B0B, #BE2A2A, #DE4D4D, #910B0B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.custom-bg-gold{
background: rgba(172,141,55,1);
background: linear-gradient(90deg, #B67B03 0%, #DAAF08 45%, #d9ba4e 70%, #DAAF08 85%, #B67B03 90% 100%);
  /*background: #ffffff;*/  /* fallback for old browsers */
  /*background: -webkit-linear-gradient(to right, #A1822E, #A1822E, #CFAF57, #E3C46E, #A1822E);*/  /* Chrome 10-25, Safari 5.1-6 */
  /*background: linear-gradient(to right, #A1822E, #A1822E, #CFAF57, #E3C46E, #A1822E);*/ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.custom-text-gold {
  color: rgba(172,141,55,1);
  background: -webkit-linear-gradient(0deg,  #B67B03 0%, #DAAF08 45%, #f7d767 65%, #DAAF08 70%, #B67B03 80% 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.custom-bg-emperor{
  background: #6441A5;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #6441A5, #2a0845);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #6441A5, #2a0845); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.custom-bg-youme{
  background: rgb(83,255,152);
  background: linear-gradient(45deg, rgb(87 255 173) 10%, rgba(82, 218, 206) 30%, rgb(164 153 218) 52%, rgb(255 84 195) 90%);
  color: #fff;
}

.custom-bg-lightpink{
  background: #ffe2f2;
}

.custom-text-fc {
  color: rgb(195, 103, 255);
}

.custom-text-light {
  color: rgb(239, 187, 0);
}

.custom-text-water {
  color: rgb(0, 75, 221);
}

.custom-text-beginner {
  color: rgb(20, 175, 89);
}

.custom-text-nonactive {
  color: rgb(48, 48, 48);
}

/*契約者マイページ*/
.mypage-menu {
  width: 100%; 
  max-width: 1060px;
}
.main-card-shadow {
  box-shadow: 2px 3px 5px 0px rgba(0, 0, 0, 0.2);
}
.card {
  border:none;
}
/* フォント */
.font-size-12 {
    font-size: 12px;
}

.font-size-14 {
    font-size: 14px;
}

.font-size-18 {
    font-size: 18px;
}

.font-size-20 {
    font-size: 20px;
}

.font-size-24 {
    font-size: 24px !important;
}

@media screen and (max-width: 575px) {
     .font-size-sm-10{
       font-size: 10px!important;
     }
     .font-size-sm-12{
       font-size: 12px!important;
     }
     .font-size-sm-14 {
       font-size: 14px!important;
     }
     .font-size-sm-16 {
       font-size: 16px!important;
     }
     .font-size-sm-18 {
     font-size: 18px!important;
}
    .font-size-sm-20{
        font-size: 20px!important;
    }
    .font-size-sm-24 {
    font-size: 24px !important;
}
    .font-size-sm-28{
        font-size: 28px!important;
    }
}

.dropdown-icon-contract
 {
  position:absolute;
  top:50%;
  right:5%;
  transform: translate(0, -50%);
  transition:.3s;
}
.dropdown-icon-contract.open
 {
  transform: translate(0, -50%) rotate(90deg);
}


/* カスタムカラー */
.custom-bg-lightblue {
  background-color: #e5edf2;
}
.custom-bg-lightyellow {
  background: #FFF3CD !important;
}


/*下部メニュー*/

.under-menu-wrapper {
  height:calc(((100vw - 200px - 144px) / 4 ) * 0.66);
}
@media screen and (max-width:991px) {
  .under-menu-wrapper {
    height:calc(30.34vw - 40px);
  }
}
@media screen and (max-width:575px) {
  .under-menu-wrapper {
    height: calc(44.8vw - 40px);
  }
}
@media screen and (min-width:1060px) {
  .under-menu-wrapper {
    max-height:185px;
  }
  .menu-icon {
    font-size:55.7px;
  }
}
.bg-menu {
  background: rgb(3,145,173);
  background: linear-gradient(0deg, rgba(3,145,173,1) 0%, rgba(3,159,191,1) 5%, rgba(3,184,223,1) 100%);
}

.text-menu{
  color: #4B4B4B !important;
}

.menu-title {
  /*font-weight: bold;*/
  letter-spacing: 0.1rem;
  /*margin-top: 0.5em;*/
}

.menu-icon {
  /*height:60px;
  font-size:60px;*/
}

.under-menu {
  position: relative;
  /*box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);*/
  transition: 0.2S;
  border-bottom: 3px solid #ba5088;
}
.under-menu:hover {
  /*box-shadow: 2px 4px 8px 0px gray; 
  transform: translate(0, -5px);
  background: #e1e1e1 !important;*/
  margin-top: 2px;
  border-bottom: 1px solid #ba5088;
  /*box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.4);*/

}

.form-control.is-invalid {
  background-image:none;
}

/*認証コード*/
.custom-authcode-item {
  /*width: 70px !important;
  height: 70px !important;*/
  margin: 0 12px;
  border-radius: 12px;
  font-size: 24px;
  text-align: center;
  background-color: #e4f2f7;
  box-shadow: 2px 2px 3px #d8d8d8 inset;
  border: none;
}
@media (max-width: 1199px) {
  .custom-authcode-item {
    width: 15% !important;
    height: 10vw !important;
    margin: 0 1%;
  }
}
@media (max-width: 767px) {
  .custom-authcode-item {
    width: 10vw !important;
    height: 12vw !important;
    border-radius: 8px;
    font-size: 20px;
    margin: 0;
  }
}
@media (min-width:1200px) {
  .custom-authcode-item {
    width: 15% !important;
    height: 8vw !important;
    max-height: 120px;
    margin: 0 1%;
  }
}

a.btn.disabled,
a.btn:disabled {
  background-color: #8095AA!important;
  border-color: #8095AA!important;
  opacity: unset!important;
}