@charset "utf-8";

/* ######################################################################################

　ボタン

###################################################################################### */

/* ====================================================
　基本スタイル
==================================================== */
.buttonStyle,
button.buttonStyle,
a.buttonStyle,
input.buttonStyle {
    box-sizing:border-box;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fafafa;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.95, #F1F1F1), color-stop(0.00, #F9F9F9)) !important;
    background: -webkit-linear-gradient(top, #F9F9F9 0%, #F1F1F1 95%) !important;
    background: -moz-linear-gradient(top, #F9F9F9 0%, #F1F1F1 95%) !important;
    background: -o-linear-gradient(top, #F9F9F9 0%, #F1F1F1 95%) !important;
    background: -ms-linear-gradient(top, #F9F9F9 0%, #F1F1F1 95%) !important;
    background: linear-gradient(top, #F9F9F9 0%, #F1F1F1 95%) !important;
    padding: 0.6em 1.5em;
    text-align: center;
    vertical-align:middle;
    text-decoration: none;
    line-height:1;
    font-weight: normal;
    font-size:1.5rem;
    color: #757575;
    cursor: pointer;
    overflow: hidden;
}

@media print, screen and (max-width: 767px) {
.buttonStyle.xs-block {
    display: block;
    width: 100%;
    margin: 1em 0;
    padding: 0.75em 1em;
}
}

@media print, screen and (max-width: 991px) {
.buttonStyle.sm-block {
    display: block;
    width: 100%;
    margin: 1em 0;
    padding: 0.75em 1em;
}
}

@media screen and (max-width: 1199px) {
.buttonStyle.md-block {
    display: block;
    width: 100%;
    margin: 1em 0;
    padding: 0.75em 1em;
}
}

@media screen and (max-width: 9999px) {
.buttonStyle.lg-block {
    display: block;
    width: 100%;
    margin: 1em 0;
    padding: 0.75em 1em;
}
}


@media only screen and (min-width: 1000px) {
.buttonStyle.thin,
a.buttonStyle.thin,
input.buttonStyle.thin {
    padding: 0.3em 1em;
    font-size:1.4rem;
}
}
@media only screen and (max-width: 999px) {
.buttonStyle.thin,
a.buttonStyle.thin,
input.buttonStyle.thin {
    padding: 0.75em 1em;
    font-size:1.4rem;
}
}

/* ====================================================
　Load
==================================================== */
.buttonStyle.load,
a.buttonStyle.load,
input.buttonStyle.load {
}

/* ====================================================
　New
==================================================== */
.buttonStyle.new,
a.buttonStyle.new,
input.buttonStyle.new {
}

/* ====================================================
　Upload
==================================================== */
.buttonStyle.upload,
a.buttonStyle.upload,
input.buttonStyle.upload {
}

/* ====================================================
　del
==================================================== */
.buttonStyle.del,
a.buttonStyle.del,
input.buttonStyle.del {
}
/* ====================================================
　disable
==================================================== */
.buttonStyle.disable,
a.buttonStyle.disable,
input.buttonStyle.disable {
    background:#ffffff !important;
    border-color: #cccccc !important;
    color: #cccccc !important;
    cursor:default;
}
/* ====================================================
　regist
==================================================== */
.buttonStyle.regist,
a.buttonStyle.regist,
input.buttonStyle.regist {
}
/* ====================================================
　next
==================================================== */
.buttonStyle.next,
a.buttonStyle.next,
input.buttonStyle.next {
}

/* ====================================================
　autoAdd
==================================================== */
.buttonStyle.autoAdd,
a.buttonStyle.autoAdd,
input.buttonStyle.autoAdd {
}
@media print, screen and (min-width: 600px) {
    .buttonStyle.autoAdd,
    a.buttonStyle.autoAdd,
    input.buttonStyle.autoAdd {
        margin-left:1em;
    }
}
@media print, screen and (max-width: 599px) {
    .buttonStyle.autoAdd,
    a.buttonStyle.autoAdd,
    input.buttonStyle.autoAdd {
        display:block;
        margin-top:0.25em;
    }
}


/* ====================================================
	ボタンボックス
==================================================== */
.buttonBox {
    text-align: center;
}
.buttonBox.pageMove {
    margin-top:20px;
    margin-bottom:40px;
}
.buttonBox p { text-align: center; }
.buttonBox li .button {
    display: block;
    padding: 0.75em;
}
.buttonBox.center .row {
    display: inline-block;
    width: 103%;
    max-width: 450px;
}
.buttonBox.center.single .row { max-width: 200px; }

.buttonBox.center .row.wide{
    max-width: 700px;
}
.buttonBox .row .buttonStyle,
.buttonBox .row a.buttonStyle,
.buttonBox .row input.buttonStyle {display:block; width:100%;}

@media print, screen and (max-width: 767px) {
.buttonBox > .row > .col-xs-12 {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
.buttonBox.center .row.wide{
    max-width: 450px;
}
}

@media print, screen and (max-width: 991px) {
.buttonBox > .row > .col-sm-12 {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
}

@media screen and (max-width: 1199px) {
.buttonBox > .row > .col-md-12 {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
}

@media screen and (max-width: 9999px) {
.buttonBox > .row > .col-lg-12 {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
}


/* ######################################################################################

　ボックス

###################################################################################### */

/* ====================================================
　ボーダーボックス
==================================================== */
.contentsBoxBorder {
    border:1px solid #e1e1e1;
    background:#ffffff;
}

@media only screen and (min-width: 1000px) {
    .contentsBoxBorder {
        padding: 15px 22px;
    }
}
@media only screen and (max-width: 999px) {
    .contentsBoxBorder {
        padding: 15px 10px;
    }
}
/* ====================================================
　ボックス
==================================================== */
.contentsBox {
}
.contentsBox + .contentsBox {
    margin-top:30px;
}

/* ######################################################################################

　タイトル

###################################################################################### */

/* ====================================================
　下線つき
==================================================== */
.titleUnderline {
    border-bottom:1px solid #E1E1E1;
    margin-bottom:1em;
    padding-bottom: 1em;
    font-weight: bold;
    font-size:130%;
    line-height: 100%;
    color: #333;
}
@media only screen and (min-width: 1000px) {
    .contentsBoxBorder .titleUnderline {
        margin-right:-22px;
        margin-left:-22px;
        padding-right:22px;
        padding-left:22px;
    }
}
@media only screen and (max-width: 999px) {
    .contentsBoxBorder .titleUnderline {
        margin-right:-10px;
        margin-left:-10px;
        padding-right:10px;
        padding-left:10px;
    }
}

/* ====================================================
　メインカラー帯タイトル
==================================================== */
.titleMainColor {
    margin-bottom: 1.25em;
    padding:0.5em;
    line-height:1.2;
    font-weight: normal;
    color: #fff;
}
@media only screen and (min-width: 1000px) {
.titleMainColor {
    font-size:1.7rem;
}
}
@media only screen and (max-width: 999px) {
.titleMainColor {
    margin-left:-10px;
    margin-right:-10px;
    padding:1.25em 1em;
    font-size:1.7rem;
}
}

/* ====================================================
　タブ＋キャプションタイトル
==================================================== */


.titleTabCaption {
    border-bottom:5px solid #555555;
    margin-bottom:1.25em;
    text-align:left;
    line-height:1;
    font-weight:normal;
    font-size:1.5rem;
	font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ','Meiryo','ＭＳ Ｐゴシック',sans-serif;
}
.titleTabCaption span {
    display:inline-block;
    background:#555555;
    padding:0.25em 0.75em 0.1em;
    color:#ffffff;
    font-size:2.0rem;
}
.titleTabCaption small {
    display:inline-block;
    position:relative;
    top:-0.15em;
    margin-left:1em;
    font-size:1.6rem;
}

.titleTabCaption.step1 {border-color:#c10d23;}
.titleTabCaption.step2 {border-color:#006837;}
.titleTabCaption.step3 {border-color:#1b1464;}

.titleTabCaption.step1 span {background-color:#c10d23;}
.titleTabCaption.step2 span {background-color:#006837;}
.titleTabCaption.step3 span {background-color:#1b1464;}

@media only screen and (min-width: 1000px) {
}
@media only screen and (max-width: 999px) {
}




/* ######################################################################################

　Box

###################################################################################### */
.borderBox {
    border:1px solid #e1e1e1;
    border-radius:3px;
    background:#ffffff;
}
.borderBox:after {
    content:"";
    display:table;
    clear:both;
}
@media only screen and (min-width: 1000px) {
    .borderBox {
        padding:1.5%;
    }
}
@media only screen and (max-width: 999px) {
    .borderBox {
        padding:1.5%;
    }
}



/* ######################################################################################

　dl

###################################################################################### */

/* ====================================================
　項目横並び
==================================================== */
dl.innerInline + dl.innerInline {margin-top:0.25em;}

dl.innerInline dt,
dl.innerInline dd {
    display:inline-block;
}


/* ######################################################################################

　テーブル

###################################################################################### */
/* ====================================================
　基本設定
==================================================== */
table { width: 100%; }
caption {
    text-align: left;
    font-size:80%;
    font-weight: bold;
}
th,
td {
    border-color: #cccccc;
    padding: 0.5em;
    text-align: left;
    font-weight: normal;
}
#undercolumn .subTotal .pricebox {width: 100%;}
.pricebox td .price_r{color: #f00; font-weight: bold;}

@media print, screen and (min-width: 768px) {
    th {
        background: #f7f7f7;
        padding: 0.5em;
        vertical-align: top;
        font-size:1.5rem;
    }
    td {
        padding: 0.5em;
        font-size:1.5rem;
    }
}

@media screen and (max-width: 767px) {
    th {
        background: #f7f7f7;
        padding: 0.5em;
    }
    td { padding: 0.5em; }
}
/* ====================================================
　囲み
==================================================== */
.borderHorizon th,
.borderHorizon td { border-width: 1px 0; }
.borderBox th,
.borderBox td { border-width: 1px; }
/* ====================================================
　線種
==================================================== */
.borderSolid th { border-style: solid; }
.borderSolid td { border-style: solid; }
.borderSolid td:before { border-style: solid; }
.borderDotted th { border-style: dotted; }
.borderDotted td { border-style: dotted; }
.borderDotted td:before { border-style: dotted; }
.borderDashed th { border-style: dashed; }
.borderDashed td { border-style: dashed; }
.borderDashed td:before { border-style: dashed; }
/* ====================================================
　*のときTHをサイドに作る
==================================================== */
table.cell-xs-create td:before,
table.cell-sm-create td:before,
table.cell-md-create td:before,
table.cell-lg-create td:before {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    border-width: 0 1px 0 0;
    border-color: #cccccc;
    background: #eeeeee;
    width: 6em;
    height: 100%;
    padding: 0.5em;
}
table.borderHorizon.cell-xs-create td:before,
table.borderHorizon.cell-sm-create td:before,
table.borderHorizon.cell-md-create td:before,
table.borderHorizon.cell-lg-create td:before { border: none; }

@media print, screen and (max-width: 767px) {
/* ====================================================
　xsのときcellをBlock
==================================================== */
    table.xs-block { display: block; }
    table.xs-block caption,
    table.xs-block thead,
    table.xs-block tbody,
    table.xs-block tr,
    table.xs-block th,
    table.xs-block td { display: block; }
    table.xs-block th,
    table.xs-block td { margin-bottom: -1px; }
    table.xs-block th {
        padding-top: 0;
        padding-bottom: 0;
    }
    table.cell-xs-create th { display: none; }
    table.cell-xs-create td {
        position: relative;
        overflow: hidden;
        padding-left: 7em;
    }
    table.cell-xs-create td:before { content: attr(title); }
}

@media print, screen and (max-width: 999px) {
/* ====================================================
　smのときcellをBlock
==================================================== */
    table.sm-block { display: block; }
    table.sm-block caption,
    table.sm-block thead,
    table.sm-block tbody,
    table.sm-block tr,
    table.sm-block th,
    table.sm-block td { display: block; }
    table.sm-block th,
    table.sm-block td { margin-bottom: -1px; }
    table.sm-block th {
        padding-top: 0;
        padding-bottom: 0;
    }
    table.cell-sm-create tr:first-child th { display: none; }
    table.cell-sm-create td {
        position: relative;
        overflow: hidden;
        padding-left: 7em;
    }
    table.cell-sm-create td:before { content: attr(title); }
}

@media screen and (max-width: 1199px) {
/* ====================================================
　mdのときcellをBlock
==================================================== */
    table.md-block { display: block; }
    table.md-block caption,
    table.md-block thead,
    table.md-block tbody,
    table.md-block tr,
    table.md-block th,
    table.md-block td { display: block; }
    table.md-block th,
    table.md-block td { margin-bottom: -1px; }
    table.md-block th {
        padding-top: 0;
        padding-bottom: 0;
    }
    table.cell-md-create th { display: none; }
    table.cell-md-create td {
        position: relative;
        overflow: hidden;
        padding-left: 7em;
    }
    table.cell-md-create td:before { content: attr(title); }
}

@media screen and (max-width: 9999px) {
/* ====================================================
　lgのときcellをBlock
==================================================== */
    table.lg-block { display: block; }
    table.lg-block caption,
    table.lg-block thead,
    table.lg-block tbody,
    table.lg-block tr,
    table.lg-block th,
    table.lg-block td { display: block; }
    table.lg-block th,
    table.lg-block td { margin-bottom: -1px; }
    table.lg-block th {
        padding-top: 0;
        padding-bottom: 0;
    }
    table.cell-lg-create th { display: none; }
    table.cell-lg-create td {
        position: relative;
        overflow: hidden;
        padding-left: 7em;
    }
    table.cell-lg-create td:before { content: attr(title); }
}


/* ######################################################################################

　フォーム

###################################################################################### */
    table.inputTable select {
        margin-bottom:0;
        vertical-align:middle;
        }
    table.inputTable .inputSpan {
        box-sizing: border-box;
        display: inline-block;
    }

@media only screen and (min-width: 1000px) {
    table.inputTable .inputSpan {
        margin-right: 5px;
    }
}
@media only screen and (max-width: 999px) {
    table.inputTable .inputSpan {
        position: relative;
        top: -8px;
        width: 50%;
        margin: 0 0 -8px;
    }
    table.inputTable .inputSpan + .inputSpan {
        padding-left:5px;
    }
}

table.inputTable .size-input-name { width: 16em; }
table.inputTable .size-input-zip { width: 7em; }
table.inputTable .size-input-address { width: 26em; }
table.inputTable .size-input-company { width: 17em; }
table.inputTable .size-input-division { width: 17em; }

@media only screen and (min-width: 1000px) {
table.inputTable .size-input-nameS { width: 120px; }
/*
.size-input-quantity { width: 5em; }
.size-input-zip3 { width: 4em; }
.size-input-zip4 { width: 5em; }
.size-input-pref { width: 6em; }
.size-input-tel { width: 12.5em; }
.size-input-telS { width: 5em; }
.size-input-homepage { width: 35em; }
.size-input-email { width: 20em; }
.size-input-message { width: 100%; }
*/
}
@media only screen and (max-width: 999px) {
    table.inputTable .size-input-nameS {width:100%;}

table.inputTable .size-input-name,
table.inputTable .size-input-zip,
table.inputTable .size-input-address,
table.inputTable .size-input-company,
table.inputTable .size-input-division {max-width:100%;}
}
/* ######################################################################################

　フォーム

###################################################################################### */
form table .sample {
    display:inline-block;
    vertical-align:middle;
    font-size:1.4rem;
}




/* end */