.b-tl {text-align: left !important;}
.b-tc {text-align: center !important;}
.b-tr {text-align: right !important;}

.b-fx { display: flex !important;}

.b-fx-ai-c { display: flex !important; align-items: center;}

.b-fx-jc-c { display: flex !important; justify-content: center;}

.b-ifx {display: inline-flex !important;}

.b-ac {align-items: center !important;}

.b-jc {justify-content: center !important;}

.b-nowrap {white-space: nowrap;}

.b-ul-init { padding: 0;}
.b-ul-init li { list-style: none;}

.b-tag { color: silver}

/**/
.b-mgc-v-4px > * { margin: 4px 0;}
.b-mgc-v-4px > *:first-child { margin-top: 0px;}
.b-mgc-v-4px > *:last-child { margin-bottom: 0px;}

.b-mgc-v-8px > * { margin: 8px 0;}
.b-mgc-v-8px > *:first-child { margin-top: 0px;}
.b-mgc-v-8px > *:last-child { margin-bottom: 0px;}

.b-mgc-v-12px > * { margin: 12px 0;}
.b-mgc-v-12px > *:first-child { margin-top: 0px;}
.b-mgc-v-12px > *:last-child { margin-bottom: 0px;}
/**/

/**/
.b-mgc-h-4px > * {margin-right: 4px;}
.b-mgc-h-4px > *:last-child {margin-right: 0px;}

.b-mgc-h-8px > * {margin-right: 8px;}
.b-mgc-h-8px > *:last-child {margin-right: 0px;}

.b-mgc-h-12px > * {margin-right: 12px;}
.b-mgc-h-12px > *:last-child {margin-right: 0px;}

.b-mgc-h-20px > * {margin-right: 20px;}
.b-mgc-h-20px > *:last-child {margin-right: 20px;}

.b-mgc-h-24px > * {margin-right: 24px;}
.b-mgc-h-24px > *:last-child {margin-right: 24px;}

.b-mgc-h-28px > * {margin-right: 28px;}
.b-mgc-h-28px > *:last-child {margin-right: 28px;}
/**/

/**/
.b-box {
    padding: 10px 10px; background: #fff; box-sizing: border-box; border-radius: 6px; margin: 15px 0;
    display: block; border: solid 1px #ddd;
}

.b-box:first-child {margin-top: 0;}
.b-box:last-child {margin-bottom: 0;}

.b-box > * {margin: 15px 0;}
.b-box > *:first-child {margin-top: 0;}
.b-box > *:last-child {margin-bottom: 0;}

.b-box--yellow, .b-box--warn {background: #fff9e2;}
.b-box--blue, .b-box--goal {background: #f0f5ea;}
.b-box--red, .b-box--caution {background: #fff7f7;}
.b-box--silver, .b-box--info {background: #f5f5f5;}

.b-box-shadow {box-shadow: 1px 1px 3px #ccc;}
/**/

/**/
.b-img-chk {display: none;}

.b-img-chk-btn {
    background: url(/comm_res/pc/comm/form/b-img-chk.png) center / cover; width: 1.5em; height: 1.5em;
    -webkit-appearance: none;  border: 0;
    vertical-align: middle; transition: all .2s; pointer-events: none;
}

.b-img-chk:checked + .b-img-chk-btn {background-image: url(/comm_res/pc/comm/form/b-img-chk-on.png);}
/**/

.b-link { border-bottom: solid 2px #888; display: inline;}

.b-tag {background: #ea364b; color: white !important; border-radius: .2em;
    height: 1em; padding: 3px 10px;
    display: inline-flex; align-items: center;;
}

.b-f-red { color: red;}
.b-f-bright-red { color: #e60012;}

.b-label {display: inline-flex; align-items: center;}
.b-label > *, .b_label > * {margin: 0 .3em 0 0;}
.b-label > *:last-child, .b_label > *:last-child {margin-right: 0em;}

/**/
.b-nav {display: flex; flex-wrap: wrap;}

.b-nav > a { border-bottom: solid 1px #444; margin-right: 1em; position: relative;}
.b-nav > a:last-child { margin-right: 0;}

.b-nav > a::after { content: ''; position: absolute; right: -.5em; height: 50%; width: 1px; background: #888;
    top: 0; bottom: 0; margin: auto;
}
.b-nav > a:last-child::after {display: none;}
/**/

/**/
.b-pop {
    z-index: 10000; position: fixed; left: 0; top: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,.5);
    display: none; align-items: center; justify-content: center;
}

.b-pop--show { display: flex !important;}

.b-pop-page {
    width: 90%; max-width: 500px;
    background: white;
    box-sizing: border-box;
    box-shadow: 0 0 2px 2px rgba(200,200,200, 0.2);
    overflow: hidden;
    border-radius: 10px;
}

.b-pop-tit { text-align: center; background: #ea364b; height: 44px; display: flex;
    align-items: center; justify-content: center; font-size: 18px; color: #fff;
}

.b-pop-cont { padding: 30px 15px 20px;}

.b-pop-btn-area { display: flex; justify-content: center; margin-top: 20px;}

.b-pop-foot { display: flex; height: 60px; align-items: center; justify-content: center;}
/**/

.b-ta-c { text-align: center;}



.b-btn--round {border-radius: 200px; padding: 0 2em;}

.b-btn--cor1 { background: #2f4cae;}
.b-btn--cor2 { background: #4c5b95;}
.b-btn--gray { background: #919191;}
.b-btn--red { background: #ea364b; border-color: transparent;}




.ul3 li { list-style: none; padding-left: .8em; position: relative; margin: .4em 0;}

.ul3 li::before { width: 3px; height: 3px; background: #222; 
    position: absolute; left: 0; top: 0; bottom: 0; margin: auto; content: '';
}

.b-fx-grow { flex-grow: 1;}



.b-pop--t2 {}

.b-pop--t2 .b-pop-tit { justify-content: flex-start; padding-left:  20px;}

.b-pop--t2 .b-pop-cont { padding-top: 20px; padding-bottom: 20px;}

/**/
.b-tbl { border-spacing: 0; border-top: solid 2px #333; width: 100%;
    border-bottom: solid 1px #333; margin: 20px 0;
}

.b-tbl th { padding: 6px; border: solid 1px #ddd; border-bottom: 0;}
.b-tbl th { background: #f8f8f8; text-align: center; font-family: noto-m; font-weight: normal; vertical-align: middle;}
.b-tbl th:first-child {border-left: 0;}
.b-tbl th:last-child {border-right: 0;}

.b-tbl tbody th { border-right: 0;}

.b-tbl td { padding: 6px; border: solid 1px #ddd; border-bottom: 0;}
.b-tbl td:first-child {border-left: 0;}
.b-tbl td:last-child {border-right: 0;}
/**/

/**/
.b-btn-area {margin: 40px 0 0; display: flex; justify-content: center;}
.b-pop .b-btn-area { margin: 20px 0 5px;}

.b-btn-area > * {margin-right: .5em;}
.b-btn-area > *:last-child { margin-right: 0;}

.b-btn { font-size: 16px; height: 35px; padding: 0 .5em; box-sizing: border-box; display: inline-flex !important; align-items: center;}

.b-btn--one { font-size: 18px; min-width: 178px; border-radius: 200px; height: 39px; font-family: noto-m;}
.b-btn--20px { height: 20px; font-size: 10px;}
.b-btn--24px { height: 24px;}
.b-btn--30px { height: 30px;}
.b-btn--32px { height: 32px;}
.b-btn--34px { height: 34px;}
.b-btn--36px { height: 36px; font-size: 16px; padding: 0 1.3em; border-radius: 5px;}
.b-btn--42px {height: 42px; font-size: 18px;}
.b-btn--46px {height: 46px; font-size: 22px;}
.b-btn--56px {height: 56px; font-size: 18px; padding: 0 18px;}
.b-btn--h34 { height: 34px;}
.b-btn--h47 { height: 47px; font-size: 18px;}
.b-btn--w134 { min-width: 134px;}
.b-btn--round {border-radius: 200px; padding: 0 1.5em;}
.b-btn--pop { background: #2f4cae;}

.b-btn--black { background: #303030;}
.b-btn--silver { background: silver;}
.b-btn--gray { background: #919191;}
.b-btn--white { background: white; color: #222; border: solid 1px #ddd;}
.b-btn--cor1 { background: #4c5b95; border-color: #4c5b95;}
.b-btn--cor2 { background: #3e3e5b; border-color: #3e3e5b;}
.b-btn--red-light {background: #e83524;}

.b-btn-round { padding-left: 2em; padding-right: 2em; border-radius: 200px;}
/**/

.b-rad {border-radius: 8px;}

/**/
.b-sel {border: solid 1px #ddd; height: 37px; padding: 0 5px 0 10px; border-radius: 4px; box-sizing: border-box; width: 100%;
    font-size: 1em; font-family: inherit;
}
.b-sel--h34 {height: 34px; font-size: 1em;}
/**/

.hr {margin: 30px 0;}
.b-img-wrap { display: inline-flex; width: 1em; height: 1em; position: relative; 
    border: solid 1px #ddd; overflow: hidden; border-radius: 4px;
}
.b-img-div {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: center / cover no-repeat;}
.b-img-div--cover { background-size: cover;}
.b-img-div--contain { background-size: contain;}

/**/
.b-pad--h12px { padding-left: 12px !important; padding-right: 12px !important;}
.b-pad--h20px { padding-left: 20px !important; padding-right: 20px !important;}

/**/
.b-inp {}

html .b-inp { width: 100%; height: 46px; padding: 0px 14px 0px 19px; border-radius: 3px !important;
    border: solid 1px #d4d4d4; font-size: 16px; box-sizing: border-box;
}

html textarea.b-inp {padding: .5em;}

html .b-inp:focus, html .b-ta:focus,html .b-sel:focus
{ border-color: red; outline: none;}

html .b-inp::placeholder {color: #a9a9a9;}

.b-inp--h27 { height: 27px !important; font-size: inherit !important; padding: 0 5px !important;}

html .b-inp--32px { height: 32px; font-size: 15px; padding: 0 10px;}
html .b-inp--35px { height: 35px; font-size: 15px; padding: 0 10px;}
html .b-inp--37px { height: 37px; font-size: 15px; padding: 0 10px;}
/**/

/**/
.b-on { display: none;}

.b-on-btn {
    display: inline-flex; align-items: center; justify-content: space-between;
    width: 4em; height: 1.8em; padding: 0 0 0 0.8em;
    background: #aaa; border: solid 1px #aaa;
    border-radius: 200px; overflow: hidden; font-size: 15.5px;
    cursor: pointer; position: relative; /*pointer-events: none;*/
    vertical-align: middle;
}

/*on*/.b-on:checked + .b-on-btn {background: #4c5b95; border: solid 1px #4c5b95;}

.b-on-btn * { transition: all .2s;}

.b-on-txt { color: white; font-size: 1em; position: absolute; top: 0; bottom: 0; margin: auto; left: calc(100% - 1.9em); line-height: 1.6}
/*on*/.b-on:checked + .b-on-btn .b-on-txt { left: .8em; margin-bottom: .2em;}

.b-on-txt::after { content: 'off';}
/*on*/.b-on:checked + .b-on-btn .b-on-txt::after { content: 'on';}

.b-on-toggle { background: #fff; width: 1.5em; height: 1.5em; border-radius: 200px;
    display: block; flex-shrink: 0; position: absolute; right: calc(100% - 1.5em); top: 0; bottom: 0; margin: auto;
}
/*on*/.b-on:checked + .b-on-btn .b-on-toggle { right: 0;}
/**/

.ul3 { padding: 0;}