/* do not add styles, these are just utility class (Camel cases) */
.inputWrap{}
.notAllowEmpty{}
.notAllowEmptyWhenVisible{}
.notAllowNoCheck{}
.allowOnlyNumeric{}
.allowOnlyAlphaNumeric{}
.validateEmail{}
.confirmEmailSub{}
.confirmEmail{}
.passwordCheck{}
.password{}
.errorTxt{}
.onblurValidation{}
.confirmOnSubmit{}
.inputPasswordOnSubmit{}
.notAllowEmptyWhenVisible{}
.allowOnlyHiragana{}
/* End of - do not add styles, these are just utility class (Camel cases) */
.form-control{width:250px;height: 32px;}
.input-group-btn>.btn {
    position: relative;
    height: 32px;
}
/* for dev */
.dev-red{
    color: red !important;font-weight: bold !important;
}

/* position */
.relative{position: relative;}
.absolute-top-right{position: absolute;top: 5px;right: 5px;}

/*font*/
.font-sm{font-size: 94%;}
.font-xs{font-size: 90%;}
.font-xxs{font-size: 84%;}
.font-large{font-size: 110%;}
.font-jp { font-family: 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', 'MS Gothic', 'ＭＳ ゴシック', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.font-family-oswald { font-family: 'Oswald', sans-serif; }
.font-family-montserrat { font-family: 'Montserrat',sans-serif; }
.font-weight-bold {	font-weight: bold; }
.font-weight-normal{	font-weight: normal; }
.font-color-white {	color: #FFFFFF; }
.font-color-red {	color: red; }
.font-color-black{color: #333333 !important; }
.font-size-10 { font-size: 10px; }
.font-size-11 { font-size: 11px; }
.font-size-12 { font-size: 12px; }
.font-size-14 { font-size: 14px; }
.font-size-16 { font-size: 16px; }
.font-size-18 { font-size: 18px; }
.font-size-20 { font-size: 20px; }
.font-size-22 { font-size: 22px; }
.font-size-24 { font-size: 24px; }
.font-size-28 { font-size: 28px; }
.font-size-32 { font-size: 32px; }
.font-size-36 { font-size: 36px; }
.font-size-05em { font-size: 0.5em; }
.font-size-07em { font-size: 0.7em; }
.font-size-08em { font-size: 0.8em; }
.font-size-09em { font-size: 0.9em; }
.font-size-095em { font-size: 0.95em; }
.font-size-10em { font-size: 1.0em; }
.font-size-11em { font-size: 1.1em; }
.font-size-115em { font-size: 1.15em; }
.font-size-12em { font-size: 1.2em; }
.font-size-13em { font-size: 1.3em; }
.font-size-15em { font-size: 1.5em; }
.font-size-16em { font-size: 1.6em; }
.font-size-18em { font-size: 1.8em; }
.font-size-19em { font-size: 1.9em; }
.font-size-20em { font-size: 2.0em; }
.font-size-21em { font-size: 2.1em; }
.font-size-22em { font-size: 2.2em; }
.font-size-24em { font-size: 2.4em; }
.font-size-28em { font-size: 2.8em; }
.font-size-32em { font-size: 3.2em; }
.font-size-36em { font-size: 3.6em; }
.text-underline { text-decoration: underline; }
.text-lead{font-size: 1.5em;line-height: 2.5;letter-spacing: 0.08em;}
/*background*/
.background-dark { background-color: #222222; }
.background-grey { background-color: #F5F5F5; }
.background-darkgray{ background-color: #ededed; }
.background-white { background-color: #FFFFFF; }


/*list*/
.horizontal-list {
    list-style: none;
    padding-left: 0;
}
.horizontal-list li { display: inline; }
.lst-stl-none {
    list-style: none
}


/*border*/
.bdr-tp-solid { border-top: thin solid black; }
.bdr-tp-solid-2px { border-top: 2px solid black; }
.bdr-bt-solid { border-bottom: thin solid black; }
.bdr-bt-none { border-bottom: none !important; }
.bdr-bt-solid-2px { border-bottom: 2px solid black; }
.bdr-solid { border-style: solid }
.bdr-bt-dotted { border-bottom: thin dotted black }
.bdr-grey { border-color: #A6A6A6; }
.bdr-grey-ddd {border-color: #DDDDDD;}
.bdr-grey-eee {border-color: #eeeeee;}
.bdr-xthick {border-width: 3px;}
.bdr-thick {border-width: 1px;}
.bdr-thin { border-width: 1px; }
.bdr-rd-none { border-radius: 0; }
.bdr-rd-5 { border-radius: 5px; }
.bdr-rd-10 { border-radius: 10px; }
.bdr-rd-20{ border-radius: 20px;}
.bdr-rd-300{ border-radius: 300px;}
.bdr-bg-transparent {background-color: transparent}
.bdr-none {border: none;}
.bdr-longitudinal{border-left: 2px solid lightgrey; line-height: 1.5em;}
.bdr-longitudinal-right{border-right: 2px solid lightgrey; line-height: 1.5em; margin-top: 10px}


/*button*/
.btn-blank { background: transparent; }
.btn-dark { border-radius: 3px;box-shadow: 0 -2px rgba(0,0,0,0.5) inset;letter-spacing: 0.05em;font-size: 13px;background-color: #5A5A5A; color: #FFFFFF }
.btn-dark:hover { background-color: #7F7F7F; box-shadow: 0 -1px rgba(0,0,0,0.5) inset;}
.btn-wide{ padding-left: 24px !important;  padding-right: 24px !important; }
.btn-wider{ padding-left: 40px !important;  padding-right: 40px !important; }
.btn-widest{ padding-left: 60px !important;  padding-right: 60px !important; }
.btn-center{ display: block; margin-left: auto; margin-right: auto; }
.btn-full{width: 100%}
.hover-no-underline:hover{text-decoration: none;}

/*width height*/
.full-width { width: 100%; }
.width-95pc { width: 95%; }
.width-24pc { width: 24%; }
.width-40 { width: 40px; }
.width-80 { width: 80px; }
.width-100 { width: 100px; }
.width-140 { width: 140px; }
.width-200 { width: 200px; }
.width-250 { width: 250px; }
.width-300 { width: 300px; }
.width-470 { width: 470px; }
.width-500 { width: 500px; }
.width-530 { width: 530px; }
.width-620 { width: 620px; }
.width-640 { width: 640px; }
.width-670 { width: 670px; }
.width-max-200 { max-width: 200px; }
.width-max-300 { max-width: 300px; }
.width-max-400 { max-width: 400px; }
.width-auto{width: auto;}
.height-auto{height: auto;}
.height-40 { height: 40px; }
.height-80 { height: 80px; }
.height-100 { height: 100px; }
.height-120 { height: 120px; }
.height-150 { height: 150px; }
.height-180 { height: 180px; }
.height-200 { height: 200px; }
.height-300 { height: 300px; }
.height-400 { height: 400px; }
.height-430 { height: 430px; }
.height-500 { height: 500px; }
.height-min-200 { min-height: 200px }
.height-max-150 {max-height: 150px }
.height-max-200 {max-height: 200px }
.height-max-300 {max-height: 300px }
.height-max-450 {max-height: 450px }
.height-min-100pc {min-height: 100% }
.opacity-1 { opacity: 1 }
.square-max-25 {
    max-height: 25px;
    max-width: 25px;
}
.square-max-100{
    max-height: 100px;
    max-width: 100px;
}

/*letter-spacing*/
.letter-spacing{letter-spacing: 1.3em;  }
.ls-lg{ letter-spacing: 0.5em;  }
.ls-04{ letter-spacing: 0.4em;  }
.ls-03{ letter-spacing: 0.3em;  }
.ls-02{ letter-spacing: 0.2em;  }
.ls-md{ letter-spacing: 0.12em;  }
.ls-01{ letter-spacing: 0.1em;  }
.ls-sm{ letter-spacing: 0.085em;  }
.ls-xs{ letter-spacing: 0.06em;  }
.ls-xxs{ letter-spacing: 0.05em;  }
.ls-xxxs{ letter-spacing: 0.035em;  }


/*line-height*/
.lh-xs{line-height: 1.5em;}
.lh-sm{line-height: 2.0em;}
.lh-21{line-height: 2.1em;}
.lh-24{line-height: 2.4em;}

/*cursor*/
.csr-pointer {
    cursor: pointer;
}


.border-light-grey{
    border: 2px solid #E6E6E6;
}
.background-transparent{
    background-color: transparent;
}


/*margin*/
.mb-none { margin-bottom: 0 !important; }
.mb-xxs{ margin-bottom: 5px !important; }
.mb-xs{ margin-bottom: 10px !important; }
.mb-sm{ margin-bottom: 20px !important; }
.mb-25{ margin-bottom: 25px !important; }
.mb-27{ margin-bottom: 27px !important; }
.mb-md{ margin-bottom: 30px !important; }
.mb-lg{ margin-bottom: 50px !important; }
.mb-130{ margin-bottom: 130px !important; }
.mt-none { margin-top: 0 !important; }
.mt-xxs { margin-top: 5px !important;}
.mt-7{ margin-top: 7px !important; }
.mt-xs{ margin-top: 10px !important; }
.mt-15{ margin-top: 15px !important; }
.mt-18{ margin-top: 18px !important; }
.mt-sm{ margin-top: 20px !important; }
.mt-23{ margin-top: 23px !important; }
.mt-25{ margin-top: 25px !important; }
.mt-27{ margin-top: 27px !important; }
.mt-md{ margin-top: 30px !important; }
.mt-35{ margin-top: 35px !important; }
.mt-lg{ margin-top: 50px !important; }
.mt-68{ margin-top: 68px !important; }
.ml-negative-10{ margin-left: -10px !important; }
.ml-none { margin-left: 0 !important; }
.ml-xxs{ margin-left: 5px !important; }
.ml-xs{ margin-left: 10px !important; }
.ml-13{ margin-left: 13px !important; }
.ml-sm{ margin-left: 20px !important; }
.ml-md{ margin-left: 30px !important; }
.ml-lg{ margin-left: 50px !important; }
.ml-100{ margin-left: 100px !important; }
.mr-none { margin-right: 0 !important; }
.mr-xxs{ margin-right: 5px !important; }
.mr-xs{ margin-right: 10px !important; }
.mr-sm{ margin-right: 20px !important; }
.mr-md{ margin-right: 30px !important; }
.mr-lg{ margin-right: 50px !important; }
.mr-100{ margin-right: 100px !important; }
.ma-none { margin: 0 !important; }
.ma-xxs{margin: 5px !important;}
.ma-xs{ margin: 10px !important; }
.ma-sm{ margin: 20px !important; }
.ma-md{ margin: 30px !important; }
.ma-lg{ margin: 50px !important; }
.mg-ct { margin: 0 auto !important; }

.md-mr-40{ margin-right: 40px ; }
.md-mr-60{ margin-right: 60px ; }
.md-ml-24{ margin-left: 24px ; }
.md-ml-40{ margin-left: 40px ; }
.md-ml-60{ margin-left: 60px ; }
.md-ml-100{ margin-left: 100px ; }
.md-ml-118{ margin-left: 118px ; }
.md-ml-24pc{ margin-left: 24% ; }

/*padding*/
.pb-none { padding-bottom: 0 !important; }
.pb-xxs{ padding-bottom: 5px !important; }
.pb-08{ padding-bottom: 8px !important; }
.pb-xs{ padding-bottom: 10px !important; }
.pb-18{ padding-bottom: 18px !important; }
.pb-sm{ padding-bottom: 20px !important; }
.pb-23{ padding-bottom: 23px !important; }
.pb-25{ padding-bottom: 25px !important; }
.pb-md{ padding-bottom: 30px !important; }
.pb-40{ padding-bottom: 40px !important; }
.pb-44{ padding-bottom: 44px !important; }
.pb-lg{ padding-bottom: 50px !important; }
.pt-none { padding-top: 0 !important; }
.pt-xxs{ padding-top: 5px !important; }
.pt-07{ padding-top: 7px !important; }
.pt-08{ padding-top: 8px !important; }
.pt-xs{ padding-top: 10px !important; }
.pt-18{ padding-top: 18px !important; }
.pt-sm{ padding-top: 20px !important; }
.pt-25{ padding-top: 25px !important; }
.pt-md{ padding-top: 30px !important; }
.pt-40{ padding-top: 40px !important; }
.pt-lg{ padding-top: 50px !important; }
.pl-none { padding-left: 0 !important; }
.pl-3{ padding-left: 3px !important; }
.pl-4{ padding-left: 4px !important; }
.pl-xxs{ padding-left: 5px !important; }
.pl-xs{ padding-left: 10px !important; }
.pl-sm{ padding-left: 20px !important; }
.pl-40{ padding-left: 40px !important; }
.pl-md{ padding-left: 30px !important; }
.pl-lg{ padding-left: 50px !important; }
.pr-none { padding-right: 0 !important;}
.pr-xxs{ padding-right: 5px !important; }
.pr-xs{ padding-right: 10px !important; }
.pr-sm{ padding-right: 20px !important; }
.pr-md{ padding-right: 30px !important; }
.pr-lg{ padding-right: 50px !important; }
.pr-xlg{ padding-right: 70px !important; }
.pa-none { padding: 0 !important;}
.pa-xxxs{padding: 2px !important;}
.pa-xxs{padding: 5px !important;}
.pa-xs{ padding: 10px !important; }
.pa-sm{ padding: 20px !important; }
.pa-md{ padding: 30px !important; }
.pa-lg{ padding: 50px !important; }

.p_pb-sm p {
    padding-bottom: 20px;
}

/*display*/
.dp-bl{ display: block }
.dp-none {display: none }
.dp-ib{ display: inline-block }
.of-hd{ overflow: hidden}

.content-wrap{}
.btn-theme-line{
    border: 1px solid #103AA2;
    background-color: transparent;
    color: #103AA2;
}
.btn-theme-line:hover{}



.box-shadow-bt-grey { box-shadow: 0px 3px 5px #E1E1E1; }
.box-shadow-light{box-shadow: 0px 1px 3px rgba(0,0,0,0.08);}

.error-message {
    color: red;
}

.vertical-middle{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/*clear*/
.clear{  clear: both;  }

/*boxsizing*/

.bd-box{
    box-sizing: border-box;
}


@media screen and (max-width:767px) {
    /*margin*/
    .xs-mb-none { margin-bottom: 0 !important; }
    .xs-mb-xxs{ margin-bottom: 5px !important; }
    .xs-mb-xs{ margin-bottom: 10px !important; }
    .xs-mb-sm{ margin-bottom: 20px !important; }
    .xs-mb-20{ margin-bottom: 20px !important; }
    .xs-mb-md{ margin-bottom: 30px !important; }
    .xs-mb-lg{ margin-bottom: 50px !important; }
    .xs-mt-none { margin-top: 0 !important; }
    .xs-mt-xxs { margin-top: 5px !important;}
    .xs-mt-xs{ margin-top: 10px !important; }
    .xs-mt-sm{ margin-top: 20px !important; }
    .xs-mt-md{ margin-top: 30px !important; }
    .xs-mt-lg{ margin-top: 50px !important; }
    .xs-ml-none { margin-left: 0 !important; }
    .xs-ml-xxs{ margin-left: 5px !important; }
    .xs-ml-xs{ margin-left: 10px !important; }
    .xs-ml-sm{ margin-left: 20px !important; }
    .xs-ml-md{ margin-left: 30px !important; }
    .xs-ml-lg{ margin-left: 50px !important; }
    .xs-mr-none { margin-right: 0 !important; }
    .xs-mr-xxs{ margin-right: 5px !important; }
    .xs-mr-xs{ margin-right: 10px !important; }
    .xs-mr-sm{ margin-right: 20px !important; }
    .xs-mr-md{ margin-right: 30px !important; }
    .xs-mr-lg{ margin-right: 50px !important; }
    .xs-ma-none { margin: 0 !important; }
    .xs-ma-xxs{margin: 5px !important;}
    .xs-ma-xs{ margin: 10px !important; }
    .xs-ma-sm{ margin: 20px !important; }
    .xs-ma-md{ margin: 30px !important; }
    .xs-ma-lg{ margin: 50px !important; }
    .xs-mg-ct { margin: 0 auto !important; }

    .md-mr-40{ margin-right: 0 ; }
    .md-mr-60{ margin-right: 0 ; }
    .md-ml-24{ margin-left: 0 ; }
    .md-ml-40{ margin-left: 0 ; }
    .md-ml-60{ margin-left: 0 ; }
    .md-ml-100{ margin-left: 0 ; }
    .md-ml-118{ margin-left: 0 ; }
    .md-ml-24pc{ margin-left: 0 ; }

    /*padding*/
    .xs-pb-none { padding-bottom: 0 !important; }
    .xs-pb-xxs{ padding-bottom: 5px !important; }
    .xs-pb-xs{ padding-bottom: 10px !important; }
    .xs-pb-sm{ padding-bottom: 20px !important; }
    .xs-pb-md{ padding-bottom: 30px !important; }
    .xs-pb-lg{ padding-bottom: 50px !important; }
    .xs-pt-none { padding-top: 0 !important; }
    .xs-pt-xs{ padding-top: 10px !important; }
    .xs-pt-sm{ padding-top: 20px !important; }
    .xs-pt-md{ padding-top: 30px !important; }
    .xs-pt-40{ padding-top: 40px !important; }
    .xs-pt-lg{ padding-top: 50px !important; }
    .xs-pl-none { padding-left: 0 !important; }
    .xs-pl-xxs{ padding-left: 5px !important; }
    .xs-pl-xs{ padding-left: 10px !important; }
    .xs-pl-sm{ padding-left: 20px !important; }
    .xs-pl-md{ padding-left: 30px !important; }
    .xs-pl-lg{ padding-left: 50px !important; }
    .xs-pr-none { padding-right: 0 !important;}
    .xs-pr-xxs{ padding-right: 5px !important; }
    .xs-pr-xs{ padding-right: 10px !important; }
    .xs-pr-sm{ padding-right: 20px !important; }
    .xs-pr-md{ padding-right: 30px !important; }
    .xs-pr-lg{ padding-right: 50px !important; }
    .xs-pa-none { padding: 0 !important;}
    .xs-pa-xxxs{padding: 2px !important;}
    .xs-pa-xxs{padding: 5px !important;}
    .xs-pa-xs{ padding: 10px !important; }
    .xs-pa-sm{ padding: 20px !important; }
    .xs-pa-md{ padding: 30px !important; }
    .xs-pa-lg{ padding: 50px !important; }

    /*width*/
    .xs-width-80pc{width:80%;}
    .xs-width-auto{width:auto!important;}
    .xs-width-max-300 { max-width: 300px; }

    /*display*/
    .xs-dp-bl{ display: block ;}
    .xs-dp-none {display: none ;}
    .xs-dp-ib{ display: inline-block ;}
    .xs-of-hd{ overflow: hidden;}
    .md-of-auto{  overflow: hidden!important;  }

    .xs-float-none{ float: none !important;}
    .xs-float-right{ float: right !important;}

    .xs-bdr-bt-solid { border-bottom-width: 1px;border-bottom-style:solid;  }
    .xs-bdr-tp-solid { border-top-width: 1px;border-top-style:solid;  }
    .xs-btn-narrow{ padding-left: 24px !important;  padding-right: 24px !important; }
    .xs-btn-wide{ padding-left: 24px !important;  padding-right: 24px !important; }
    .xs-btn-wider{ padding-left: 40px !important;  padding-right: 40px !important; }
    .xs-btn-widest{ padding-left: 60px !important;  padding-right: 60px !important; }

    .xs-width-full{width: 100% !important;}
    .xs-width-full-force{width: 100% !important;max-width: 100% !important;}


    /*font*/
    .xs-font-size-10 { font-size: 10px !important; }
    .xs-font-size-12 { font-size: 12px !important; }
    .xs-font-size-14 { font-size: 14px !important; }
    .xs-font-size-16 { font-size: 16px !important; }
    .xs-font-size-18 { font-size: 18px !important; }
    .xs-font-size-20 { font-size: 20px !important; }
    .xs-font-size-22 { font-size: 22px !important; }
    .xs-font-size-24 { font-size: 24px !important; }
    .xs-font-size-28 { font-size: 28px !important; }
    .xs-font-size-32 { font-size: 32px !important; }
    .xs-font-size-36 { font-size: 36px !important; }
    .xs-font-size-05em { font-size: 0.5em !important; }
    .xs-font-size-08em { font-size: 0.8em !important; }
    .xs-font-size-085em { font-size: 0.85em !important; }
    .xs-font-size-09em { font-size: 0.9em !important; }
    .xs-font-size-10em { font-size: 1.0em !important; }
    .xs-font-size-13em { font-size: 1.3em !important; }
    .xs-font-size-15em { font-size: 1.5em !important; }
    .xs-font-size-18em { font-size: 1.8em !important; }
    .xs-font-size-19em { font-size: 1.8em !important; }
    .xs-font-size-20em { font-size: 2.0em !important; }
    .xs-font-size-22em { font-size: 2.2em !important; }
    .xs-font-size-24em { font-size: 2.4em !important; }
    .xs-font-size-28em { font-size: 2.8em !important; }
    .xs-font-size-32em { font-size: 3.2em !important; }
    .xs-font-size-36em { font-size: 3.6em !important; }

    /* text */
    .xs-text-center{  text-align: center !important;  }
    .xs-text-left{  text-align: left !important;  }
    .xs-text-right{  text-align: right !important;  }

    /* button */
    .xs-btn-center{
        float: none !important;
        display: block !important;
        margin-right : auto !important;
        margin-left: auto !important;
    }
    .xs-row{
        margin-right: -15px !important;
        margin-left: -15px !important;
    }

    /* pull */
    .xs-pull-left{  float: left !important;  }
    .xs-pull-right{  float: right !important;  }


}