@import url('https://fonts.googleapis.com/css?family=Caveat');

@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 300;
   src: local('NotoSansJP-Medium.otf'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.otf) format('opentype');
 }

@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 500;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.otf) format('opentype');
 }

@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 900;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.otf) format('opentype');
 }

@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 Mincho";
  src: local("Yu Mincho Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Mincho";
  src: local("Yu Mincho Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Mincho";
  src: local("Yu Mincho Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Mincho";
  src: local("Yu Mincho Medium");
  font-weight: 400;
}

html,body{
	width:100%;
	height:100%;
	font-size:15px;
	-webkit-text-size-adjust: 100%;
	font-family: "Yu Gothic", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	border: 0;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
	color:#000;
	font-style: inherit;
	/*font-weight: inherit;*/
	font-weight: 500;
}

.noto{
	font-family: 'Noto Sans Japanese', "Yu Gothic", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
.yugo{
	font-family: "Yu Gothic", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
.yumin{
	font-family: "Yu Mincho", "游明朝体", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.caveat{
    font-family: 'Caveat', cursive;
}

div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li, li li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: inherit;
font-size: 1rem;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
:focus {/* remember to define focus styles! */
outline: 0;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
a{
-webkit-transition-property:color,opacity,border,background,box-shadow;
-webkit-transition-duration:0.4s;
-webkit-transition-timing-function:ease;
-moz-transition-property:color,opacity,border,background,box-shadow;
-moz-transition-duration:0.4s;
-moz-transition-timing-function:ease;
-o-transition-property:color,opacity,border,background,box-shadow;
-o-transition-duration:0.4s;
-o-transition-timing-function:ease;
}
a img {
border: 0;
}
article, aside, details, figcaption, figure,
@charset "utf-8";

footer, header, hgroup, menu, nav, section {
display: block;
}

.floatleft{
float:left!important;
}
.floatright{
float:right!important;
}
.center,
.aligncenter{
text-align:center!important;
}

.aligncenter{
	display:block;
	margin-left:auto;
	margin-right:auto;
}


.right,
.alignright{
text-align:right!important;
}
.left,
.alignleft{
text-align:left!important;
}

.white{
color:#fff!important;
}
.pink{
color:#fc225f!important;
}
.red{
color:#a60011!important;
}
.maincolor{
    color:#e03451;
}
.blue{
color:#2c5aa0!important;
}
.cyan{
color:#54bec7!important;
}
.green{
color:#77ad36!important;
}
.lime{
color:#570!important;
}
.brown{
color:#a08b7c!important;
}
.yellow{
color:#fff59d!important;
}
.lightyellow{
color:#ffff00!important;
}
.cream{
	color:#fbe8ae!important;
}
.silver{
color:#78736d!important;
}
.lightsilver{
color:#9a958f!important;
}
.gray{
color:#777!important;
}
.darkgray{
color:#4d4d4d!important;
}
.graybrown{
color:#484537!important;
}
.gold{
color:#93886C!important;
}
.coral{
color:#e87156!important;
}
.redgray{
color:#6D645B!important;
}
.lightgray{
color:#efefef!important;
}
.yellow_bk{
	background:linear-gradient(transparent 50%, #fffcbb 50%);
}
.hidden{
	visibility: hidden!important;
}
.visible{
	visibility: visible!important;
}

.width100{
width:100%!important;
}

.inherit{
    font-size:inherit;
    font-weight:inherit;
}

.block{
	display:block!important;
}

.inline-block{
	display:inline-block!important;
}


.bold{
font-weight:500!important;
}
.black{
font-weight:900!important;
}

.lighter,
.nallow{
font-weight:lighter!important;
}
.italic{
font-style:italic!important;
}
.underline{
text-decoration:underline!important;
}
.antialias{
	transform: rotate(0.028deg);
	-o-transform: rotate(0.028deg);
	-ms-transform: rotate(0.028deg);
	-moz-transform: rotate(0.028deg);
	-weblit-transform: rotate(0.028deg);
}
span.antialias,
big.antialias,
small.antialias,
strong.antialias,
em.antialias{
	display:inline-block;
}
.strike{
	text-decoration:line-through!important;
}

.nostyle{
    font-weight:normal!important;
    font-style:normal!important;
    text-decoration:none!important;
}
.noborder{
    border:none!important;
}


.pc_inline{
    display:inline!important;
}
.pc_block{
    display:block!important;
}
.pc_inlineblock{
    display:inline-block!important;
}
.pc_listitem{
    display:list-item!important;
}
.pc_flex{
    display:flex!important;
}
.smp_inline{
    display:none!important;
}
.smp_block{
    display:none!important;
}
.smp_inlineblock{
    display:none!important;
}
.smp_listitem{
    display:none!important;
}
.smp_flex{
    display:none!important;
}

/*タブレット・スマホ*/
@media screen and (max-width: 1024px){
    .smp_inline{
        display:inline!important;
    }
    .smp_block{
        display:block!important;
    }
    .smp_inlineblock{
        display:inline-block!important;
    }
    .smp_listitem{
        display:list-item!important;
    }
    .smp_flex{
        display:flex!important;
    }
    .pc_inline{
        display:none!important;
    }
    .pc_block{
        display:none!important;
    }
    .pc_inlineblock{
        display:none!important;
    }
    .pc_listitem{
        display:none!important;
    }
    .pc_flex{
        display:none!important;
    }

}
/*カスタマイズスタート*/

html,body{
    font-size:18px;
    color:#333;
}
main{
    width:100%;
    overflow:hidden;
}
p{
    line-height:1.6em;
}

a:link,
a:visited{
    color:#3480b9;
    text-decoration:none;
}
a:hover,
a:active{
    color:#3480b9;
    text-decoration:underline;
}

.grayback{
    background:#f4f2eb;
}
.redback{
    background:#e03451;
}
.brownback{
    background:#a08b7c;
}

header{
    position:static!important;
    width:100%;
/*    border-top:0.3em solid #e03451;*/
    padding:0.5em 0;
    background:#f6f6f6;
    z-index:9999;
}
.header_inner{
    width:1000px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.header_inner .quacareer_logo{
    display:inline-block;
    width:9rem;
    height:auto;
}


.header_inner .to_plans{
    display:inline-block;
    background:#ff9630;
    color:#fff;
    text-decoration:none;
    border-radius:0.2em;
    font-size:1.2em;
    padding:0.4em 1.8em;
}
.header_inner .to_plans:hover{
    opacity:0.7;
}
.section_inner{
    width:1000px;
    margin:0 auto;
}


footer{
/*    border-top:0.2rem solid #e03451;*/
    padding:2rem 0 0;
}
footer .footer_inner{
    width:1000px;
    margin:0 auto;
    padding-bottom:2rem;
    display:flex;
    justify-content:space-between;
    flex-wrap:nowrap;
    align-items:flex-end;
}
footer .footer_inner .quacareer_logo{
    display:inline-block;
    width:9rem;
    height:auto;
}
footer .footer_inner ul li{
    display:inline-block;
}
footer .footer_inner ul li:not(:last-child){
    padding-right:1em;
    border-right:1px solid #eee;
    margin-right:1rem;
}
footer .footer_inner ul li a{
    font-size:0.85rem;
}
footer .copyright{
    text-align:center;
    font-size:0.8rem;
    line-height:1em;
    padding:0.3em 0;
    background:#eee;
    color:#777;
}


#common_section{
    padding:0 0 3rem;
}

.box-title{
    font-size:2rem;
    margin-bottom:1em;
}
.heading{
    font-size:1em;
    padding:0.3em 0.5em;
    background-color:#f4f2eb;
    background-image:url('../images/dh/white_stripe.png');
    background-size: 0.3rem;
    background-repeat: repeat;
    font-weight:900;
    margin-bottom:1em;
}

#cart .table{
    margin-bottom:2rem;
}
#cart .login_info{
    padding-top:2rem;
}
#cart .desc{
    padding:0 1rem 1rem;
}
#cart .desc p{
    font-size:0.9rem;
    line-height:1.5em;
    margin-bottom:1em;
}
#cart .must{
    font-size:0.74em;
    display:inline-block;
    padding:0.2em 0.5em;
    border-radius:0.3em;
    color:#fff;
    background:#d45454;
    margin-left:0.2em;
}


#cart #agree.form-control{
    width:1em;
    height:1em;
    display:inline-block;
    line-height:1em;
    position:relative;
    top:0.2em;
    margin-right:0.2em;
}
#cart .agree_wrapper{
    padding-top:1.5rem;
}
#cart .agree_wrapper p{
    font-size:0.9rem;
    margin-bottom:1em;
}
#cart .col-xs-1{
    width:auto;
    line-height: 2em;
    text-align:center;
    padding:0;
}

.btn-primary:link,
.btn-primary:visited,
.btn-primary:hover,
.btn-primary:active{
    color:#fff;
}
.card_info{
    margin-bottom:2rem;
}
.card_info .form-group{
    display:flex;
    width:100%;
    margin:0 auto 2rem;
    justify-content:space-between;
    align-items:center;
    flex-wrap:nowrap;
}
.card_info .form-group label{
    display:block;
    width:10em;
    text-align:right;
}
.card_info .form-group .row{
    margin:0;
    width:calc(100% - 11rem);
    display:block;
}
.card_info .form-group .row .col-md-8{
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
}
.card_info .form-group .row .col-md-4{
    width:30%;
    max-width:30%;
    margin:0;
    padding:0;
}

.form-check-label{
    font-size:0.7rem;
}
.login_desc{
    font-size:0.9rem;
    line-height:1.5em;
    margin-bottom:2rem;
}

.card_info .card_select_wrapper{
    padding-bottom:1.5rem;
}
.card_info .card_select{
    display:inline-block;
    padding:0.5em;
}
.card_info #saved_card{
    padding-left:2rem;
}
.card_info #saved_card span{
    font-weight:900;
}

#store .card_info{
    padding:0 1rem;
}
#store .card_info p{
    margin-bottom:0.5em;
}
#store .buttons{
    padding-top:1rem;
    display:flex;
    justify-content:center;
    flex-wrap:nowrap;
    align-items:center;
}

#store .buttons > div{
    display:inline-block;
}
#store .buttons > div.submit{
    margin-left:1rem;
}

.linkbutton{
    display:inline-block;
    font-size:0.9em;
    padding:0.4em 1em;
    margin:0 0.3em;
    line-height:1em;
    background-color: #007bff;
    border-radius:0.2em;
}

.linkbutton:link,
.linkbutton:visited{
    background-color: #007bff;
    color:#fff;
    text-decoration:none;
}
.linkbutton:hover,
.linkbutton:active{
    background-color: #0069d9;
    color:#fff;
    text-decoration:none;
}

.payments_table{
    table-layout:fixed;
}
.payments_table tr th:nth-child(2){
    width:8em;
}

.form-control::placeholder,
input::placeholder {
  color: #bbb;
}
/* IE */
.form-control:-ms-input-placeholder,
input:-ms-input-placeholder {
  color: #bbb;
}
/* Edge */
.form-control::-ms-input-placeholder,
input::-ms-input-placeholder {
  color: #bbb;
}


@media all and (-ms-high-contrast:none){
    _:-ms-lang(x)::-ms-backdrop, .header_inner .quacareer_logo{
          height:3rem;
    } /* IE11 */
    _:-ms-lang(x)::-ms-backdrop, footer .footer_inner .quacareer_logo{
      height:3rem;
    } /* IE11 */
}

#survey{
    width:500px;
    margin:0 auto;
    background:#f5f5f5;
    padding:1rem;
    box-sizing:border-box;
    border-radius:0.4em;
    margin-bottom:1.5rem;
}
#survey h5{
    font-size:1.1rem;
    margin-bottom:0.5em;
}
#survey label{
    display:inline-block;
    line-height:2em;
}
#survey input[type=text]{
    display:block;
    font-size:16px;
    width:100%;
    margin-top:0.5em;
    margin-bottom:1rem;
}
#survey button{
	font-family: "Yu Gothic", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    appearance: none;
    cursor: default;
    padding:0.4em 2em;
    box-sizing:border-box;
    background:#006fdb;
    color:#fff;
    font-size:1em;
    font-weight:900;
    border-radius:0.2em;
}
#survey button:hover{
    opacity:0.7;
}
#survey .after{
    display:none;
}

#agree_box{
    margin-bottom:1em;
    text-align:center;
    background:#fcfbf9;
    border:1px solid #e2ddd9;
    padding:1.4em;
    border-radius:0.3em;
}
#agree_box p{
    margin-bottom:1em;
}
#agree_box p a{
    text-decoration:underline;
}
#agree_box p a:hover{
    text-decoration:none;
    opacity:0.7;
}
#agree_box .check_wrapper label{
    font-weight:900;
    letter-spacing:0.05em;
}
#agree_box .check_wrapper label input{
    margin-right:0.4em;
}

#agree_box.on {
    background:#f5fcff;
    border:1px solid #d9dfe2;
}
#agree_box.on label{
    color:#0069d9;
}
#submit_button{
    display:none;
}
#submit_button_off{
    background:#aaa;
    border-color: #aaa;
}

@media screen and (max-width:1768px){
    footer .footer_inner{
        padding-bottom:4rem;
        align-items: flex-start;
    }
}
@media screen and (max-width:1024px){
    html,body{
        font-size:4vw;
    }
    .header_inner,
    .section_inner,
    footer .footer_inner{
        width:96%;
    }

    img{
        max-width:100%;
    }

    footer .footer_inner{
        display:block;
        text-align:center;
    }
    footer .footer_inner ul li{
        display:block;
        text-align:center;
    }
    footer .footer_inner ul li:not(:last-child){
        padding-right:0;
        border-right:0;
        margin-right:0;
        margin-bottom:0.7em;
    }

    footer .copyright{
        text-align:center;
        font-size:0.8rem;
        line-height:1em;
        padding:0.3em 0;
        background:#eee;
        color:#777;
    }
    
    #cart .table{
        margin-bottom:2rem;
        word-break: break-all;
        word-wrap: break-all;
        border-collapse:collapse;
        table-layout:fixed;
    }
    #cart .table tr th:nth-child(1){
       
    }
    #cart .table tr th:nth-child(2){
        width:8em;
    }
    #cart .table tr th:nth-child(3){
        width:8em;
    }
    #cart .table tr th,
    #cart .table tr td{
        font-size:0.8rem;
    }
     #cart .table tr td span{
         font-size:inherit;
     }
    #cart .desc{
        padding:0 0 1rem;
    }
    #cart .col-md-4 input{
        margin-bottom:0.6em;
    }
    #cart .col-xs-1{
        width:auto;
        display:inline-block;
        padding:0 1em;
    }
    #cart .col-xs-4{
        width:4em;
        display:inline-block;
        box-sizing:content-box;
        padding-right:0;
    }
    #cart .col-xs-6{
        width:6em;
        display:inline-block;
        box-sizing:content-box;
        padding-left:0;
    }

    .card_info .form-group{
        display:block;
        margin-bottom:1rem;
    }
    .card_info .form-group label{
        display:block;
        width:100%;
        text-align:left;
        font-weight:900;
        margin-bottom:0.2em;
    }
    .card_info .form-group .row{
        margin:0;
        width:100%;
        display:block;
    }
    .payment_buttons{
        display:flex;
        justify-content:center;
        align-items:center;
        flex-wrap:nowrap;
    }
    .payment_buttons > div{
        display:inline-block!important;
        width:auto!important;
    }

    .card_info .card_select{
        display:block;
    }
    .card_info #saved_card{
        padding:0 1rem;
    }

    .card_info .expire_row{
        justify-content:left;
        align-items:center;
        flex-wrap:nowrap;
    }
    .card_info .expire_row .col-md-1{
        width:2em;
    }
    .card_info .expire_row .col-md-2{
        width:8em;
        padding:0;
    }

    #store .buttons{
        display:flex;
        flex-flow: column-reverse nowrap;
    }
    #store .buttons > div{
        text-align:center;
        display:block;
    }
    #store .buttons > div.submit{
        margin-bottom:1rem;
        margin-left:0;
    }

    .form-control, select option{
        font-size:16px;
    }

    #survey{
        width:94%;
    }
}