@font-face  {
    font-family :  "Yu Gothic" ;
    src :  local( "Yu Gothic Medium" );
    font-weight :  100 ;
}
@font-face  {
      font-family :  "Yu Gothic" ;
      src :  local( "Yu Gothic Medium" );
      font-weight :  200 ;
  }
@font-face  {
      font-family :  "Yu Gothic" ;
      src :  local( "Yu Gothic Medium" );
      font-weight:  300 ;
  }
@font-face  {
      font-family :  "Yu Gothic" ;
      src :  local( "Yu Gothic Medium" );
      font-weight :  400 ;
  }
@font-face  {
      font-family :  "Yu Gothic" ;
      src :  local( "Yu Gothic Bold" );
      font-weight :  bold ;
  }
@font-face  {
      font-family :  "Helvetica Neue" ;
      src :  local("Helvetica Neue Regular" );
      font-weight :  100 ;
  }
@font-face  {
      font-family :  "Helvetica Neue" ;
      src :  local( "Helvetica Neue Regular" );
      font-weight :  200 ;
  }


html  {
    font-family :  -apple-system ,  BlinkMacSystemFont ,  "Helvetica Neue" ,  "Yu Gothic" ,  YuGothic ,  Verdana ,  Meiryo ,  "M + 1p" ,  sans-serif ;
}
body{
    font-family :  "Yu Gothic", sans-serif;
    color: #010101;
    word-break: break-all;
}
a:hover {
    text-decoration: none;
}
.news a:hover{
    color:#AD7F38 !important;
}
/* color */
.color-yellow{
    color: rgb(173, 127, 56);
}
.color-red{
    color:red;
}
/** END color style */

/* padding */
.p--15{
    padding: 15px;
}
.p-bottom--10{
    padding-bottom: 10px;
}
.p-bottom--15{
    padding-bottom: 15px;
}
.p-bottom--25{
    padding-bottom: 25px;
}
.p-bottom--30{
    padding-bottom: 30px;
}
.p-bottom--35{
    padding-bottom: 35px;
}
.p-bottom--40{
    padding-bottom: 40px;
}
.p-bottom--45{
    padding-bottom: 45px;
}
.p-bottom--50{
    padding-bottom: 50px;
}
.p-bottom--70{
    padding-bottom: 70px;
}
.p-bottom--85{
    padding-bottom: 85px;
}
.p-bottom--100{
    padding-bottom: 100px;
}
.p-bottom--110{
    padding-bottom: 110px;
}
.p-bottom-150{
    padding-bottom: 150px;
}
.p-bottom-170{
    padding-bottom: 170px;
}
.p-bottom--205{
    padding-bottom: 205px;
}
.p-bottom--215{
    padding-bottom: 215px;
}
.p-bottom--220{
    padding-bottom: 220px;
}
.p-top--10{
    padding-top: 10px;
}
.p-top--12{
    padding-top: 12px;
}
.p-top--30{
    padding-top: 30px;
}
.p-left--5{
    padding-left: 5px;
}
.p-left--13{
    padding-left: 13px;
}
.p-left--35{
    padding-left: 35px;
}
.p-left--40{
    padding-left: 40px;
}
.p-right--0{
    padding-right: 0 !important;
}
.p-right--5{
    padding-right: 5px;
}
/** END padding style */

/* margin */
.m-top--10{
    margin-top: 10px;
}
.m-top--20{
    margin-top: 20px;
}
.m-top--25{
    margin-top: 25px;
}
.m-bottom--0{
    margin-bottom: 0 !important;
}
.m-bottom--10{
    margin-bottom: 10px;
}
.m-bottom--15{
    margin-bottom: 15px;
}
.m-bottom--20{
    margin-bottom: 20px;
}
.m-bottom--25{
    margin-bottom: 25px;
}
.m-bottom--35{
    margin-bottom: 35px;
}
.m-bottom--45{
    margin-bottom: 45px;
}
.m-bottom--100{
    margin-bottom: 100px;
}
.m-bottom--150{
    margin-bottom: 150px;
}
.m-right--15{
    margin-right: 15px;
}
.m-right--20{
    margin-right: 20px;
}
/** END margin style */

/* font weight */
.text-bold{
    font-weight: bold;
}
.text-weight--400{
    font-weight: 400 !important;
}

/* font size */
.text--25{
    font-size: 25px;
}
.text--12{
    font-size: 12px;
}

/* text style */
.text-wrap{
    word-wrap: break-word;
}

html {
    height:100%;
}
a{
    color: #000;
}
a:active{
    color: unset;
}

/**css for link text */
a.link-text{
    color: #cc9966;
}
a.link-underline:hover{
    text-decoration: underline;
}
.more-btn:hover{
    color: #cc9966 !important;
}

#contents_start {
    position: relative;
    min-height: 65vh;
}

/* header */
.header--large{
    display: none;
    background-color: #444444;
}
.header--large .header__top{
    display: flex;
    justify-content: space-between;
    background-color: white;
    align-items: stretch;
    height: 60px;
    padding-left: 20px;
}
.header__logo:hover{
    opacity: 0.5;
}
.header__top-right a:hover{
    color: #AD7F38 !important;
}

.header--large .header__logo{
    display: flex;
    justify-content: center;
    align-items: center;
}
.header--large .header__top-right{
    display: flex;
}
.header--large .header__top .item{
    padding: 10px 30px;
    display: inline-block;
    text-decoration: none;
    color: black;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header--large .header__top .item:last-child{
    color: white !important;
    background-color: #444444;
    text-decoration: none;
    width: 200px;
}
.header--large .header__bottom{
    display: flex;
    justify-content: flex-end;
    height: 60px;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
}
.header--large .header__bottom a:hover{
    opacity: 0.5;
}
.header--large .header__bottom .item{
    padding: 10px 40px;
    color: white;
    height: 35px;
    /*margin-right: 22px;*/
    font-weight: bold;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header--large .btn--login{
    height: 40px;
    border-radius: 20px;
    background-color: #444444;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    /*padding-left: 50px;*/
    /*padding-right: 50px;*/
    border: 2px solid white;
    margin-right: 15px;
    text-decoration: none;
    width: 140px;
}
.header--large .btn--regist{
    height: 40px;
    border-radius: 20px;
    background-color: white;
    color: #444444;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    /*padding-left: 50px;*/
    /*padding-right: 50px;*/
    line-height: 19px;
    /*margin-right: 30px;*/
    text-decoration: none;
    width: 140px;
}
div.header--small{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
}
.header--small i.menu-icon{
    background-color: white;
    border-bottom-right-radius: 5px;
    color: rgb(173, 127, 56);
    padding: 9px;
    padding-bottom: 17px;
    font-size: 20px;
}
.navbar-toggler-icon{
    background-size: 16px;
    margin-top: 6px;
    background-image: url("../images/ic-hambuger-default.png");
}
.header--small .menu-close-icon{
    color: rgb(173, 127, 56);
    padding: 2px 15px;
    font-size: 30px;
    display: none;
    align-items: center;
}
#header-open-btn, #header-close-btn{
    cursor: pointer;
}
.menu-smartphone{
    display: contents;
}
.menu-smartphone a:hover{
    color: #ad7f38 !important;
}
.header--small .content{
    height: 0;
    transition: height 1s;
    overflow: hidden;
}
.header--small .menu{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    font-weight: bold;
}
.header--small .item{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}
.header--small .group{
    border-top: 1px solid #444;
    margin-left: 15px;
    margin-right: 15px;
    padding-top: 10px;
    margin-top: 10px;
}
.header--small .login-regist{
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
}
.header--small .login{
    color: white !important;
    background-color: #444;
    border-radius: 15px;
    height: 30px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}
.header--small .login:hover{
    color: white !important;
    text-decoration: none;
}
.header--small .regist{
    color: rgb(173, 127, 56);
    border: 1px solid rgb(173, 127, 56);
    border-radius: 15px;
    height: 30px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header--small .regist:hover{
    color: rgb(173, 127, 56) !important;
    text-decoration: none;
}
/** END header style */


.header-banner{
    /* height: 150px; */
}
.header-banner > img{
    width: 100%;
    /* height: 100%; */
}

/** breadcrumb */
.breadcrumb{
    background-color: white;
    font-weight: 500;
    padding-left: 0px;
    margin-bottom: 0;
    padding-top: 38px;
    padding-bottom: 10px;
    align-items: center;
    font-size: 14px;
    color: black;
    /* font-family: Yugothic-Regular; */
}
.breadcrumb-item.active {
    color: black;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
/** END breadcrumb style */

/* title */
.title{
    height: 60px;
    background-color: #D00100;
    color: white;
    font-size: 32px;
    line-height: 60px;
    padding-left: 25px;
    margin-bottom: 25px;
    font-weight: bold;
}
@media only screen and (max-width: 768px){
    #title_mypage{
        font-size: 23px;
    }

}


/* footer */
div.footer{
    position: relative;
}
.footer i{
    color: white;
}
div.footer--small{
    background-color: #444;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
}
.footer--small a:hover{
    color: #AD7F38 !important; ;
}
.footer--small .text1{
    color: #8a8a8a;
    padding-bottom: 10px;
    font-size: 7px;
}
.footer--small .item{
    color: white;
    text-decoration: none;
    font-size: 10px;
    padding-bottom: 10px;
}
.footer--small .item:hover{
    color: white;
    text-decoration: none;
}
.footer--small .icon{
    font-size: 10px;
    padding-left: 5px;
}

.icons a:hover{
    opacity: 0.5;
    color: black !important;
}
.custom-carausel a:hover{
    opacity: 0.75;
}
div.footer--large{
    background-color: #444;
    color: white;
    display: none;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 14px;
}
.footer--large .p-bottom--15 a:hover{
    color: #AD7F38 !important; ;
}
.back-to-top:hover{
    opacity: 0.8 !important;
}
.footer-icon a:hover{
    opacity: 0.5;
    color: black;
}
.footer--large .text1{
    color: #fff;
    padding-bottom: 15px;
}
.footer--large .item{
    color: white;
    text-decoration: none;
}
.footer--large .item:hover{
    color: white;
    text-decoration: none;
}
.footer .up{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    background-color: rgb(84, 84, 84);
    width: 35px;
    height: 35px;
    border-radius: 5px;
    right: 20px;
    bottom: 20px;
    z-index: 99;
    cursor: pointer;
}
.footer .up > i{
    color: white;
    font-size: 25px;
}
.footerComponent-c-1{
    color: #8a8a8a;
}
div.footerComponent-i-l{
    display: none;
}
div.footerComponent-t8{
    font-size: 8px;
}
div.footerComponent-t7{
    font-size: 7px;
}
div.footerComponent-t25{
    font-size: 25px;
}
/** END footer style */

/** START button style */
a.btn, button.btn, input.btn{
    border-radius: 30px;
    padding: .375rem 40px;
    height: 60px;
}
a.btn-white,  button.btn-white, input.btn-white, .btn-left{
    height: 60px;
    border-radius: 15px;
    background-color: white;
    color: rgb(173, 127, 56);
    display: inline-block;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    padding-left: 50px;
    padding-right: 50px;
    line-height: 19px;
}
a.btn-white-border,  button.btn-white-border, input.btn-white-border{
    border: solid 1px black;
    height: 60px;
    line-height: 48px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    color: #000000;
    font-size: 18px;
    background-color: #ffffff;
}
a.btn-white-border:hover,  button.btn-white-border:hover, input.btn-white-border:hover{
    opacity: 0.5;
    border: 1px solid black;
}

a.btn-white:hover, button.btn-white:hover, input.btn-white:hover{
    color: rgb(173, 127, 56);
}
a.btn-yellow, button.btn-yellow, input.btn-yellow {
    height: 30px;
    border-radius: 15px;
    background-color:  rgb(173, 127, 56);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    padding-left: 50px;
    padding-right: 50px;
    border: 2px solid white;
}
a.btn-yellow:hover, button.btn-yellow:hover, button.btn-yellow:hover{
    color: white;
    text-decoration: none;
}

a.btn-black, button.btn-black, input.btn-black{
    background-color: #000;
    border: #000;
    color: #ffffff;
    height: 60px;
    line-height: 48px;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
}

a.btn-black:hover, button.btn-black:hover, input.btn-black:hover{
    opacity: 0.5;
    color: #ffffff;
}
.btn-black-2{
    border-radius: 0.25rem;
    background-color: black;
    color: white;
    border: 1px solid black;
    font-weight: bold;
}
.btn-black-2:hover{
    color: white;
}
.btn-white-2{
    border-radius: 0.25rem;
    background-color: white;
    color: black;
    border: 1px solid black;
    font-weight: bold;
}
.btn-white-2:hover{
    color: black;
    opacity: 0.5;
}
.btn-white-3{
    border-radius: 0.25rem;
    background-color: white;
    color: #1a73e9;
    border: 1px solid #dadce0;
}
.btn-white-3:hover{
    color: #1a73e9;
}

/** END button style */

/* error message style */
p.input-error{
    color: red !important;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
}
input[type="text"].input-error, select.input-error{
    border-color: red !important;
}
.error-group > div:last-child{
    margin-bottom: 30px;
}


.margin-right-30{
    margin-right: 30px;
}

.heading-title{
    height: 60px;
    background-color: black;
    padding: 0 29px;
}
.heading-title h3{
    color: white;
    font-size: 32px;
    font-weight: bold;
    margin: 0;
    line-height: 64px;

}
.breadcrumb a{
    color: black;
}
@media (min-width: 1200px){
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1070px;
    }
}
@media only screen and (min-width: 992px) {
    /* header */
    div.header--large {
        display: block;
    }
    div.header--small {
        display: none;
    }

    /* footer */
    div.footer--small{
        display: none;
    }
    div.footer--large{
        display: flex;
    }
    .footer .up{
        width: 60px;
        height: 60px;
    }
}


.require-validate{
    font-size: 12px;
    border: solid 1px red;
    border-radius: 5px;
    padding: 2px;
    padding-left: 8px;
    padding-right: 8px;
    background-color: red;
    color: white;
    float: right;
    font-weight: bold;
    padding-top: 3px;
}
.button-radio{
    display: flex;
    line-height: 2;
    align-items: center;
}
.form-check-input {
    width: 25px;
    height: 25px;
}

/* input */
.form-control, select.form-control{
    border: 1px solid black;
    border-radius: 0;
    height: 60px;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 16px;
    line-height: 16px;
}
input[type="radio"].form-control{
    width: 30px;
    height: 30px;
}
.checkbox-group{
    display: inline-flex;
    align-items:center;
}
input[type="checkbox"].form-checkbox{
    width: 30px;
    height: 30px;
    margin-right: 15px;
    margin-left: 15px;
}

select.form-control{
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background: white;
    padding: 0.3em 2.5em 0.3em 0.6em;
    background-image: url("../images/arrow-down.png");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 15px 15px;
}

.form-control::placeholder {
    opacity: 0.55 !important;
}

/*For IE10+*/
select::-ms-expand {
    display: none;
}

/* label */
.label--required{
    display: inline-block;
    background-color: red;
    color: white;
    width: 50px;
    height: 25px;
    border-radius: 5px;
    text-align: center;
    line-height: 25px;
    font-size: 14px;
    font-weight: bold;
}
.label--arbitrarily{
    display: inline-block;
    background-color: #999999;
    color: white;
    width: 50px;
    height: 25px;
    border-radius: 5px;
    text-align: center;
    line-height: 25px;
    font-size: 14px;
    font-weight: bold;
}

.footer--large img{
    /* width: 38px;
    height: 38px; */
}
.icon-facebook{
    margin-left: 10px;
    margin-right: 10px;
}
.icon-twitter{
    margin-left: 10px;
    margin-right: 10px;
}
.icon-youtube{
    margin-left: 10px;
    margin-right: 10px;

}
.icon-arrow-up{
    width: 18px;
    height: 18px;
}
input.is-invalid, textarea.is-invalid{
    background-color: #fff3f3;
    background-image:unset;
}
.was-validated .form-control:invalid, .form-control.is-invalid{
    background-image:unset;
}
select.form-control.is-invalid{
    background-color: #fff3f3;
    background-image: url("../images/arrow-down.png");
}
.invalid-feedback{
    margin-top: unset;
    padding-top: 10px;
}
#next--large:hover{
    opacity: 0.75;
}
#pre--large:hover{
    opacity: 0.75;
}

@media only screen and (max-width: 768px){
    .breadcrumb{
        font-size: 13px;

    }
    .mr-3{
        margin-right: 0.5rem !important;
    }
    .ml-3, .mx-3{
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }


    .p-left--40{
        padding-left: 15px;;
    }
    a.btn-black, button.btn-black, input.btn-black{
        font-size: 15px !important;
    }
    .require-validate{
        margin-left: 15px;
        float: unset;
        margin-right: unset !important;
    }
}

/* fallback for  IE11 */
.form-check-input[type="radio"]:checked::-ms-check {
    border: 1px solid #000;
    color: #ad7f38;
    opacity: 1;
}

.pagination{
    padding-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: -10px;
}
.page-item{
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px;
}
.page-item.active .page-link {
    background-color: #AD7F38 !important;
    border-color:#AD7F38 !important;
    color: #fff !important;
}
.page-link {
    color: #000 !important;
}
.img {
    object-fit: cover;
}
.ws-br {
    white-space: break-spaces;
}
.tooltip_title[data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;
    opacity: 1;
    background: white;
    margin-top: -50px;
    margin-left: 100px;
    margin-right: -150px;
    padding: 10px !important;
    transition: all 0.15s ease;
    border-radius: 10px;
    box-shadow: 2px 2px 1px silver;
    z-index: 9;
    visibility: hidden;
    color: #000 !important;
}
.tooltip_title[data-tooltip]:hover:before {
    visibility: visible;
    white-space: break-spaces;
}

ul.jstree-container-ul{
    padding-left: 0 !important;
}
ul.jstree-children{
    padding-left: 0 !important;
}
.jstree-anchor{
    border-bottom: 1px solid rgb(199, 199, 199);
    padding: 8px 20px 8px 0;
    display: block !important;
    height: 41px !important;
    padding-left: calc(15px * var(--level)) !important;
    white-space : normal !important;
}
.jstree-ocl{
    display: none;
}
.jstree-icon {
    position: absolute;
    right: 0;
    margin-top: 8px !important;
    z-index: 1;
}
.jstree-icon::before {
    padding: 10px !important;
}
.jstree-default .jstree-icon:empty {
    width: unset !important;
    height: unset !important;
    line-height: unset !important;
    vertical-align: middle !important;
}
.jstree-default .jstree-icon {
    width: unset !important;
    height: unset !important;
    line-height: unset !important;
}
.jstree-default .jstree-node {
    margin-left: unset !important;
}

@media (max-width: 992.5px) {
    .jstree-icon {
        right: 40px !important;
    }
}

input::-webkit-input-placeholder {
    line-height:normal!important;
}
#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 100;
    cursor: pointer;
}


.lds-spinner {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    position: absolute;
    top: 48%;
    left: 48%;
}
.lds-spinner div {
    transform-origin: 40px 40px;
    animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3px;
    left: 37px;
    width: 6px;
    height: 18px;
    border-radius: 20%;
    background: #fff;
}
.lds-spinner div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
}
@keyframes lds-spinner {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.stop-scrolling {
    height: 100%;
    overflow: hidden;
}

.input-group-text{
    border: 1px solid black !important;
    border-left: none !important;
    border-radius: 0 !important;
}