@charset "utf-8";

/* -------------------------------------------------- 
 * style.css
 * 
 * ベースとなる共通パーツについてのCSS
 * ※各個別ページ用のCSSが必要な場合はCSSファイルを別途作成すること
-------------------------------------------------- */


/* 游字体使うための記述 */

@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;
}


/* ボタン色、フォーム、テーブルのルールだけbootstrap */


/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */


/*!
 * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=a68a3d874d3e1ec52bd1edb9aa20534f)
 * Config saved to config.json and https://gist.github.com/a68a3d874d3e1ec52bd1edb9aa20534f
 */


/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */


/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],
template {
    display: none
}

a {
    background-color: transparent
}

a:active,
a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-weight: bold
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: 0.67em 0
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    margin: 0
}

button {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],
html input[disabled] {
    cursor: default
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type="checkbox"],
input[type="radio"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto
}

input[type="search"] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: bold
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td,
th {
    padding: 0
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff
}

input,
button,
select,
textarea {
    font-size: inherit;
    line-height: inherit
}

a {
    color: #337ab7;
    text-decoration: none
}

a:hover,
a:focus {
    /* color: #23527c; */
    text-decoration: underline
}

a:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

figure {
    margin: 0
}

img {
    vertical-align: middle
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto
}

.img-rounded {
    border-radius: 6px
}

.img-thumbnail {
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    display: inline-block;
    max-width: 100%;
    height: auto
}

.img-circle {
    border-radius: 50%
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto
}

[role="button"] {
    cursor: pointer
}

table {
    background-color: transparent
}

caption {
    padding-top: 8px;
    padding-bottom: 8px;
    color: #777;
    text-align: left
}

th {
    text-align: left
}

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px
}

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd
}

.table>thead>tr>th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd
}

.table>caption+thead>tr:first-child>th,
.table>colgroup+thead>tr:first-child>th,
.table>thead:first-child>tr:first-child>th,
.table>caption+thead>tr:first-child>td,
.table>colgroup+thead>tr:first-child>td,
.table>thead:first-child>tr:first-child>td {
    border-top: 0
}

.table>tbody+tbody {
    border-top: 2px solid #ddd
}

.table .table {
    background-color: #fff
}

.table-condensed>thead>tr>th,
.table-condensed>tbody>tr>th,
.table-condensed>tfoot>tr>th,
.table-condensed>thead>tr>td,
.table-condensed>tbody>tr>td,
.table-condensed>tfoot>tr>td {
    padding: 5px
}

.table-bordered {
    border: 1px solid #ddd
}

.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>tbody>tr>td,
.table-bordered>tfoot>tr>td {
    border: 1px solid #ddd
}

.table-bordered>thead>tr>th,
.table-bordered>thead>tr>td {
    border-bottom-width: 2px
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #f9f9f9
}

.table-hover>tbody>tr:hover {
    background-color: #f5f5f5
}

table col[class*="col-"] {
    position: static;
    float: none;
    display: table-column
}

table td[class*="col-"],
table th[class*="col-"] {
    position: static;
    float: none;
    display: table-cell
}

.table>thead>tr>td.active,
.table>tbody>tr>td.active,
.table>tfoot>tr>td.active,
.table>thead>tr>th.active,
.table>tbody>tr>th.active,
.table>tfoot>tr>th.active,
.table>thead>tr.active>td,
.table>tbody>tr.active>td,
.table>tfoot>tr.active>td,
.table>thead>tr.active>th,
.table>tbody>tr.active>th,
.table>tfoot>tr.active>th {
    background-color: #f5f5f5
}

.table-hover>tbody>tr>td.active:hover,
.table-hover>tbody>tr>th.active:hover,
.table-hover>tbody>tr.active:hover>td,
.table-hover>tbody>tr:hover>.active,
.table-hover>tbody>tr.active:hover>th {
    background-color: #e8e8e8
}

.table>thead>tr>td.success,
.table>tbody>tr>td.success,
.table>tfoot>tr>td.success,
.table>thead>tr>th.success,
.table>tbody>tr>th.success,
.table>tfoot>tr>th.success,
.table>thead>tr.success>td,
.table>tbody>tr.success>td,
.table>tfoot>tr.success>td,
.table>thead>tr.success>th,
.table>tbody>tr.success>th,
.table>tfoot>tr.success>th {
    background-color: #dff0d8
}

.table-hover>tbody>tr>td.success:hover,
.table-hover>tbody>tr>th.success:hover,
.table-hover>tbody>tr.success:hover>td,
.table-hover>tbody>tr:hover>.success,
.table-hover>tbody>tr.success:hover>th {
    background-color: #d0e9c6
}

.table>thead>tr>td.info,
.table>tbody>tr>td.info,
.table>tfoot>tr>td.info,
.table>thead>tr>th.info,
.table>tbody>tr>th.info,
.table>tfoot>tr>th.info,
.table>thead>tr.info>td,
.table>tbody>tr.info>td,
.table>tfoot>tr.info>td,
.table>thead>tr.info>th,
.table>tbody>tr.info>th,
.table>tfoot>tr.info>th {
    background-color: #d9edf7
}

.table-hover>tbody>tr>td.info:hover,
.table-hover>tbody>tr>th.info:hover,
.table-hover>tbody>tr.info:hover>td,
.table-hover>tbody>tr:hover>.info,
.table-hover>tbody>tr.info:hover>th {
    background-color: #c4e3f3
}

.table>thead>tr>td.warning,
.table>tbody>tr>td.warning,
.table>tfoot>tr>td.warning,
.table>thead>tr>th.warning,
.table>tbody>tr>th.warning,
.table>tfoot>tr>th.warning,
.table>thead>tr.warning>td,
.table>tbody>tr.warning>td,
.table>tfoot>tr.warning>td,
.table>thead>tr.warning>th,
.table>tbody>tr.warning>th,
.table>tfoot>tr.warning>th {
    background-color: #fcf8e3
}

.table-hover>tbody>tr>td.warning:hover,
.table-hover>tbody>tr>th.warning:hover,
.table-hover>tbody>tr.warning:hover>td,
.table-hover>tbody>tr:hover>.warning,
.table-hover>tbody>tr.warning:hover>th {
    background-color: #faf2cc
}

.table>thead>tr>td.danger,
.table>tbody>tr>td.danger,
.table>tfoot>tr>td.danger,
.table>thead>tr>th.danger,
.table>tbody>tr>th.danger,
.table>tfoot>tr>th.danger,
.table>thead>tr.danger>td,
.table>tbody>tr.danger>td,
.table>tfoot>tr.danger>td,
.table>thead>tr.danger>th,
.table>tbody>tr.danger>th,
.table>tfoot>tr.danger>th {
    background-color: #f2dede
}

.table-hover>tbody>tr>td.danger:hover,
.table-hover>tbody>tr>th.danger:hover,
.table-hover>tbody>tr.danger:hover>td,
.table-hover>tbody>tr:hover>.danger,
.table-hover>tbody>tr.danger:hover>th {
    background-color: #ebcccc
}

.table-responsive {
    overflow-x: auto;
    min-height: 0.01%
}

@media screen and (max-width:767px) {
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd
    }
    .table-responsive>.table {
        margin-bottom: 0
    }
    .table-responsive>.table>thead>tr>th,
    .table-responsive>.table>tbody>tr>th,
    .table-responsive>.table>tfoot>tr>th,
    .table-responsive>.table>thead>tr>td,
    .table-responsive>.table>tbody>tr>td,
    .table-responsive>.table>tfoot>tr>td {
        white-space: nowrap
    }
    .table-responsive>.table-bordered {
        border: 0
    }
    .table-responsive>.table-bordered>thead>tr>th:first-child,
    .table-responsive>.table-bordered>tbody>tr>th:first-child,
    .table-responsive>.table-bordered>tfoot>tr>th:first-child,
    .table-responsive>.table-bordered>thead>tr>td:first-child,
    .table-responsive>.table-bordered>tbody>tr>td:first-child,
    .table-responsive>.table-bordered>tfoot>tr>td:first-child {
        border-left: 0
    }
    .table-responsive>.table-bordered>thead>tr>th:last-child,
    .table-responsive>.table-bordered>tbody>tr>th:last-child,
    .table-responsive>.table-bordered>tfoot>tr>th:last-child,
    .table-responsive>.table-bordered>thead>tr>td:last-child,
    .table-responsive>.table-bordered>tbody>tr>td:last-child,
    .table-responsive>.table-bordered>tfoot>tr>td:last-child {
        border-right: 0
    }
    .table-responsive>.table-bordered>tbody>tr:last-child>th,
    .table-responsive>.table-bordered>tfoot>tr:last-child>th,
    .table-responsive>.table-bordered>tbody>tr:last-child>td,
    .table-responsive>.table-bordered>tfoot>tr:last-child>td {
        border-bottom: 0
    }
}

fieldset {
    padding: 0;
    margin: 0;
    border: 0;
    min-width: 0
}

legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: inherit;
    color: #333;
    border: 0;
    border-bottom: 1px solid #e5e5e5
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold
}

input[type="search"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

input[type="radio"],
input[type="checkbox"] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal
}

input[type="file"] {
    display: block
}

input[type="range"] {
    display: block;
    width: 100%
}

select[multiple],
select[size] {
    height: auto
}

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

output {
    display: block;
    padding-top: 7px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555
}

.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6)
}

.form-control::-moz-placeholder {
    color: #999;
    opacity: 1
}

.form-control:-ms-input-placeholder {
    color: #999
}

.form-control::-webkit-input-placeholder {
    color: #999
}

.form-control::-ms-expand {
    border: 0;
    background-color: transparent
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: #eee;
    opacity: 1
}

.form-control[disabled],
fieldset[disabled] .form-control {
    cursor: not-allowed
}

textarea.form-control {
    height: auto
}

input[type="search"] {
    -webkit-appearance: none
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type="date"].form-control,
    input[type="time"].form-control,
    input[type="datetime-local"].form-control,
    input[type="month"].form-control {
        line-height: 34px
    }
    input[type="date"].input-sm,
    input[type="time"].input-sm,
    input[type="datetime-local"].input-sm,
    input[type="month"].input-sm,
    .input-group-sm input[type="date"],
    .input-group-sm input[type="time"],
    .input-group-sm input[type="datetime-local"],
    .input-group-sm input[type="month"] {
        line-height: 30px
    }
    input[type="date"].input-lg,
    input[type="time"].input-lg,
    input[type="datetime-local"].input-lg,
    input[type="month"].input-lg,
    .input-group-lg input[type="date"],
    .input-group-lg input[type="time"],
    .input-group-lg input[type="datetime-local"],
    .input-group-lg input[type="month"] {
        line-height: 46px
    }
}

.form-group {
    margin-bottom: 15px
}

.radio,
.checkbox {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px
}

.radio label,
.checkbox label {
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer
}

.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
    position: absolute;
    margin-left: -20px;
    margin-top: 4px \9
}

.radio+.radio,
.checkbox+.checkbox {
    margin-top: -5px
}

.radio-inline,
.checkbox-inline {
    position: relative;
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    vertical-align: middle;
    font-weight: normal;
    cursor: pointer
}

.radio-inline+.radio-inline,
.checkbox-inline+.checkbox-inline {
    margin-top: 0;
    margin-left: 10px
}

input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"].disabled,
input[type="checkbox"].disabled,
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"] {
    cursor: not-allowed
}

.radio-inline.disabled,
.checkbox-inline.disabled,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox-inline {
    cursor: not-allowed
}

.radio.disabled label,
.checkbox.disabled label,
fieldset[disabled] .radio label,
fieldset[disabled] .checkbox label {
    cursor: not-allowed
}

.form-control-static {
    padding-top: 7px;
    padding-bottom: 7px;
    margin-bottom: 0;
    min-height: 34px
}

.form-control-static.input-lg,
.form-control-static.input-sm {
    padding-left: 0;
    padding-right: 0
}

.input-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px
}

select.input-sm {
    height: 30px;
    line-height: 30px
}

textarea.input-sm,
select[multiple].input-sm {
    height: auto
}

.form-group-sm .form-control {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px
}

.form-group-sm select.form-control {
    height: 30px;
    line-height: 30px
}

.form-group-sm textarea.form-control,
.form-group-sm select[multiple].form-control {
    height: auto
}

.form-group-sm .form-control-static {
    height: 30px;
    min-height: 32px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.5
}

.input-lg {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px
}

select.input-lg {
    height: 46px;
    line-height: 46px
}

textarea.input-lg,
select[multiple].input-lg {
    height: auto
}

.form-group-lg .form-control {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px
}

.form-group-lg select.form-control {
    height: 46px;
    line-height: 46px
}

.form-group-lg textarea.form-control,
.form-group-lg select[multiple].form-control {
    height: auto
}

.form-group-lg .form-control-static {
    height: 46px;
    min-height: 38px;
    padding: 11px 16px;
    font-size: 18px;
    line-height: 1.3333333
}

.has-feedback {
    position: relative
}

.has-feedback .form-control {
    padding-right: 42.5px
}

.form-control-feedback {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    pointer-events: none
}

.input-lg+.form-control-feedback,
.input-group-lg+.form-control-feedback,
.form-group-lg .form-control+.form-control-feedback {
    width: 46px;
    height: 46px;
    line-height: 46px
}

.input-sm+.form-control-feedback,
.input-group-sm+.form-control-feedback,
.form-group-sm .form-control+.form-control-feedback {
    width: 30px;
    height: 30px;
    line-height: 30px
}

.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline,
.has-success.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label {
    color: #3c763d
}

.has-success .form-control {
    border-color: #3c763d;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)
}

.has-success .form-control:focus {
    border-color: #2b542c;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168
}

.has-success .input-group-addon {
    color: #3c763d;
    border-color: #3c763d;
    background-color: #dff0d8
}

.has-success .form-control-feedback {
    color: #3c763d
}

.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline,
.has-warning.radio label,
.has-warning.checkbox label,
.has-warning.radio-inline label,
.has-warning.checkbox-inline label {
    color: #8a6d3b
}

.has-warning .form-control {
    border-color: #8a6d3b;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)
}

.has-warning .form-control:focus {
    border-color: #66512c;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b
}

.has-warning .input-group-addon {
    color: #8a6d3b;
    border-color: #8a6d3b;
    background-color: #fcf8e3
}

.has-warning .form-control-feedback {
    color: #8a6d3b
}

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
    color: #a94442
}

.has-error .form-control {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)
}

.has-error .form-control:focus {
    border-color: #843534;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483
}

.has-error .input-group-addon {
    color: #a94442;
    border-color: #a94442;
    background-color: #f2dede
}

.has-error .form-control-feedback {
    color: #a94442
}

.has-feedback label~.form-control-feedback {
    top: 25px
}

.has-feedback label.sr-only~.form-control-feedback {
    top: 0
}

.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373
}

@media (min-width:768px) {
    .form-inline .form-group {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle
    }
    .form-inline .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle
    }
    .form-inline .form-control-static {
        display: inline-block
    }
    .form-inline .input-group {
        display: inline-table;
        vertical-align: middle
    }
    .form-inline .input-group .input-group-addon,
    .form-inline .input-group .input-group-btn,
    .form-inline .input-group .form-control {
        width: auto
    }
    .form-inline .input-group>.form-control {
        width: 100%
    }
    .form-inline .control-label {
        margin-bottom: 0;
        vertical-align: middle
    }
    .form-inline .radio,
    .form-inline .checkbox {
        display: inline-block;
        margin-top: 0;
        margin-bottom: 0;
        vertical-align: middle
    }
    .form-inline .radio label,
    .form-inline .checkbox label {
        padding-left: 0
    }
    .form-inline .radio input[type="radio"],
    .form-inline .checkbox input[type="checkbox"] {
        position: relative;
        margin-left: 0
    }
    .form-inline .has-feedback .form-control-feedback {
        top: 0
    }
}

.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 7px
}

.form-horizontal .radio,
.form-horizontal .checkbox {
    min-height: 27px
}

.form-horizontal .form-group {
    margin-left: -15px;
    margin-right: -15px
}

@media (min-width:768px) {
    .form-horizontal .control-label {
        text-align: right;
        margin-bottom: 0;
        padding-top: 7px
    }
}

.form-horizontal .has-feedback .form-control-feedback {
    right: 15px
}

@media (min-width:768px) {
    .form-horizontal .form-group-lg .control-label {
        padding-top: 11px;
        font-size: 18px
    }
}

@media (min-width:768px) {
    .form-horizontal .form-group-sm .control-label {
        padding-top: 6px;
        font-size: 12px
    }
}

.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 2px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

.btn:hover,
.btn:focus,
.btn.focus {
    color: #333;
    text-decoration: none
}

.btn:active,
.btn.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
    cursor: not-allowed;
    opacity: .65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none
}

a.btn.disabled,
fieldset[disabled] a.btn {
    pointer-events: none
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc
}

.btn-default:focus,
.btn-default.focus {
    color: #333;
    background-color: #e6e6e6;
    border-color: #8c8c8c
}

.btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad
}

.btn-default:active,
.btn-default.active,
.open>.dropdown-toggle.btn-default {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad
}

.btn-default:active,
.btn-default.active,
.open>.dropdown-toggle.btn-default {
    background-image: none
}

.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus {
    background-color: #fff;
    border-color: #ccc
}

.btn-default .badge {
    color: #fff;
    background-color: #333
}

.btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4
}

.btn-primary:focus,
.btn-primary.focus {
    color: #fff;
    background-color: #286090;
    border-color: #122b40
}

.btn-primary:hover {
    color: #fff;
    background-color: #286090;
    border-color: #204d74
}

.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #286090;
    border-color: #204d74
}

.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
    background-image: none
}

.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
    background-color: #337ab7;
    border-color: #2e6da4
}

.btn-primary .badge {
    color: #337ab7;
    background-color: #fff
}

.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c
}

.btn-success:focus,
.btn-success.focus {
    color: #fff;
    background-color: #449d44;
    border-color: #255625
}

.btn-success:hover {
    color: #fff;
    background-color: #449d44;
    border-color: #398439
}

.btn-success:active,
.btn-success.active,
.open>.dropdown-toggle.btn-success {
    color: #fff;
    background-color: #449d44;
    border-color: #398439
}

.btn-success:active,
.btn-success.active,
.open>.dropdown-toggle.btn-success {
    background-image: none
}

.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled.focus,
.btn-success[disabled].focus,
fieldset[disabled] .btn-success.focus {
    background-color: #5cb85c;
    border-color: #4cae4c
}

.btn-success .badge {
    color: #5cb85c;
    background-color: #fff
}

.btn-info {
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da
}

.btn-info:focus,
.btn-info.focus {
    color: #fff;
    background-color: #31b0d5;
    border-color: #1b6d85
}

.btn-info:hover {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc
}

.btn-info:active,
.btn-info.active,
.open>.dropdown-toggle.btn-info {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc
}

.btn-info:active,
.btn-info.active,
.open>.dropdown-toggle.btn-info {
    background-image: none
}

.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled.focus,
.btn-info[disabled].focus,
fieldset[disabled] .btn-info.focus {
    background-color: #5bc0de;
    border-color: #46b8da
}

.btn-info .badge {
    color: #5bc0de;
    background-color: #fff
}

.btn-warning {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236
}

.btn-warning:focus,
.btn-warning.focus {
    color: #fff;
    background-color: #ec971f;
    border-color: #985f0d
}

.btn-warning:hover {
    color: #fff;
    background-color: #ec971f;
    border-color: #d58512
}

.btn-warning:active,
.btn-warning.active,
.open>.dropdown-toggle.btn-warning {
    color: #fff;
    background-color: #ec971f;
    border-color: #d58512
}

.btn-warning:active,
.btn-warning.active,
.open>.dropdown-toggle.btn-warning {
    background-image: none
}

.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled.focus,
.btn-warning[disabled].focus,
fieldset[disabled] .btn-warning.focus {
    background-color: #f0ad4e;
    border-color: #eea236
}

.btn-warning .badge {
    color: #f0ad4e;
    background-color: #fff
}

.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a
}

.btn-danger:focus,
.btn-danger.focus {
    color: #fff;
    background-color: #c9302c;
    border-color: #761c19
}

.btn-danger:hover {
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925
}

.btn-danger:active,
.btn-danger.active,
.open>.dropdown-toggle.btn-danger {
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925
}

.btn-danger:active,
.btn-danger.active,
.open>.dropdown-toggle.btn-danger {
    background-image: none
}

.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled.focus,
.btn-danger[disabled].focus,
fieldset[disabled] .btn-danger.focus {
    background-color: #d9534f;
    border-color: #d43f3a
}

.btn-danger .badge {
    color: #d9534f;
    background-color: #fff
}

.btn-link {
    color: #337ab7;
    font-weight: normal;
    border-radius: 0
}

.btn-link,
.btn-link:active,
.btn-link.active,
.btn-link[disabled],
fieldset[disabled] .btn-link {
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none
}

.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active {
    border-color: transparent
}

.btn-link:hover,
.btn-link:focus {
    color: #23527c;
    text-decoration: underline;
    background-color: transparent
}

.btn-link[disabled]:hover,
fieldset[disabled] .btn-link:hover,
.btn-link[disabled]:focus,
fieldset[disabled] .btn-link:focus {
    color: #777;
    text-decoration: none
}

.btn-lg {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px
}

.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px
}

.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px
}

.btn-block {
    display: block;
    width: 100%
}

.btn-block+.btn-block {
    margin-top: 5px
}

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
    width: 100%
}

.clearfix:before,
.clearfix:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after {
    content: " ";
    display: table
}

.clearfix:after,
.form-horizontal .form-group:after {
    clear: both
}

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

.pull-right {
    float: right !important
}

.pull-left {
    float: left !important
}

.hide {
    display: none !important
}

.show {
    display: block !important
}

.invisible {
    visibility: hidden
}

.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0
}

.hidden {
    display: none !important
}

.affix {
    position: fixed
}


/* -------------------------------- 
  Common style
-------------------------------- */

html {
    font-size: 62.5%;
    /* 62.5%を指定すると「1.0 rem = 10px」 */
}

body {
    /*font-family: "-apple-system", Arial, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;*/
    font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "メイリオ", Meiryo, sans-serif;
    line-height: 1.6;
    font-size: 14px;
    font-size: 1.4rem;
    background-color: #fff;
    color: #383b4a;
    -webkit-text-size-adjust: 100%;
}

a {
    color: #383b4a;
    text-decoration: none;
    cursor: pointer;
}

a:hover,
a:focus,
a:active {
    /* color: #6b6a78; */
    text-decoration: none;
    outline: none;
}

textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
}

ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

dl,
dt,
dd,
li {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
}
img:not([src$="_.gif"]){
    height: auto;
}


.small {
    font-size: 70%
}


/* svg icon */

#svgicon {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
}

.cb {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
}

.cb-images {
    width: 1.125em;
}

.icon-bg {
    fill: #d4d4d5;
}

.icon-with-bg {
    fill: #fff;
}


/*  旧RWDレイアウト用
============================ */

.main_header {
    width: 100%;
}

.main_header div#nav,
.main_header #lang_nav,
.main_header ul.loginArea,
#pankz,
div#twoColumnRight div#title,
div#one_maincolumn div#title {
    display: none !important;
}

.header_logo {
    margin: 0;
    padding: 16px 16px 0;
}


/*  table
============================ */

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd
}

.table-bordered {
    border: 1px solid #ddd;
}

.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>tbody>tr>td,
.table-bordered>tfoot>tr>td {
    border: 1px solid #ddd
}

.table-bordered>thead>tr>th,
.table-bordered>thead>tr>td {
    border-bottom-width: 2px
}


/*  form
============================ */


/* placeholder color */

::-webkit-input-placeholder {
    color: #ccc;
}

:-moz-placeholder {
    color: #ccc;
    opacity: 1;
}

::-moz-placeholder {
    color: #ccc;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #ccc;
}

:placeholder-shown {
    color: #ccc;
}

label {
    font-weight: normal;
}

input:focus,
select:focus {
    outline: none;
}

input[type="number"] {
    text-align: right;
}

.form-group .errormsg {
    margin-top: 3px;
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: bold;
}

dd.form-group .errormsg {
    margin-bottom: 0;
}

.form-control {
    border: 1px solid #C4CCCE;
    border-radius: 0 !important;
    box-shadow: none;
    font-size: 16px;
    font-size: 1.6rem;
    height: 40px;
    padding: 6px 12px;
    width: auto;
    line-height: 1.5
}

.form-control:focus {
    border-color: #3c8dbc !important;
    box-shadow: none
}

.has-success .form-control:focus,
.has-warning .form-control:focus,
.has-error .form-control:focus {
    box-shadow: none;
    background: none;
}

.has-success .form-control {
    border-color: #0D8969;
    background: #e7f6f3;
}

.has-warning .form-control {
    border-color: #E99133;
    background: #fdf7ed;
}

.has-error .form-control {
    border-color: #CF3F34;
    background: #FDF1F0;
}

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
    color: inherit;
    background: #FDF1F0;
}

.form-control::-moz-placeholder {
    color: #bbb;
    opacity: 1
}

.form-control:-ms-input-placeholder {
    color: #bbb
}

.form-control::-webkit-input-placeholder {
    color: #bbb
}

.form-control:not(select) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.form-group .form-control {
    width: 100%;
}

.form-inline .form-control {
    width: auto;
}

.form-group.lange input[type="text"],
.form-group.lange label {
    display: inline-block;
    margin-bottom: 0;
    margin-left: 1%;
    margin-right: 1%;
    vertical-align: middle;
}

.form-group.lange input[type="text"] {
    width: 28%;
}

.input_tel input {
    display: inline-block;
    margin-bottom: 0;
    margin-left: 1%;
    margin-right: 1%;
    max-width: 5em;
    vertical-align: middle;
    width: 30%;
}

.form-group.input_tel input:first-child {
    margin-left: 0;
}

.form-group.input_name input {
    display: inline-block;
    margin-bottom: 0;
    margin-left: 2%;
    vertical-align: middle;
    width: 48%;
}

.form-group.input_name input:first-child {
    margin-left: 0;
}

.form-group.input_zip input {
    display: inline-block;
    margin-left: 1%;
    margin-right: 1%;
    max-width: 5em;
    vertical-align: middle;
    width: 30%;
}

.form-group.input_zip .question-circle {
    font-size: 11px;
    display: inline-block;
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    vertical-align: middle;
    background: #000;
    border-radius: 50%;
}

.form-group.input_zip .question-circle .cb-question {
    fill: #fff;
}

.form-group .item_price input,
.form-group .item_quantity input {
    margin: 0 1%;
    text-align: right;
    width: 50%;
}

.form-inline label {
    margin: 0 10px 0 0;
}

.form-inline label:first-child+select,
.form-inline label:first-child+input {
    margin-right: 10px;
}

.form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: top;
}

.checkbox-inline,
.radio-inline {
    cursor: pointer;
    margin-left: 20px;
}

.checkbox-inline:first-child,
.radio-inline:first-child {
    margin-left: 0;
}

.required {
    color: #DE5D50;
    font-weight: normal !important;
    margin-left: 1em;
    font-size: 12px;
    font-size: 1.2rem;
}


/* rwd_form_table */

.rwd_form_table {
    border-top: 1px solid #ccc;
    border-collapse: separate;
    margin: 40px auto;
    text-align: left;
    width: 100%;
}

.rwd_form_table input[type="text"]:not([size="6"]),
.rwd_form_table textarea {
    width: 100%;
    max-width: 400px;
}

.rwd_form_table td {
    border-bottom: 1px solid #ccc;
}

.rwd_form_table th {
    background: #F3F3F3;
    border-bottom: 1px solid #ccc;
    font-weight: normal;
    padding: 12px;
    text-align: left;
    vertical-align: middle;
    line-height: 130%;
    width: 35%;
    max-width: 260px;
}

.rwd_form_table th.must {
    position: relative;
    padding-right: 40px;
}

.rwd_form_table th.must::after {
    content: "必須";
    color: #EB4C2C;
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.rwd_form_table label {
    margin-right: 14px;
}

.rwd_form_table td input {
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    padding: 5px;
    border-radius: 3px;
}

.rwd_form_table td {
    padding: 12px;
    line-height: 150%;
}

.rwd_form_table select {
    border: 1px solid #CCC;
    color: #333;
    padding: 4px;
    border-radius: 3px;
}

.rwd_form_table textarea {
    padding: 4px;
    border-radius: 3px;
    border: 1px solid #CCC;
}

.rwd_form_table input[type="radio"],
.rwd_form_table input[type="checkbox"] {
    margin: 0 7px;
}

.rwd_form_table td a {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.rwd_form_table+.btn_area {
    text-align: center;
    margin: 0 auto 50px;
    max-width: 250px;
}

.rwd_form_table+.btn_area .btn {
    display: block;
    width: 250px;
    max-width: 100%;
    padding: 15px 30px;
}

.rwd_form_table+.btn_area .btn+a {
    margin-top: 10px;
}
.rwd_form_table+.caution+.marB10+.check_agree+.btn_area  {
    text-align: center;
    margin: 0 auto 50px;
    max-width: 250px;
}

.rwd_form_table_finish {
    margin: 30px 0;
    text-align: center;
}

.rwd_form_table_finish .btn_area {
    margin: 50px 0;
    text-align: center;
}

@media only screen and (max-width: 767px) {
    .rwd_form_table,
    .rwd_form_table tbody,
    .rwd_form_table tr,
    .rwd_form_table th,
    .rwd_form_table td {
        display: block;
        width: 100%;
        max-width: 100%;
    }
    .rwd_form_table th.must::after {
        position: static;
        display: inline-block;
        margin-left: 15px;
        font-size: 12px;
        -webkit-transform: none;
        transform: none;
    }
    .rwd_form_table th {
        background: none;
        font-weight: bold;
        border: 0 none;
        padding: 1.5em 0 0;
    }
    .rwd_form_table td {
        padding: 0.5em 0 1.5em;
    }
    .rwd_form_table+.btn_area {
        margin-bottom: 50px;
    }
    .rwd_form_table_finish {
        text-align: left;
    }
}


/* -------------------------------- 
  Parts 
-------------------------------- */


/* heading */

h2 {
    font-size: 16px;
    font-size: 1.6rem;
}

.page-heading {
    margin: 0 0 8px;
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: bold;
    border-bottom: 1px dotted #ccc;
    border-top: 1px solid #ccc;
    padding: 8px;
}

.heading01,
.heading03 {
    font-size: 20px;
    font-size: 2.0rem;
    font-weight: bold;
}

.heading02 {
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: bold;
}

.heading04 {
    clear: both;
    margin-bottom: 5px;
}

.heading05 {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: bold;
}


/* btn */

.btn {
    font-size: 16px;
    font-size: 1.6rem;
    padding: 8px 18px;
    border-radius: 0;
    border-width: 1px;
    font-weight: bold;
    -webkit-transition: background 0.2s ease;
    transition: background 0.2s ease;
}

.btn-lg {
    padding: 10px 16px;
    font-size: 20px;
    font-size: 2rem;
    line-height: 1.3333333
}

.btn-sm {
    padding: 8px 10px;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.5;
    font-weight: normal;
}

.btn-xs {
    padding: 5px 8px;
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 1.5;
    font-weight: normal;
}

.btn .fa[class*="right"] {
    position: relative;
    left: 3px;
}


/* btn_circle */

.btn_circle {
    border: 0 none;
    padding: 0;
    margin: 0;
    text-shadow: none;
    box-shadow: none;
    border-radius: 50%;
    color: #fff;
    background: #B8BEC4;
    cursor: pointer;
    width: 40px;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
}

.btn_circle .cb {
    font-size: 24px;
    font-size: 2.4rem;
    position: relative;
    top: -1px;
}

.btn_circle:hover {
    opacity: 0.8;
}


/* angle-circle */

.angle-circle {
    display: inline-block;
    background: #bfbfbf;
    border: 0 none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
}

.angle-circle i {
    color: #fff;
    position: relative;
    font-size: 25px;
    font-size: 2.5rem;
}


/* icon_close */

.icon_close {
    /* container for the X icon */
    position: absolute;
    height: 100%;
    width: 50px;
    top: 0;
    left: 0;
}

.icon_close::before,
.icon_close::after {
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* close icon */
    content: '';
    position: absolute;
    display: inline-block;
    height: 3px;
    width: 22px;
    top: 50%;
    margin-top: -2px;
    left: 50%;
    margin-left: -11px;
    background: #000;
}

.icon_close::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.icon_close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}


/* badge */

.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 10px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #DE5D50;
    border-radius: 10px
}

.btn .badge {
    position: relative;
    top: -1px
}


/* tableStyle */

div.table {
    width: 100%;
    display: table;
}

div.table .thead {
    display: none;
}

div.table .tbody {
    display: table-row-group;
}

div.table .tbody .tr {
    display: table-row;
    margin: 0;
}

div.table .tbody .tr>.td {
    display: table-cell;
    padding: 10px 8px;
    text-align: center;
    overflow-x: hidden;
}

.table .tbody .tr>.price {
    text-align: right;
}


/* dl_table */

.dl_table {
    border-top: 1px dotted #ccc;
}

.dl_table dl {
    padding: 8px 0;
    border-bottom: 1px dotted #ccc;
}

.dl_table dd .form-group {
    padding-top: 8px;
}

.dl_table dd>.form-group:first-child {
    padding-top: 0;
}

.dl_table .input_zip+button {
    margin-top: 8px;
}


/* .cart .item_box */


/* form_terms_link */

.form_terms_link {
    text-align: center;
}


/* error_box */

.error_box {
    text-align: center;
    padding: 5% 0;
}

.error_box .btn_back {
    padding: 5% 0;
}

.error_box .btn_back a {
    width: 100%;
    max-width: 320px;
}


/* -------------------------------- 
  Common 
-------------------------------- */

.inner {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 4%;
}


/****** Base Layout Setting ********/


/****** Header Setting ********/

.header {
    position: fixed;
    z-index: 3;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    -webkit-transition: opacity 0s ease 0.5s;
    transition: opacity 0s ease 0.5s;
}

.play .header {
    opacity: 1;
}

.header .inner {
    padding: 0 0 0 4%;
    position: relative;
    color: #333;
    display: -webkit-box;
    /* Android < 4.3 */
    display: -webkit-flex;
    /* safari(PC) */
    display: flex;
    -webkit-box-align: center;
    /* Android < 4.3 */
    -webkit-align-items: center;
    /* safari(PC) */
    align-items: center;
    -webkit-box-pack: justify;
    /* Android < 4.3 */
    -webkit-justify-content: space-between;
    /* safari(PC) */
    justify-content: space-between;
}

.header_logo_area .main_logo svg.cb-logo_basic {
    width: 50px;
    height: 42px;
}

.header_logo_area .main_logo svg.cb-cubelogo {
    display: none;
}

@media only screen and (max-width: 991px) {
    .header .main_logo {
        opacity: 0;
        -webkit-transition: opacity 0.2s ease;
        transition: opacity 0.2s ease;
    }
    .header.large .main_logo {
        opacity: 1;
    }
    .header.large .main_logo a {
        white-space: nowrap;
    }
    .header_logo_area .main_logo svg {
        display: inline-block;
        vertical-align: middle;
    }
    .header_logo_area .main_logo svg.cb-cubelogo {
        display: inline-block;
        width: 154px;
        height: 20px;
        margin-left: 10px;
    }
}

.header_nav_area {
    display: none;
}

.header a {
    display: block;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

.header a:link,
.header a:visited,
.header a:hover,
.header a:active {
    color: #353a4e;
}

#bt_menu {
    position: relative;
    cursor: pointer;
    z-index: 1;
    width: 80px;
    height: 76px;
}

#bt_menu::before {
    content: "";
    position: absolute;
    right: 17px;
    top: 16px;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: #fff;
    /*border: 2px solid #424555;*/
}

@media only screen and (min-width: 768px) {
    #bt_menu::before {
        right: 17px;
        top: 24px;
    }
}

#bt_menu span {
    color: #999;
    font-weight: bold;
}

.show-nav {
    height: 100%;
    overflow: hidden;
}

.hide-nav {
    overflow: auto;
}


/* menu_icon */

.menu_icon {
    /* this span is the central line of the menu icon */
    display: inline-block;
    position: absolute;
    left: auto;
    top: 50%;
    bottom: auto;
    right: 15px;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 24px;
    height: 2px;
    background-color: #424555;
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    transition: background-color 0.3s;
    /* these are the upper and lower lines in the menu icon */
}

.menu_icon::before,
.menu_icon::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #424555;
    right: 0;
    -webkit-transition: -webkit-transform .3s, top .3s, background-color 0s;
    -moz-transition: -moz-transform .3s, top .3s, background-color 0s;
    transition: transform .3s, top .3s, background-color 0s;
}

.menu_icon::before {
    top: -8px;
}

.menu_icon::after {
    top: 8px;
}

.show-nav .menu_icon {
    background-color: rgba(255, 255, 255, 0);
}


/*@media only screen and (max-width: 991px) {
  .show-nav .menu_icon::before, .show-nav .menu_icon::after {
    background-color: #fff;
  }
}*/

.show-nav .menu_icon::before {
    top: 0;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

.show-nav .menu_icon::after {
    top: 0;
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    transform: rotate(225deg);
}


/*  navigation
--------------------------- */


/* Menu */

.header_nav_area {
    -webkit-transition: -webkit-transform 0.35s ease, opacity 0.35s ease, visibility 0.35s;
    transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s;
    display: block;
    background: rgb(36, 41, 67);
    box-shadow: none;
    height: 100%;
    width: 100%;
    opacity: 0;
    overflow: hidden;
    padding: 3em 2em;
    position: fixed;
    left: 0;
    top: 0;
    visibility: hidden;
    z-index: 1;
}

.header_nav_area .header_nav_area_inner {
    -webkit-transition: -webkit-transform 0.35s ease-out, opacity 0.35s ease, visibility 0.35s;
    transition: transform 0.35s ease-out, opacity 0.35s ease, visibility 0.35s;
    -webkit-transform: rotateX(20deg);
    transform: rotateX(20deg);
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    max-height: 100vh;
    opacity: 0;
    overflow: auto;
    text-align: center;
    visibility: hidden;
    margin: 0 auto;
}

.header_nav_area .header_nav_area_inner> :first-child {
    margin-top: 2em;
}

.header_nav_area .header_nav_area_inner> :last-child {
    margin-bottom: 3em;
}

.header_nav_area ul {
    margin: 0;
}

.header_nav_area ul>li {
    padding: 0;
}

.header_nav_area .global_logo {
    margin-bottom: 20px;
}

.header_nav_area .global_logo a {
    font-family: museo-slab, sans-serif;
    font-style: normal;
    font-weight: 900;
    line-height: 1.1;
    font-size: 38px;
    font-size: 3.8rem;
}

.header_nav_area .global_logo a small {
    font-size: 40%;
    font-weight: 500;
}

@media only screen and (min-width: 992px) {
    .header_nav_area .global_logo {
        display: none;
    }
}

.header_nav_area .ddmenu {
    position: relative;
    font-size: 15px;
    font-size: 1.4rem;
}

.header_nav_area .ddmenu:after {
    position: absolute;
    content: "▼";
    margin-left: 0.5em;
    font-size: 0.6em;
}

.header_nav_area .active>.ddmenu:after {
    content: "▲";
}

.header_nav_area .nav_child {
    display: none;
    background: rgba(255, 255, 255, 0.1);
}

.header_nav_area ul>li>a {
    border: 0;
    display: block;
    line-height: 3em;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
    font-size: 1.5rem;
}

.header_nav_area .nav_child ul li a {
    border-top: 0 none;
}

.header_nav_area ul>li strong {
    display: block;
    margin: 0.5em 0 0 0;
}

.header_nav_area ul>li:first-child>a {
    border-top: 0 !important;
}

body.show-nav #wrapper {
    -webkit-filter: blur(0.5em);
    filter: blur(0.5em);
}

body.show-nav .header_nav_area {
    opacity: 1;
    visibility: visible;
}

body.show-nav .header_nav_area .header_nav_area_inner {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
    visibility: visible;
}

.header_nav_area nav .u-balloon .u-small {
    display: none;
}


/*  Breadcrumb
--------------------------- */

.breadcrumb {
    position: relative;
    z-index: 2;
    background: #f5f5f5;
}

.breadcrumb .inner {
    max-width: 1180px;
    padding: 0 4%;
    color: #424555;
    min-height: 1px;
    width: auto;
}

.breadcrumb ol {
    border-bottom: 1px solid #c4c4c4;
    vertical-align: middle;
}

.breadcrumb li {
    display: inline-block;
    font-weight: bold;
    font-size: 14px;
    font-size: 1.4rem;
}

.breadcrumb li a {
    display: inline-block;
    padding: 10px 2px;
    font-weight: normal;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

.breadcrumb a:link,
.breadcrumb a:visited,
.breadcrumb a:hover,
.breadcrumb a:active {
    color: #383B44;
    text-decoration: underline;
}

.breadcrumb a:hover {
    color: #a8a8ad;
}

.breadcrumb li:not(:first-child)::before {
    content: "/";
    display: inline-block;
    margin: 0 5px;
    color: #999;
}

@media only screen and (min-width: 768px) {
    .breadcrumb .inner {
        display: table;
        width: 100%;
        padding: 0;
    }
    .breadcrumb .inner ol {
        display: table-cell;
        height: 64px;
        padding: 25px 0;
    }
    .breadcrumb .inner .footer_pagetop {
        display: table-cell;
        border-bottom: 1px solid #c4c4c4;
        vertical-align: middle;
        text-align: right;
    }
}


/*  Pagetop
--------------------------- */

.footer_pagetop {
    display: none;
}

@media only screen and (min-width: 768px) {
    .footer_pagetop {
        display: block;
    }
    .footer_pagetop a {
        text-align: center;
        display: inline-block;
        width: 54px;
        height: 54px;
        position: relative;
        color: transparent;
        background-color: #6e707a;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
    }
    .footer_pagetop a:link,
    .footer_pagetop a:visited,
    .footer_pagetop a:hover,
    .footer_pagetop a:active {
        color: transparent;
    }
    .footer_pagetop a:hover {
        background-color: #ccc;
    }
    .footer_pagetop a::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        display: block;
        width: 18px;
        height: 18px;
        border-top: 2px solid #fff;
        border-left: 2px solid #fff;
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        margin-left: -9px;
        margin-top: -4px;
    }
}


/****** Footer Setting ********/


/*  subnav
-------------------------------- */

.subnav {
    background: #f9f9fb;
}

.subnav ul {
    text-align: center;
    padding: 10px 4%;
}

.subnav li {
    margin: 5px 0;
    display: inline-block;
    border-left: 1px solid #a0a2aa;
}

.subnav li:last-child {
    border-right: 1px solid #a0a2aa;
}

.subnav li a {
    display: block;
    padding: 0.1em 1em;
    font-size: 14px;
    font-size: 1.4rem;
}

.subnav li a:hover {
    font-weight: bold;
}

.subnav li.current>a {
    font-weight: bold;
    pointer-events: none;
}

@media only screen and (min-width: 768px) {
    .subnav ul {
        padding: 35px 4%;
    }
    .subnav li a {
        padding: 0.5em 1em;
    }
}


/*  conversion area
-------------------------------- */

.section_conversion {
    padding: 4rem 0 4rem;
    background: url(../img/footer/footer_bg.png);
}

.section_conversion .heading01 {
    color: #fff;
    font-size: 2rem;
    text-align: center;
    margin: 0;
    border: #fff;
}

.section_conversion .heading01:after {
    content: "";
    display: block;
    width: 1.3em;
    height: 0.1em;
    max-width: 50px;
    background: #fff;
    margin: 1em auto;
}

.p-footercta {
    display: block;
}

.p-footercta .btn {
    background: #ffcc00;
    border-radius: 6px;
    text-align: center;
    display: flex;
    align-items: flex-start;
    position: relative;
    width: 94%;
    max-width: 480px;
    justify-content: center;
    padding: 1.5rem 0 1.2rem;
    box-sizing: border-box;
    margin: 0 auto 2rem;
}

.p-footercta .btn p {
    font-size: 2.3rem;
    text-align: left;
    margin: 0;
    padding-left: 2rem;
}

.p-footercta .btn span {
    display: block;
    font-size: 1.2rem;
}
.p-footercta .co-btn{
    color: #383b4a;
}
.co-btn:hover {
    background: #FFE065;
}

.p-footercta .pa-btn {
    background: transparent;
    border: 2px solid #fff;
}

.p-footercta .pa-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.pa-btn p {
    color: #fff;
}

@media only screen and (min-width: 768px) {
    .section_conversion {
        padding: 6rem 0 7rem;
    }
    .section_conversion .heading01 {
        font-size: 3rem;
    }
    .p-footercta {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .p-footercta .btn {
        padding: 1.8rem 0 1.5rem;
        text-decoration: none;
        color: #3c4156;
    }
    .p-footercta .btn:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 20px;
        display: block;
        width: 8px;
        height: 8px;
        border-top: 2px solid #3C4156;
        border-right: 2px solid #3C4156;
        transform: translateY(-50%) rotate(45deg);
    }
    .p-footercta .pa-btn:after {
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
    }
    .p-footercta .btn {
        margin: 1.5rem 2.5rem;
    }
    .p-footercta .btn span {
        font-size: 1.3rem;
    }
}


/* footer
--------------------------- */

.footer {
    position: relative;
    background: #f5f5f5;
    padding-top: 30px;
    z-index: 2;
}
.footer .banner_area {
    margin: 0 auto;
    padding-bottom: 30px;
    max-width: 1040px;
}
.footer .banner_area .p-banner__left{
    max-width: 100%;
    padding: 0 4%;
}
.footer .banner_area .p-banner__left img{
    margin-top: 20px;
}
.footer .banner_area .p-banner__right{
    max-width: 100%;
    margin-top: 20px;
    padding: 0 4%;
}
.footer .inner {
    max-width: 1180px;
    padding: 0 4%;
}
@media only screen and (min-width: 768px) {   
    .footer .banner_area a:hover img {
        opacity: 0.8;
    }
    .footer .banner_area {
        margin: 0 auto;
        padding-bottom: 30px;
        max-width: 1040px;
        display: flex;
        justify-content: space-between;
    }
    .footer .banner_area .p-banner__left{
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        max-width: 76.63%;
        padding: 0;
    }
    .footer .banner_area .p-banner__left img{
        margin-top: 0;
    }
    .footer .banner_area .p-banner__right{
        max-width: 21.15%;
        padding: 0;
        margin-top: 0;
    }
    .footer .inner {
        max-width: 1180px;
        padding: 0;
    }
}

.footer ul {
    text-align: left;
}
.footer ul li {
    line-height: 2;
    font-size: 14px;
    font-size: 1.4rem;
}
.footer .inner>ul>li {
    margin-bottom: 12px;
}
.footer .inner>ul>li:not(:first-child) {
    border-top: 1px solid #555;
    padding-top: 12px;
}
.footer a {
    color: #fff;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}
.footer a:link,
.footer a:visited,
.footer a:active {
    color: #383B44;
    text-decoration: none;
}
.footer a:hover {
    color: #686868;
    text-decoration: none;
}
.footer a.footer_list_title {
    color: #383B44;
    font-weight: bold;
    font-size: 15px;
    font-size: 1.5rem;
}
.footer a.footer_list_title:link,
.footer a.footer_list_title:visited,
.footer a.footer_list_title:active {
    color: #383B44;
}
.footer a.footer_list_title:hover {
    color: #686868;
}
.footer_logo_area {
    text-align: center;
    color: #000;
}
.footer_logo_area .logo {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 0;
}

.footer_logo_area .copyright {
    font-size: 10px;
    font-size: 1rem;
    margin-top: 0;
}

.footer_search_area {
    text-align: center;
    font-size: 20px;
    font-size: 2rem;
}

.footer_search_area form {
    width: 100%;
    max-width: 420px;
    display: table;
    table-layout: fixed;
    margin: 0 auto;
}

.footer_search_area input {
    width: 80%;
    width: -webkit-calc( 100% - 70px);
    width: calc( 100% - 70px);
    height: 39px;
    line-height: 39px;
    padding: 0 20px;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
    vertical-align: middle;
    font-size: 20px;
    font-size: 2rem;
}

.footer_search_area button {
    line-height: 39px;
    width: 70px;
    height: 39px;
    text-align: center;
    vertical-align: middle;
    padding: 0 25px 0 20px;
    box-shadow: none;
    border: 0 none;
    background: #424555;
    color: #fff;
    transition: all .2s ease;
}

.footer_search_area button:hover {
    background: #333;
}

.footer_sns_area ul {
    text-align: center;
    padding-top: 30px;
}

.footer_sns_area ul li {
    display: inline-block;
    color: #aaa;
    font-size: 25px;
    font-size: 2.5rem;
    margin: 0 10px;
}

.footer_sns_area li a:link,
.footer_sns_area li a:visited,
.footer_sns_area li a:active {
    color: #a2a4ab;
}

.footer_sns_area li a:hover {
    color: #9d9ea3;
}

.footer_copyright_link {
    text-align: center;
    font-size: 80%;
    margin: 0 0 10px;
    padding-top: 20px;
}

.footer_copyright_link a:link,
.footer_copyright_link a:visited,
.footer_copyright_link a:active {
    color: #aaa;
}

.footer_copyright_link a:hover {
    color: #ccc;
}

.copyright {
    color: #aaa;
    margin: 0;
    padding: 0 0 30px;
    text-align: center;
}


/* mailmagazine_area */

.mailmagazine_area {
    position: relative;
    z-index: 2;
    background: #e3e3e3;
    text-align: center;
}

.mailmagazine_area dl {
    margin: 0 auto;
}

.mailmagazine_area dl dt,
.mailmagazine_area dl dd {
    padding: 0 10px 20px;
    vertical-align: middle;
    text-align: center;
}

.mailmagazine_area dl dt {
    padding: 15px 10px 10px;
    color: #424555;
    font-weight: bold;
}

.mailmagazine_area .form_mailmagazine {
    width: 100%;
    max-width: 367px;
    display: table;
    table-layout: fixed;
    margin: 0 auto;
}

.mailmagazine_area input {
    width: 80%;
    width: -webkit-calc( 100% - 70px);
    width: calc( 100% - 70px);
    line-height: 33px;
    height: 33px;
    padding: 0 15px;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
    vertical-align: middle;
    font-size: 16px;
    font-size: 1.6rem;
}

.mailmagazine_area button {
    text-align: center;
    vertical-align: middle;
    padding: 0 25px 0 20px;
    width: 70px;
    height: 33px;
    line-height: 33px;
    font-size: 16px;
    font-size: 1.6rem;
    box-shadow: none;
    border: 0 none;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

@media only screen and (min-width: 768px) {
    .mailmagazine_area dl {
        display: table;
        table-layout: fixed;
        margin: 0 auto;
    }
    .mailmagazine_area dl dt,
    .mailmagazine_area dl dd {
        display: table-cell;
        padding: 30px 10px;
        vertical-align: middle;
    }
}


/* 計測タグ関連で余白出るのを防ぐ */

.analytics_tag {
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/******************************
  Media Query
*******************************/

@media only screen and (max-width: 767px) {
    /* --------- common ---------- */
    .sp {
        display: block !important;
    }
    .pc {
        display: none !important;
    }
    span.sp {
        display: inline !important;
    }
    /****** Header Setting ********/
    /****** Effect Setting ********/
}

@media only screen and (min-width: 768px) {
    /* --------- common ---------- */
    body {
        font-size: 16px;
        font-size: 1.6rem;
    }
    .sp {
        display: none !important;
    }
    .pc {
        display: block !important;
    }
    span.pc {
        display: inline !important;
    }
    /* -------------------------------- 
    Parts 
  -------------------------------- */
    /* heading */
    h2 {
        font-size: 24px;
        font-size: 2.4rem;
    }
    .page-heading {
        font-size: 35px;
        font-size: 3.5rem;
        border-bottom-style: solid;
        border-top: 0 none;
        padding: 16px 0 12px;
        margin: 0 16px 48px;
    }
    .heading01,
    .heading03 {
        font-size: 24px;
        font-size: 2.4rem;
        font-weight: bold;
    }
    .heading02 {
        font-size: 24px;
        font-size: 2.4rem;
        font-weight: bold;
        background: #EFEFEF;
        padding: 8px 12px;
    }
    .heading05 {
        font-size: 16px;
        font-size: 1.6rem;
    }
    /* btn */
    .btn {
        font-size: 16px;
        font-size: 1.6rem;
    }
    .btn-lg {
        padding: 10px 16px;
        font-size: 18px;
        font-size: 1.8rem;
        line-height: 1.3333333
    }
    .btn-sm {
        padding: 8px 10px;
        font-size: 14px;
        font-size: 1.4rem;
        line-height: 1.5
    }
    .btn-xs {
        padding: 5px 8px;
        font-size: 12px;
        font-size: 1.2rem;
        line-height: 1.5
    }
    /* badge */
    .badge {
        font-size: 12px;
        font-size: 1.2rem;
    }
    /* tableStyle */
    div.table .thead {
        display: table-header-group;
    }
    div.table ol {
        display: table-row;
        margin: 0;
    }
    div.table ol li {
        display: table-cell;
        padding: 16px;
        text-align: center;
        background: #F4F3F0;
        overflow-x: hidden;
        font-weight: bold;
    }
    div.table .tbody .tr>.td {
        padding: 16px;
    }
    /* tableish */
    .tableish {
        display: table;
        width: 100%;
    }
    .tableish .thead {
        display: table-header-group;
    }
    .tableish .tbody {
        display: table-row-group;
    }
    .tableish .tr {
        display: table-row;
    }
    .tableish .th,
    .tableish .td {
        display: table-cell;
        vertical-align: top;
    }
    /* dl-table */
    .dl_table {
        display: table;
        width: 100%;
    }
    .dl_table dl {
        display: table-row;
        border: 0 none;
    }
    .dl_table dt,
    .dl_table dd {
        display: table-cell;
        border-bottom: 1px dotted #ccc;
        padding: 16px 0;
    }
    .dl_table dt {
        width: 30%;
    }
    .dl_table dd {
        padding: 16px;
    }
    .dl_table dd .form-group {
        padding-top: 16px;
    }
    .dl_table .input_zip+button {
        margin-top: 16px;
    }
    /* topicpath */
    #topicpath {
        padding: 24px 16px;
        border: 0 none;
    }
    #topicpath ol {
        padding-top: 0.7em;
        padding-bottom: 0.7em;
        border-bottom: 1px solid #ccc;
    }
    #topicpath li {
        font-size: 16px;
        font-size: 1.6rem;
    }
    /* navigation */
    #bt_menu {
        width: 80px;
        height: 90px;
    }
    /* pagenumberarea */
    /****** Footer Setting ********/
    .footer .inner>ul {
        display: -webkit-box;
        /*--- Androidブラウザ用 ---*/
        display: -ms-flexbox;
        /*--- IE10 ---*/
        display: -webkit-flex;
        /* safari(PC) */
        display: flex;
        -webkit-box-pack: justify;
        /*--- Androidブラウザ用 ---*/
        -ms-flex-pack: justify;
        /*--- IE10 ---*/
        -webkit-justify-content: flex-start;
        /* safari(PC) */
        justify-content: flex-start;
        -ms-flex-wrap: wrap;
        /*--- IE10用 ---*/
        -webkit-flex-wrap: wrap;
        /* safari(PC) */
        flex-wrap: wrap;
        max-width: 1180px;
        padding-top: 30px;
        border-top: 1px solid #c4c4c4;
    }
    .footer .inner>ul>li:not(:first-child) {
        border-top: 0 none;
        padding-top: 0;
    }
    .footer .inner>ul>li {
       padding: 0 1.5%
    }
    .footer .inner>ul>li>ul {
        margin-bottom: 2em;
    }
    .footer .inner>ul>li a{
        font-size: 13px;
    }
}

@media only screen and (min-width: 992px) {
    /* -------------------------------- 
    Parts 
  -------------------------------- */
    /* heading */
    h2 {
        font-size: 32px;
        font-size: 3.2rem;
    }
    .page-heading {
        font-size: 35px;
        font-size: 3.5rem;
        border-bottom-style: solid;
        border-top: 0 none;
        padding: 16px 0 12px;
        margin: 0 16px 48px;
    }
    .heading01,
    .heading03 {
        font-size: 32px;
        font-size: 3.2rem;
        font-weight: bold;
    }
    .heading02 {
        font-size: 32px;
        font-size: 3.2rem;
        font-weight: bold;
        background: #EFEFEF;
        padding: 8px 12px;
    }
    .heading05 {
        font-size: 20px;
        font-size: 2rem;
    }
    .show-nav {
        height: auto;
        overflow: auto;
    }
    #bt_menu {
        position: relative;
        top: 0;
        visibility: visible;
        float: right;
        -webkit-transition: visibility 0.1s ease, top 0.2s ease;
        transition: visibility 0.1s ease, top 0.2s ease;
    }
    #bt_menu span {
        opacity: 1;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }
    .large #bt_menu {
        top: 50px;
        display: none;
    }
    .large #bt_menu span {
        opacity: 0;
    }
    .show-nav .menu_icon::before,
    .show-nav .menu_icon::after {
        background-color: #000;
    }
    .header .inner {
        width: 100%;
        max-width: 100%;
        padding: 0;
        background: rgba(255, 255, 255, 0);
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }
    .header.header.p-header__knowhow .inner {
        background: rgba(255, 255, 255, 1);
    }
    .large.header.active .inner,
    .large.header .inner:hover,
    .show-nav .header .inner {
        background: rgba(255, 255, 255, 1);
    }
    .header.active .inner a:link,
    .header.active .inner a:visited,
    .header.active .inner a:hover,
    .header.active .inner a:active,
    .header .inner:hover a:link,
    .header .inner:hover a:visited,
    .header .inner:hover a:hover,
    .header .inner:hover a:active {
        color: #353a4e;
    }
    .header_logo_area {
        display: block;
        float: left;
        vertical-align: middle;
        text-align: center;
        margin: 0;
        /* transform: translateY(6px); */
    }
    .header_logo_area a {
        display: inline-block;
        padding: 20px 20px;
    }
    .header_logo_area .main_logo {
        margin: 0;
        text-align: left;
    }
    .header_nav_area {
        display: block;
        float: right;
        width: 80%;
        width: -webkit-calc( 100% - 90px);
        width: calc( 100% - 90px);
        padding: 0;
        background: 0 none;
        vertical-align: middle;
        opacity: 1;
        overflow: inherit;
        position: static;
    }
    .header_nav_area ul {
        margin: 0;
    }
    .header_nav_area li>a {
        padding: 40px 8px;
    }
    .header_nav_area ul>li>a strong {
        margin: 0;
    }
    .header_nav_area .header_nav_area_inner {
        width: auto;
        overflow: inherit;
        opacity: 1;
        visibility: visible;
        text-align: left;
        display: -webkit-box;
        /* Android < 4.3 */
        display: -webkit-flex;
        /* safari(PC) */
        display: flex;
        -webkit-box-pack: justify;
        /* Android < 4.3 */
        -webkit-justify-content: space-between;
        /* safari(PC) */
        justify-content: space-between;
    }
    .header_nav_area .global_nav>ul {
        display: -webkit-box;
        /* Android < 4.3 */
        display: -webkit-flex;
        /* safari(PC) */
        display: flex;
        -webkit-box-align: center;
        /* Android < 4.3 */
        -webkit-align-items: center;
        /* safari(PC) */
        align-items: center;
    }
    .header_nav_area .header_nav_area_inner .dev_nav,
    .header_nav_area .header_nav_area_inner .global_nav {
        margin: -800px 0 0;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
        position: relative;
    }
    .large .header_nav_area .header_nav_area_inner .dev_nav,
    .large .header_nav_area .header_nav_area_inner .global_nav,
    .show-nav .header_nav_area .header_nav_area_inner .dev_nav,
    .show-nav .header_nav_area .header_nav_area_inner .global_nav {
        margin: 0;
    }
    .header_nav_area .header_nav_area_inner .dev_nav {
        text-align: right;
        margin-right: 20px;
    }
    .global_nav ul>li {
        position: relative;
    }
    .global_nav ul>li>a {
        margin: 0 15px 0 0;
    }
    .global_nav ul>li>a.cases {
        margin: 0 5px 0 0;
        padding: 40px 10px;
    }
    .header_nav_area ul>li>a {
        border: 0;
    }
    .header_nav_area nav>ul>li>a {
        border: 0;
        line-height: 1;
        position: relative;
        font-size: 1.4rem;
    }
    .header_nav_area nav>ul>li.active::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 45px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 5px 8px 5px;
        border-color: transparent transparent #fc0 transparent;
    }
    .header .inner li.current>a:link,
    .header .inner li.current>a:visited,
    .header .inner li.current>a:hover,
    .header .inner li.current>a:active,
    .header_nav_area nav>ul>li.active.current>a:link,
    .header_nav_area nav>ul>li.active.current>a:visited,
    .header_nav_area nav>ul>li.active.current>a:hover,
    .header_nav_area nav>ul>li.active.current>a:active {
        color: #fc0;
        font-weight: bold;
    }
    .header_nav_area nav>ul>li>a::before,
    .header_nav_area nav>ul>li>a:hover::before {
        content: "";
        width: 0;
        height: 5px;
        background: #fc0;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX( -50%);
        -webkit-transition: width 0.2s ease;
        transition: width 0.2s ease;
    }
    .header_nav_area nav>ul>li.current>a::before {
        top: 0;
        left: 50%;
        transform: translateX( -50%);
        -webkit-transition: width 0.2s ease;
        transition: width 0.2s ease;
    }
    .large .header_nav_area nav>ul>li>a::before,
    .large .header_nav_area nav>ul>li>a:hover::before {
        top: -3px;
    }
    .header_nav_area nav>ul>li.active>a::before,
    .header_nav_area nav>ul>li>a:hover::before,
    .header_nav_area nav>ul>li.current>a::before {
        width: 100%;
    }
    .header_nav_area nav .u-balloon {
        position: absolute;
        top: 80px;
        left: 50%;
        transform: translateX(-50%);
        width: 270px;
        height: auto;
        background: rgba(255, 255, 255, 1);
        opacity: 0;
        transition: .3s;
        border-radius: 6px;
        filter: drop-shadow(0 0 8px rgba(0, 0, 0, .1));
        padding: 20px;
        z-index: 999;
    }
    .header_nav_area nav.dev_nav .u-balloon {
        transform: translateX(-120%);
    }
    .header_nav_area nav .u-balloon::before {
        content: "";
        display: block;
        width: 16px;
        height: 16px;
        background: #FFF;
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%) rotate(-45deg);
        /*box-shadow: 0 0 8px rgba(0,0,0,.1);*/
        z-index: 999;
    }
    .header_nav_area .ddmenu:hover+.u-balloon {
        display: block !important;
        height: auto;
        opacity: 1;
        transition: .3s;
        z-index: 9999;
    }
    .header_nav_area nav .u-balloon:hover {
        display: block !important;
        height: auto;
        opacity: 1;
        z-index: 99999;
    }
    .header_nav_area nav .u-balloon .u-small {
        font-size: 10px;
        display: block;
    }
    .dev_nav>ul {
        display: flex;
        align-items: center;
    }
    .header_nav_area nav .u-balloon .megamenu_inner a {
        padding: 4px 0 4px 50px;
        color: #474C5D;
        line-height: 1.5 !important;
        margin: 0;
        text-align: left;
    }
    .megamenu_inner ul li {
        margin-top: 24px;
    }
    .megamenu_inner ul li:first-child {
        margin-top: 0;
    }
    .c-navicon__cloud {
        background: url(../img/header/icon_cloud_w.svg) no-repeat 0 center;
        background-size: 44px 44px;
    }
    .c-navicon__cloud:hover {
        background: url(../img/header/icon_cloud.svg) no-repeat 0 center;
    }
    .c-navicon__dl {
        background: url(../img/header/icon_download_w.svg) no-repeat 0 center;
        background-size: 44px 44px;
    }
    .c-navicon__dl:hover {
        background: url(../img/header/icon_download.svg) no-repeat 0 center;
    }
    .c-navicon__reason {
        background: url(../img/header/icon_reason_w.svg) no-repeat 0 center;
        background-size: 44px 44px;
    }
    .c-navicon__reason:hover {
        background: url(../img/header/icon_reason.svg) no-repeat 0 center;
        background-size: 44px 44px;
    }
    .c-navicon__func {
        background: url(../img/header/icon_function_w.svg) no-repeat 0 center;
        background-size: 44px 44px;
    }
    .c-navicon__func:hover {
        background: url(../img/header/icon_function.svg) no-repeat 0 center;
    }
    .c-navicon__alliance {
        background: url(../img/header/icon_payment_w.svg) no-repeat 0 center;
        background-size: 44px 44px;
    }
    .c-navicon__alliance:hover {
        background: url(../img/header/icon_payment.svg) no-repeat 0 center;
    }
    .c-navicon__demo {
        background: url(../img/header/icon_demo_w.svg) no-repeat 0 center;
        background-size: 44px 44px;
    }
    .c-navicon__demo:hover {
        background: url(../img/header/icon_demo.svg) no-repeat 0 center;
    }
    /* .c-navicon__trial {
        background: url(../img/header/icon_trial_w.svg) no-repeat 0 center;
        background-size: 44px 44px;
    }
    .c-navicon__trial:hover {
        background: url(../img/header/icon_trial.svg) no-repeat 0 center;
    }
    .c-navicon__partner {
        background: url(../img/header/icon_partner_w.svg) no-repeat 0 center;
        background-size: 44px 44px;
    }
    .c-navicon__partner:hover {
        background: url(../img/header/icon_partner.svg) no-repeat 0 center;
    } */
    .c-navicon__adhoop {
        background: url(../img/header/icon_partner_w.svg) no-repeat 0 center;
        background-size: 44px 44px;
    }
    .c-navicon__adhoop:hover {
        background: url(../img/header/icon_partner.svg) no-repeat 0 center;
    }
    .c-navicon__advisor {
        background: url(../img/header/icon_advisor_w.svg) no-repeat 0 center;
        background-size: 44px 44px;
    }
    .c-navicon__advisor:hover {
        background: url(../img/header/icon_advisor.svg) no-repeat 0 center;
        background-size: 44px 44px;
    }
    .c-navicon__event {
        background: url(../img/header/icon_event_w.svg) no-repeat 0 center;
        background-size: 44px 44px;
    }
    .c-navicon__event:hover {
        background: url(../img/header/icon_event.svg) no-repeat 0 center;
    }
    .c-navicon__faq {
        background: url(../img/header/icon_faq_w.svg) no-repeat 0 center;
        background-size: 44px 44px;
    }
    .c-navicon__faq:hover {
        background: url(../img/header/icon_faq.svg) no-repeat 0 center;
    }
    .c-navicon__security {
        background: url(../img/header/icon_security_w.svg) no-repeat 0 center;
        background-size: 44px 44px;
    }
    .c-navicon__security:hover {
        background: url(../img/header/icon_security.svg) no-repeat 0 center;
    }
    .c-navicon__efforts {
        background: url(../img/header/icon_efforts_w.svg) no-repeat 0 center;
        background-size: 44px 44px;
    }
    .c-navicon__efforts:hover {
        background: url(../img/header/icon_efforts.svg) no-repeat 0 center;
    }
    .c-navicon__weakness{
        background: url(../img/header/icon_weakness_w.svg) no-repeat 0 center;
    }
    .c-navicon__weakness:hover {
        background: url(../img/header/icon_weakness.svg) no-repeat 0 center;
    }
    .c-navicon__dev {
        background: url(../img/header/icon_dev_w.svg) no-repeat 0 center;
        background-size: 44px 44px;
    }
    .c-navicon__dev:hover {
        background: url(../img/header/icon_dev.svg) no-repeat 0 center;
    }
    .c-navicon__partner_info {
        background: url(../img/header/icon_partnerinfo_w.svg) no-repeat 0 center;
        background-size: 44px 44px;
    }
    .c-navicon__partner_info:hover {
        background: url(../img/header/icon_partnerinfo.svg) no-repeat 0 center;
    }
    .c-navicon__doc {
        background: url(../img/header/icon_doc_w.svg) no-repeat 0 center;
        background-size: 44px 44px;
    }
    .c-navicon__doc:hover {
        background: url(../img/header/icon_doc.svg) no-repeat 0 center;
    }
    .c-navicon__login {
        background: url(../img/header/icon_login_w.svg) no-repeat 0 center;
        background-size: 44px 44px;
    }
    .c-navicon__login:hover {
        background: url(../img/header/icon_login.svg) no-repeat 0 center;
    }
    /****** /Header Setting ********/
}

.header_nav_area nav .conav {
    position: relative;
    padding-left: 0px;
}

.header_nav_area nav .conav .newmark {
    position: static;
    top: 0;
    left: 0;
}

.header_nav_area nav .newmark {
    background: #EE3F3F;
    color: #fff;
    padding: 4px 6px;
    font-size: 10px;
    margin-right: 5px;
}

@media (min-width:767px) {
    .header_nav_area nav .conav {
        position: relative;
        padding-left: 40px;
    }
    .header_nav_area nav .conav .newmark {
        position: absolute;
        top: -1px;
        left: -2px;
    }
}


/* 色関連の設定 */


/*!
 * Bootstrap v3.3.4 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */


/*  color setting
============================ */


/* text */

.text-default {
    color: #383b4a;
}

a.text-default:hover {
    color: #9797a1;
}

.text-primary {
    color: #DE5D50;
}

a.text-primary:hover {
    color: #ffb700;
}

.text-success {
    color: #18A689;
}

a.text-success:hover {
    color: #0D8969;
}

.text-info {
    color: #31708f;
}

a.text-info:hover {
    color: #245269;
}

.text-warning {
    color: #f0ad4e;
}

a.text-warning:hover {
    color: #E99133;
}

.text-danger {
    color: #DE5D50;
}

a.text-danger:hover {
    color: #CF3F34;
}


/* bg */

.bg-default {
    color: #000;
}

a.bg-default:hover {
    background-color: rgba(255, 255, 255, 0.50);
}

.bg-primary {
    color: #000;
    background-color: #fc0;
}

a.bg-primary:hover {
    background-color: #ffb700;
}

.bg-success {
    background-color: #dff0d8;
}

a.bg-success:hover {
    background-color: #c1e2b3;
}

.bg-info {
    background-color: #d9edf7;
}

a.bg-info:hover {
    background-color: #afd9ee;
}

.bg-warning {
    background-color: #fcf8e3;
}

a.bg-warning:hover {
    background-color: #f7ecb5;
}

.bg-danger {
    background-color: #f2dede;
}

a.bg-danger:hover {
    background-color: #e4b9b9;
}


/* btn */

.btn-default {
    color: #383b4a;
    background-color: transparent;
    border-color: #424555;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open>.dropdown-toggle.btn-default {
    color: #fff;
    background-color: #383b4a;
    border-color: #424555;
}

.btn-default:active,
.btn-default.active,
.open>.dropdown-toggle.btn-default {
    background-image: none;
}

.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
    border-color: #a2a2a2;
    color: #a2a2a2;
}

.btn-default .badge {
    color: #383b4a;
    background-color: #424555;
}

.btn-primary {
    color: #3c4156;
    background-color: #fc0;
    border-color: #fc0;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
    color: #3c4156;
    background-color: #ffb700;
    border-color: #ffb700;
}

.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
    background-image: none;
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
    background-color: #ffe066;
    border-color: #ffe066;
}

.btn-primary .badge {
    color: #3c4156;
    background-color: #fc0;
}

.btn-success {
    color: #fff;
    background-color: #18A689;
    border-color: #18A689;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open>.dropdown-toggle.btn-success {
    color: #fff;
    background-color: #0D8969;
    border-color: #0D8969;
}

.btn-success:active,
.btn-success.active,
.open>.dropdown-toggle.btn-success {
    background-image: none;
}

.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
    background-color: #18A689;
    border-color: #18A689;
}

.btn-success .badge {
    color: #18A689;
    background-color: #fff;
}

.btn-info {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open>.dropdown-toggle.btn-info {
    color: #383b4a;
    background-color: #eee;
    border-color: #424555;
}

.btn-info:active,
.btn-info.active,
.open>.dropdown-toggle.btn-info {
    background-image: none;
}

.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
    border-color: #ddd;
    background-color: rgba(170, 170, 170, 0.10);
    color: #ddd;
}

.btn-info .badge {
    color: #5bc0de;
    background-color: #fff;
}

.btn-warning {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #f0ad4e;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open>.dropdown-toggle.btn-warning {
    color: #fff;
    background-color: #E99133;
    border-color: #E99133;
}

.btn-warning:active,
.btn-warning.active,
.open>.dropdown-toggle.btn-warning {
    background-image: none;
}

.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active {
    background-color: #f0ad4e;
    border-color: #f0ad4e;
}

.btn-warning .badge {
    color: #f0ad4e;
    background-color: #fff;
}

.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d9534f;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open>.dropdown-toggle.btn-danger {
    color: #fff;
    background-color: #CF3F34;
    border-color: #CF3F34;
}

.btn-danger:active,
.btn-danger.active,
.open>.dropdown-toggle.btn-danger {
    background-image: none;
}

.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active {
    background-color: #d9534f;
    border-color: #d43f3a;
}

.btn-danger .badge {
    color: #d9534f;
    background-color: #fff;
}

.btn-normal {
    color: #fff;
    background-color: #6e707a;
    border-color: #6e707a;
}

.btn-normal:hover,
.btn-normal:focus,
.btn-normal:active,
.btn-normal.active,
.open>.dropdown-toggle.btn-normal {
    color: #fff;
    background-color: #5b5d67;
    border-color: #5b5d67;
}

.btn-normal:active,
.btn-normal.active,
.open>.dropdown-toggle.btn-normal {
    background-image: none;
}

.btn-normal.disabled,
.btn-normal[disabled],
fieldset[disabled] .btn-normal,
.btn-normal.disabled:hover,
.btn-normal[disabled]:hover,
fieldset[disabled] .btn-normal:hover,
.btn-normal.disabled:focus,
.btn-normal[disabled]:focus,
fieldset[disabled] .btn-normal:focus,
.btn-normal.disabled:active,
.btn-normal[disabled]:active,
fieldset[disabled] .btn-normal:active,
.btn-normal.disabled.active,
.btn-normal[disabled].active,
fieldset[disabled] .btn-normal.active {
    background-color: #6e707a;
    border-color: #6e707a;
}

.btn-link {
    font-weight: normal;
    color: #333;
    cursor: pointer;
    border-radius: 0;
}

.btn-link,
.btn-link:active,
.btn-link[disabled],
fieldset[disabled] .btn-link {
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active {
    border-color: transparent;
}

.btn-link:hover,
.btn-link:focus {
    color: #333;
    text-decoration: underline;
    background-color: transparent;
}

.btn-link[disabled]:hover,
fieldset[disabled] .btn-link:hover,
.btn-link[disabled]:focus,
fieldset[disabled] .btn-link:focus {
    color: #777;
    text-decoration: none;
}

.btn-link .fa-stack {
    font-size: 8px;
    font-size: .8rem;
}

.btn-link .fa-stack .fa-stack-1x {
    position: relative;
    top: -2px;
    left: 0;
}


/* label */

.label-default {
    background-color: #777;
}

.label-default[href]:hover,
.label-default[href]:focus {
    background-color: #5e5e5e;
}

.label-primary {
    background-color: #DE5D50;
}

.label-primary[href]:hover,
.label-primary[href]:focus {
    background-color: #ffb700;
}

.label-success {
    background-color: #18A689;
}

.label-success[href]:hover,
.label-success[href]:focus {
    background-color: #0D8969;
}

.label-info {
    background-color: #5bc0de;
}

.label-info[href]:hover,
.label-info[href]:focus {
    background-color: #3DA8CF;
}

.label-warning {
    background-color: #f0ad4e;
}

.label-warning[href]:hover,
.label-warning[href]:focus {
    background-color: #E99133;
}

.label-danger {
    background-color: #d9534f;
}

.label-danger[href]:hover,
.label-danger[href]:focus {
    background-color: #CF3F34;
}


/* panel */

.panel-primary {
    border-color: transparent;
}

.panel-primary>.panel-heading {
    color: #fff;
    background-color: #DE5D50;
    border-color: transparent;
}

.panel-primary>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: transparent;
}

.panel-primary>.panel-heading .badge {
    color: #DE5D50;
    background-color: #fff;
}

.panel-primary>.panel-.footer .inner>ul>li:not(:first-child) {
    border-top: 1px solid #555;
    padding-top: 12px;
}

.panel-primary>.panel-footer+.panel-collapse>.panel-body {
    border-bottom-color: #DE5D50;
}

.panel-success {
    border-color: transparent;
}

.panel-success>.panel-heading {
    color: #18A689;
    background-color: #dff0d8;
    border-color: transparent;
}

.panel-success>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: transparent;
}

.panel-success>.panel-heading .badge {
    color: #dff0d8;
    background-color: #18A689;
}

.panel-success>.panel-footer+.panel-collapse>.panel-body {
    border-bottom-color: transparent;
}

.panel-info {
    border-color: transparent;
}

.panel-info>.panel-heading {
    color: #fff;
    background-color: #42B3E5;
    border-color: transparent;
}

.panel-info>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: transparent;
}

.panel-info>.panel-heading .badge {
    color: #fff;
    background-color: #31708f;
}

.panel-info>.panel-footer+.panel-collapse>.panel-body {
    border-bottom-color: transparent;
}

.panel-warning {
    border-color: transparent;
}

.panel-warning>.panel-heading {
    color: #fff;
    background-color: #fcf8e3;
    border-color: transparent;
}

.panel-warning>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: transparent;
}

.panel-warning>.panel-heading .badge {
    color: #fff;
    background-color: #8a6d3b;
}

.panel-warning>.panel-footer+.panel-collapse>.panel-body {
    border-bottom-color: transparent;
}

.panel-danger {
    border-color: #ebccd1;
}

.panel-danger>.panel-heading {
    color: #fff;
    background-color: #DE5D50;
    border-color: transparent;
}

.panel-danger>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: transparent;
}

.panel-danger>.panel-heading .badge {
    color: #fff;
    background-color: #DE5D50;
}

.panel-danger>.panel-footer+.panel-collapse>.panel-body {
    border-bottom-color: transparent;
}


/* alert */

.alert-success {
    color: #fff;
    background-color: #18a689;
    border-color: transparent;
}

.alert-success hr {
    border-color: transparent;
}

.alert-success .alert-link {
    color: #fff
}

.alert-info {
    color: #fff;
    background-color: #42B3E5;
    border-color: transparent;
}

.alert-info hr {
    border-top-color: #a6e1ec
}

.alert-info .alert-link {
    color: #fff
}

.alert-warning {
    color: #fff;
    background-color: #f0ad4e;
    border-color: transparent;
}

.alert-warning hr {
    border-color: transparent;
}

.alert-warning .alert-link {
    color: #fff
}

.alert-danger {
    color: #fff;
    background-color: #DE5D50;
    border-color: transparent;
}

.alert-danger hr {
    border-color: transparent;
}

.alert-danger .alert-link {
    color: #fff
}


/* textlink */

.text_link:link,
.text_link:visited,
.text_link:active {
    text-decoration: underline;
}

.text_link:hover {
    text-decoration: none;
}


/* integrate/partnerのバナー */

.banner {
    text-align: center;
    margin: 0 0 20px 0;
}


/*---*/

div#reviewWrap {
    margin-bottom: 25px;
    padding: 0 30px;
    margin-top: -20px;
}

div.review {
    padding: 20px 0;
    border-bottom: 1px dashed #ccc;
}

div.review div.clearfix {
    margin-bottom: 10px;
}

div.review div.clearfix p.name {
    float: left;
    font-weight: bold;
    width: 280px;
}

div.review div.clearfix div.right {
    float: right;
    width: 260px;
    text-align: right;
}

div.review div.clearfix div.right a:link,
div.review div.clearfix div.right a:visited,
div.review div.clearfix div.right a:hover,
div.review div.clearfix div.right a:active {
    color: #4B4B4B;
}

div.review div.bottomicons {
    margin-bottom: 0;
    padding-top: 10px;
}

div.review p.level {
    background: url("../img/products/ico_level.gif") no-repeat scroll left transparent;
    min-height: 15px;
    height: auto !important;
    height: 15px;
    padding-left: 81px;
    padding-top: 2px;
    float: left;
    margin-right: 10px;
}

div.review p.data {
    background: url("../img/products/ico_data.gif") no-repeat left;
    float: left;
    min-height: 15px;
    height: auto !important;
    height: 15px;
    padding-left: 48px;
    padding-top: 2px;
    margin-right: 10px;
}

div.review p.ver {
    background: url("../img/products/ico_ver.gif") no-repeat scroll left transparent;
    min-height: 15px;
    height: auto !important;
    height: 15px;
    padding-left: 71px;
    padding-top: 2px;
    float: left;
    margin-right: 15px;
}

div.review p.pluginver {
    background: url("../img/products/ico_pluginver.gif") no-repeat scroll left transparent;
    min-height: 15px;
    height: auto !important;
    height: 15px;
    padding-left: 71px;
    padding-top: 2px;
    float: left;
}

div.review .reply {
    background: #F8F8F8;
    padding: 12px 15px;
    margin: 20px 0 0 37px;
}

div.review .reply .clearfix .right {
    width: 110px;
}

div.review p.replydate {
    background: url("../img/products/ico_reply.gif") no-repeat scroll left transparent;
    min-height: 15px;
    height: auto !important;
    height: 15px;
    padding-left: 47px;
    padding-top: 2px;
    float: left;
}

p.comment {
    line-height: 150%;
    text-align: left;
}

div.notesComplete {
    margin: 10px auto 25px;
    text-align: center;
    padding-right: 80px;
    padding-left: 80px;
}

div.btnArea {
    text-align: center;
    padding-top: 20px;
}

.review-summary a {
    margin-left: 10px;
    color: #0B3999;
    font-size: 14px;
}


/* ヘッダのカテゴリリンク */

#store_subnav li.active>a {
    font-weight: bold;
}


/* -------------------------------------------------- 
 * フローティングバナー
-------------------------------------------------- */

.c-floatingbnr {
    max-width: 375px;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 999;
    display: none;
}
.c-floatingbnr2 {
    z-index: 999;
    display: none;
}

.c-floatingbnr__close {
    width: 44px;
    height: 44px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}
.c-floatingbnr img {
    max-width: 100%;
    height: auto;
}
.c-floatingbnr a .c-floatingbnr__img {
    opacity: 1;
    transition: .4s;
}
.c-floatingbnr a:hover .c-floatingbnr__img {
    opacity: 0;
}

.c-floatingbnr_default_img{
    background: url(../img/events/eccube_day_2021/award/bnr_floating_award_on.png);
    background-size: cover;  
}
.p-award_bnr a .c-floatingbnr__img {
    opacity: 1;
    transition: 0s;
}
/* バナー差分 */
.p-advisor,
.p-advisor__bnr {
    background: url(../img/advisor/bnr_advisor_flow_hover@2x.png);
    background-size: cover;
}
.p-day2021__bnr{
    max-width: 300px !important;
    background: url(../img/events/eccube_day_2021/bnr_day2021_floating_on@2x.png);
    background-size: cover; 
}
.c-floatingbnr_sp{
    max-width: none;
    width: 100%;
    height: auto;
    right: auto;
}
.c-floatingbnr_sp img{
    max-width: none;
    width: 100%;
}
/* 閉じるボタンのデフォルトcss */
.c-floatingbnr__close{
    width: 32px;
    height: 32px;
    background: #333e48;
    position: absolute;
    top: -20px;
    right: -20px;
    border-radius: 50%;
    cursor: pointer;
}

/* EC-CUBEの機能ページのフローティング */
.c-floating__close_function {
    top: 0;
    right: 0;
}

/* 四角のボタンcss */
.c-floatingbnr__close_square {
    top: 0;
    right: 0;
    border-radius: 0%;
}    
  
@media screen and (max-width: 767px) {
    .c-floatingbnr__close{
        right: 0;
    }    
}    

.c-floatingbnr__close:hover{
    background: rgb(54, 54, 54);
}
.c-floatingbnr__close::before,
.c-floatingbnr__close::after{
    content: "";
    display: block;
    width: 20px;
    height: 1px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
}
.c-floatingbnr__close::before{
    transform: translate(-50%,-50%) rotate(45deg);
}
.c-floatingbnr__close::after{
    transform: translate(-50%,-50%) rotate(-45deg);
}

.u-img_hover__opacity:hover{
    opacity: .8;
}
.u-shadow{
    box-shadow: rgb(0 0 0 / 20%) 4px 4px 8px;
}
/* 閉じるボタンスマホ時に四角にするなら */
.c-floatingbtn_square__sp .c-floatingbnr__close{
    border-radius: 0%;
    top: 0px;
    right: 0px;
}
.p-release42_bnr .c-floatingbnr__close {
    background: rgb(54, 54, 54);
}
.p-bugbounty_bnr .c-floatingbnr__close:hover,
.p-release42_bnr .c-floatingbnr__close:hover {
    background: #FDC300;
}

.p-advisor_bnr.p-abtest-a .c-floatingbnr__close {
    background: #1b1464;
}
.p-advisor_bnr.p-abtest-a .c-floatingbnr__close:hover {
    background: #FDC300;
}

/* スマホ時はsecurityバナー非表示 */
    .p-effort_bnr img{
        display: none;
    }   

@media screen and (min-width: 768px) {
    .c-floatingbnr {
        max-width: 320px;
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 999;
        display: block;
        transform: translateX(0%);
    }
    .c-floatingbnr2 {
        bottom: 180px;
        right: 20px;
    }
    .p-effort_bnr img{
        display: block;
    }  
    .p-effort_bnr{
        max-width: 300px;
        height: auto;
    }
    .p-effort_bnr .c-floatingbnr__close{
        background: #383B4A;
    }
    /* 閉じるボタンPC時に丸にするなら */
    .c-floatingbtn_circle__pc .c-floatingbnr__close{
        width: 40px;
        height: 40px;
        background: #FDC300;
        position: absolute;
        top: -20px;
        right: -20px;
        border-radius: 50%;
        cursor: pointer;
    }
    .c-floatingbtn_circle__pc .c-floatingbnr__close:hover{
        background: rgb(54, 54, 54);
    }
    .c-floatingbtn_circle__pc .c-floatingbnr__close::before,
    .c-floatingbtn_circle__pc .c-floatingbnr__close::after{
        content: "";
        display: block;
        width: 20px;
        height: 1px;
        background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
    }
}


/*-- 20201005追加 --*/
.header .inner .btn-contact span{
    border: 1px solid #F3F3F3;
    border-radius: 5rem;
    color: #fff;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 1.2rem 2rem 1.2rem;
    transition: all 0.2s ease 0s;
    margin: 1.5rem 0rem;
    line-height: 1.5;
    min-width: 175px;
}
.header .inner .btn-contact span:hover{
    background-color: #383b4a;

}

@media screen and (min-width: 992px) {
    .header .inner .btn-contact {
        padding-top: 0px;
        padding-right: 0px;
        transform: translate(0px, 1.9rem);
    }
    /*-- トップページ --*/
    .front_page .header .inner .btn-contact span {
        border: 1px solid #fff;
        color: #fff;
        background: url(../img/header/icon_store_w.svg) no-repeat 20px center;
        background-size: 19px 24px;
    }
    .show-nav .header .inner .btn-contact span {
        border: 1px solid #424555;
        color: #424555;
        background: url(../img/header/icon_store_g.svg) no-repeat 20px center;
        background-size: 19px 24px;
    }
    .front_page .header .inner:hover .btn-contact span,
    .front_page .active .inner .btn-contact span {
        color: #383b4a;
        border: 1px solid #383b4a;
        background: url(../img/header/icon_store_g.svg) no-repeat 20px center;
        background-size: 19px 24px;
    }
    .front_page .header .inner .btn-contact:hover span {
        color: #fff;
        background: url(../img/header/icon_store_w.svg) no-repeat 20px center #424555;
        background-size: 19px 24px;
    }
    /*-- トップページここまで --*/
    .header .inner .btn-contact span {
        display: inline-block;
        font-size: 1.5rem;
        line-height: 1;
        font-weight: bold;
        border-width: 1px;
        border-style: solid;
        border-color: #383b4a;
        border-image: initial;
        border-radius: 5rem;
        color: #383b4a;
        padding: 1.5rem 3rem 1.5rem 5rem;
        margin: 0;
        transition: all 0.2s ease 0s;
        background: url(../img/header/icon_store_g.svg) no-repeat 20px center;
        background-size: 19px 24px;
        min-width: auto;
    }
    .header .inner .btn-contact:hover span {
        color: #fff;
        background: url(../img/header/icon_store_w.svg) no-repeat 20px center #383b4a;
    }
    .header .inner .btn-contact {
        padding-top: 0px;
        transform: translate(0px, 1.9rem);
    }
    .header_nav_area nav>ul>li>.btn-contact::before,
    .header_nav_area nav>ul>li>.btn-contact:hover::before {
        background: transparent;
    }
}


/*-- 20201005追加ここまで --*/


/*-- 20201214 ストアロゴにTOPに戻る吹き出し追加 --*/

.store_header .p-header__logo {
    position: relative;
}

.store_header .p-header__logo .u-balloon {
    position: absolute;
    top: 70px;
    left: 40%;
    transform: translateX(-50%);
    display: none !important;
    width: 110px;
    height: auto;
    background: rgba(255, 255, 255, 1);
    opacity: 0;
    transition: .3s;
    border-radius: 6px;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, .1));
    padding: 8px;
    z-index: 999;
    text-align: center;
    font-size: 1.3rem;
}

.store_header .p-header__logo .u-balloon::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: #FFF;
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-60%) rotate(-45deg);
    /*box-shadow: 0 0 8px rgba(0,0,0,.1);*/
    z-index: 999;
}

.store_header .p-header__logo:hover .u-balloon {
    display: block !important;
    height: auto;
    opacity: 1;
    transition: .3s;
    z-index: 9999;
}

.store_header .p-header__logo .u-balloon:hover {
    display: block !important;
    height: auto;
    opacity: 1;
    z-index: 99999;
}


/*-- 20210113 Twitter促進吹き出し追加 --*/

.p-sns__twitter {
    position: relative;
}

.p-sns__twitter .u-balloon {
    position: absolute;
    top: 35px;
    left: 100%;
    transform: translateX(-50%);
    width: 180px;
    height: auto;
    background: rgba(255, 255, 255, 1);
    opacity: 0;
    transition: .3s;
    border-radius: 6px;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, .1));
    padding: 6px 8px 8px 8px;
    z-index: 999;
    text-align: center;
    font-size: 1.4rem !important;
    animation: balloon .5s 2s forwards;
}

.p-sns__twitter .u-balloon::before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background: #FFF;
    position: absolute;
    top: -6px;
    left: 20%;
    transform: translateX(-60%) rotate(-45deg);
    /*box-shadow: 0 0 8px rgba(0,0,0,.1);*/
    z-index: 999;
}

.snslist .p-sns__twitter .u-balloon {
    left: 85%;
    animation: balloon2 .5s 2s forwards;
}

.snslist .p-sns__twitter .u-balloon::before {
    left: 20%;
}

@keyframes balloon {
    0% {
        top: 35px;
        opacity: 0;
    }
    100% {
        top: 45px;
        opacity: 1;
    }
}

@keyframes balloon2 {
    0% {
        top: 30px;
        opacity: 0;
    }
    100% {
        top: 40px;
        opacity: 1;
    }
}

.p-sns__twitter .u-balloon i {
    transform: translateY(3px);
}

.p-sns__twitter .u-balloon i::before {
    font-family: FontAwesome;
    content: "\f099";
    color: #1DA1F2;
    font-size: 1.4em;
}


/*
p-co__request 資料ご案内 CVP
-------------------------------------------------- */

.p-co__request {
    width: 100%;
    background: #F8F2D9;
    padding: 20px;
    text-align: left;
}

.p-co__request .c-label {
    display: inline-block;
    color: #FFF;
    background: #38C2EB;
    border-radius: 6px;
    padding: 5px 20px;
    font-size: 14px;
    font-size: 1.4rem;
    margin-bottom: 5px;
}

.p-co__request a {
    text-decoration: underline;
}

.p-co__request a:hover {
    text-decoration: none;
}

@media only screen and (min-width: 768px) {
    .p-co__request {
        text-align: center;
    }
    .p-co__request .c-label {
        margin-right: 10px;
        margin-bottom: 0;
    }
}


/*
 SEO施策　ファーストビュー以下のコンテンツを遅延読み込み
 footer修正した際には高さの変更お願いします。
 */

.l-footer_contain {
    content-visibility: auto;
    contain-intrinsic-size: 1064px;
}

@media (min-width:768px) {
    .l-footer_contain {
        contain-intrinsic-size: 1522px;
    }
}


/*
インシデント対応｜脆弱性ニュースへの誘導
20210512ヘッダーに追加

@media (min-width:768px){
    .header_wrap{
        padding-top: 43px;
    }
}
.header .p-header_incidentNews {
    display: none;
}
@media (min-width:768px){
.header.large .p-header_incidentNews {
    display: block;
    width: 100%;
    background: #FFCA00;
    text-align: center;
    padding: 10px 20px;
}
.header.large .p-header_incidentNews a {
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #424555;
    text-decoration: underline;
}
.header.large .p-header_incidentNews a:hover {
    text-decoration: none;
}
}
 */
 
/*
 20210604_ヘッダーに無料ではじめるボタン追加
-------------------------------------------------- */

.header .inner .c-navicon__header-cvp span{
    background-color: #61C3DB;
    border-radius: 5rem;
    color: #fff;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 1.5rem 2rem 1.5rem;
    transition: all 0.2s ease 0s;
    margin: 1.5rem 0rem;
    line-height: 1.5;
}
.header .inner .c-navicon__header-cvp span:hover{
    background-color: #2EA5C9;
    padding: 1.5rem 2rem 1.5rem;
}
.header .inner .c-navicon__header-cvp span:hover{
    background-color: #2EA5C9;
}
@media only screen and (min-width: 992px){
    .header .inner .c-navicon__header-cvp {
        padding: 0 10px 0 20px;
        
    }
    .header .inner .c-navicon__header-cvp span{
        padding: 1.5rem 2rem 1.5rem;
        margin: 0;
        line-height: 1;
    }
    .header_nav_area nav>ul>li>.c-navicon__header-cvp::before,
    .header_nav_area nav>ul>li>.c-navicon__header-cvp:hover::before{
        background: transparent;
    }
}
@media only screen and ( min-width:992px) {
    .dev_nav{
        padding-right: 10px;
    }
    .show-nav .dev_nav{
        padding-right: 0px;
    }
    .show-nav .global_nav ul>li>a {
        margin: 0 15px 0 0;
    }
}
@media only screen and ( min-width:1366px) {
    .show-nav .global_nav ul>li>a {
        margin: 0 20px 0 0;
    }
    .header_nav_area nav.dev_nav .u-balloon {
        transform: translateX(-130%);
    }

}

/* -------------------------------------- 
 *
 *
 * renewal 2023/01
 * 
 *
----------------------------------------- */

 /* -------------------------------------- 
 *
 * util
 * 
----------------------------------------- */

/* -------------------------------------- 
:root
----------------------------------------- */
/*　/変数---　*/
:root {
    /*ベースとなるカラー*/
    
    --u-color__dark_gray: rgb(24, 24, 24);
    --u-color__super_light_gray: #fcfcfc;
    --u-color__light_gray: #f7f7f7;
    --u-color__light_gray2: #e6e6e6;
    
    --u-color__deep_blue: #4b5194;
    --u-color__blue_vivid: #0868c7;
    --u-color__light_blue_gray: #82a5cb;
    
    --u-color__blue: #25609e;
    --u-color__green: #079484;
    --u-color__cyan: #50b0c3;
    
    --u-color__red: #ce4242;
    
    --u-color__yellow: #fece2f;
    --u-color__light_yellow: #fde900;

    /*ベースとなる書体　TODO*/
    /*ベースとなる長さ*/
    --u-length__xl: 75px;
    --u-length__l: 60px;
    --u-length__m: 40px;
    --u-length__r: 30px;
    --u-length__s: 20px;
    --u-length__xs: 10px;
    --u-length__xxs: 6px;
    /*ベースとなるパディング*/
    --u-padding__smartphone: 15px;

    /*ベースとなる見出しサイズ*/
    --u-text__xxxxl: 3.2rem;
    --u-text__xxxl: 2.8rem;
    --u-text__xxl: 2.2rem;
    --u-text__xl: 1.8rem;
    --u-text__l: 1.6rem;
    --u-text__m: 1.5rem;
    --u-text__r: 1.4rem;
    --u-text__s: 1.2rem;
    --u-text__xs: 1.0rem;
    --u-text__xxs: 0.6rem;

    /*グラデーション*/
    --u-gradation__01: linear-gradient(135deg, #fed82f 0%, #ea9d00 100%);
    --u-gradation__02: linear-gradient(135deg, #cf5a6a 0%, #883445 100%);
    --u-gradation__03: linear-gradient(135deg, #3194d7 0%, #005279 100%);
    --u-gradation__03_reverse: linear-gradient(135deg,  #005279 0%, #3194d7 100%);
    --u-gradation__04: linear-gradient(135deg, #609891 0%, #225c3c 100%);
    --u-gradation__05: linear-gradient(-135deg, #050606 0%, #4a5e83 100%);
    --u-gradation__05_reverse: linear-gradient(-135deg, #4a5e83 0%, #050606 100%);
    --u-gradation__06: linear-gradient(135deg, #5a95b3, #082a50 100%);
    --u-gradation__07: linear-gradient(135deg, #0c5988, #b5fff3 160%);
    --u-gradation__07: linear-gradient(135deg, #1f2127, #5175bb 160%);
    --u-gradation__08: linear-gradient(135deg, #3194d7 0%, #44f4ff 100%);
    /*ドロップシャドウ*/
    --u-drop-shadow__01: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
    --u-drop-shadow__02: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.2));
    --u-drop-shadow__03: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.08));
    --u-drop-shadow__04: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.08));
}
@media (min-width:768px){
    :root {
        /*ベースとなるマージン*/
        --u-length__xl: 128px;
        --u-length__l: 76px;
        --u-length__m: 48px;
        --u-length__r: 36px;
        --u-length__s: 24px;
        --u-length__xs: 16px;
        --u-length__xxs: 8px;

        /*ベースとなる見出しサイズ*/
        --u-text__xxxxl: 4.2rem;
        --u-text__xxxl: 3.2rem;
        --u-text__xxl: 2.8rem;
        --u-text__xl: 2.4rem;
        --u-text__l: 2.0rem;
        --u-text__m: 1.8rem;
        --u-text__r: 1.6rem;
        --u-text__s: 1.4rem;
        --u-text__xs: 1.2rem;
        --u-text__xxs: 0.8rem;
    }
}/*　---変数/　*/

/* -------------------------------------- 
utility　強制的にスタイルを当てたりする調整用のクラス
----------------------------------------- */
/*　/background ---　ベースとなるカラーをもとにクラス化 */
.u-bg-color__white { background-color: #fff;}
.u-bg-color__yellow { background-color: var(--u-color__yellow);}
.u-bg-color__light_yellow { background-color: var(--u-color__light_yellow);}
.u-bg-color__dark_gray { background-color: var(--u-color__dark_gray);}
.u-bg-color__light_gray { background-color: var(--u-color__light_gray);}
.u-bg-color__light_gray2 { background-color: var(--u-color__light_gray2);}
.u-bg-color__blue { background-color: var(--u-color__blue);}
.u-bg-color__blue_vivid { background-color: var(--u-color__blue_vivid);}
.u-bg-color__green { background-color: var(--u-color__green);}
.u-bg-color__cyan { background-color: var(--u-color__cyan);}
.u-bg-color__light_blue_gray { background-color: var(--u-color__light_blue_gray);}
.u-bg-color__red { background-color: var(--u-color__red);}

/*　/カラー --- */
.u-color__white { color: #fff; }
.u-color__yellow { color: var(--u-color__yellow) }
.u-color__light_yellow { color: var(--u-color__light_yellow) }

.u-color__dark_gray { color: var(--u-color__dark_gray) }
.u-color__light_gray { color: var(--u-color__light_gray) }
.u-color__light_gray2 { color: var(--u-color__light_gray2) }
.u-color__blue { color: var(--u-color__blue);}
.u-color__blue_vivid { color: var(--u-color__blue_vivid)!important;}
.u-color__green { color: var(--u-color__green);}
.u-color__cyan { color: var(--u-color__cyan);}
.u-color__red { color: var(--u-color__red);}

/*　/下線 --- */
.u-text-background__yellow {
	background: linear-gradient(transparent 60%, #ffff97 50%);
}

/*　/マージン---　ベースとなるマージンをもとにクラス化 */
/*　all　*/
.u-m-xl { margin: var(--u-length__xl)!important; }
.u-m-l { margin: var(--u-length__l)!important; }
.u-m-m { margin: var(--u-length__m)!important; }
.u-m-r { margin: var(--u-length__r)!important; }
.u-m-s { margin: var(--u-length__s)!important; }
.u-m-xs { margin: var(--u-length__xs)!important; }
.u-m-xxs { margin: var(--u-length__xxs)!important; }
/*　top　*/
.u-mt-xl { margin-top: var(--u-length__xl)!important; }
.u-mt-l { margin-top: var(--u-length__l)!important; }
.u-mt-m { margin-top: var(--u-length__m)!important; }
.u-mt-r { margin-top: var(--u-length__r)!important; }
.u-mt-s { margin-top: var(--u-length__s)!important; }
.u-mt-xs { margin-top: var(--u-length__xs)!important; }
.u-mt-xxs { margin-top: var(--u-length__xxs)!important; }
/*　right　*/
.u-mr-xl { margin-right: var(--u-length__xl)!important; }
.u-mr-l { margin-right: var(--u-length__l)!important; }
.u-mr-m { margin-right: var(--u-length__m)!important; }
.u-mr-r { margin-right: var(--u-length__r)!important; }
.u-mr-s { margin-right: var(--u-length__s)!important; }
.u-mr-xs { margin-right: var(--u-length__xs)!important; }
.u-mr-xxs { margin-right: var(--u-length__xxs)!important; }
/*　bottom　*/
.u-mb-xl { margin-bottom: var(--u-length__xl)!important; }
.u-mb-l { margin-bottom: var(--u-length__l)!important; }
.u-mb-m { margin-bottom: var(--u-length__m)!important; }
.u-mb-r { margin-bottom: var(--u-length__r)!important; }
.u-mb-s { margin-bottom: var(--u-length__s)!important; }
.u-mb-xs { margin-bottom: var(--u-length__xs)!important; }
.u-mb-xxs { margin-bottom: var(--u-length__xxs)!important; }
/*　left　*/
.u-ml-xl { margin-left: var(--u-length__xl)!important; }
.u-ml-l { margin-left: var(--u-length__l)!important; }
.u-ml-m { margin-left: var(--u-length__m)!important; }
.u-ml-r { margin-left: var(--u-length__r)!important; }
.u-ml-s { margin-left: var(--u-length__s)!important; }
.u-ml-xs { margin-left: var(--u-length__xs)!important; }
.u-ml-xxs { margin-left: var(--u-length__xxs)!important; }
/*　vertical　*/
.u-mv-xl { margin: var(--u-length__xl) 0!important; }
.u-mv-l { margin: var(--u-length__l) 0!important; }
.u-mv-m { margin: var(--u-length__m) 0!important; }
.u-mv-r { margin: var(--u-length__r) 0!important; }
.u-mv-s { margin: var(--u-length__s) 0!important; }
.u-mv-xs { margin: var(--u-length__xs) 0!important; }
.u-mv-xxs { margin: var(--u-length__xxs) 0!important; }
/*　horizontal　*/
.u-mh-xl { margin: 0 var(--u-length__xl)!important; }
.u-mh-l { margin: 0 var(--u-length__l)!important; }
.u-mh-m { margin: 0 var(--u-length__m)!important; }
.u-mh-r { margin: 0 var(--u-length__r)!important; }
.u-mh-s { margin: 0 var(--u-length__s)!important; }
.u-mh-xs { margin: 0 var(--u-length__xs)!important; }
.u-mh-xxs { margin: 0 var(--u-length__xxs)!important; }

/*　/パディング---　ベースとなるパディングをもとにクラス化 */
/*　all　*/
.u-p-xl { padding: var(--u-length__xl)!important; }
.u-p-l { padding: var(--u-length__l)!important; }
.u-p-m { padding: var(--u-length__m)!important; }
.u-p-r { padding: var(--u-length__r)!important; }
.u-p-s { padding: var(--u-length__s)!important; }
.u-p-xs { padding: var(--u-length__xs)!important; }
.u-p-xxs { padding: var(--u-length__xxs)!important; }
.u-p-0 { padding: 0!important; }
/*　top　*/
.u-pt-xl { padding-top: var(--u-length__xl)!important; }
.u-pt-l { padding-top: var(--u-length__l)!important; }
.u-pt-m { padding-top: var(--u-length__m)!important; }
.u-pt-r { padding-top: var(--u-length__r)!important; }
.u-pt-s { padding-top: var(--u-length__s)!important; }
.u-pt-xs { padding-top: var(--u-length__xs)!important; }
.u-pt-xxs { padding-top: var(--u-length__xxs)!important; }
/*　right　*/
.u-pr-xl { padding-right: var(--u-length__xl)!important; }
.u-pr-l { padding-right: var(--u-length__l)!important; }
.u-pr-m { padding-right: var(--u-length__m)!important; }
.u-pr-r { padding-right: var(--u-length__r)!important; }
.u-pr-s { padding-right: var(--u-length__s)!important; }
.u-pr-xs { padding-right: var(--u-length__xs)!important; }
.u-pr-xxs { padding-right: var(--u-length__xxs)!important; }
/*　bottom　*/
.u-pb-xl { padding-bottom: var(--u-length__xl)!important; }
.u-pb-l { padding-bottom: var(--u-length__l)!important; }
.u-pb-m { padding-bottom: var(--u-length__m)!important; }
.u-pb-r { padding-bottom: var(--u-length__r)!important; }
.u-pb-s { padding-bottom: var(--u-length__s)!important; }
.u-pb-xs { padding-bottom: var(--u-length__xs)!important; }
.u-pb-xxs { padding-bottom: var(--u-length__xxs)!important; }
/*　left　*/
.u-pl-xl { padding-left: var(--u-length__xl)!important; }
.u-pl-l { padding-left: var(--u-length__l)!important; }
.u-pl-m { padding-left: var(--u-length__m)!important; }
.u-pl-r { padding-left: var(--u-length__r)!important; }
.u-pl-s { padding-left: var(--u-length__s)!important; }
.u-pl-xs { padding-left: var(--u-length__xs)!important; }
.u-pl-xxs { padding-left: var(--u-length__xxs)!important; }
/*　vertical　*/
.u-pv-xl { 
    padding-top: var(--u-length__xl)!important; 
    padding-bottom: var(--u-length__xl)!important; }
.u-pv-l { 
    padding-top: var(--u-length__l)!important; 
    padding-bottom: var(--u-length__l)!important; }
.u-pv-m { 
    padding-top: var(--u-length__m)!important; 
    padding-bottom: var(--u-length__m)!important; }
.u-pv-r { 
    padding-top: var(--u-length__r)!important; 
    padding-bottom: var(--u-length__r)!important; }
.u-pv-s { 
    padding-top: var(--u-length__s)!important; 
    padding-bottom: var(--u-length__s)!important; }
.u-pv-xs { 
    padding-top: var(--u-length__xs)!important; 
    padding-bottom: var(--u-length__xs)!important; }
.u-pv-xxs { 
    padding-top: var(--u-length__xxs)!important; 
    padding-bottom: var(--u-length__xxs)!important; }
/*　horizontal　*/
.u-ph-xl { 
    padding-left: var(--u-length__xl)!important; 
    padding-right:var(--u-length__xl)!important; }
.u-ph-l { 
    padding-left: var(--u-length__l)!important; 
    padding-right:var(--u-length__l)!important; }
.u-ph-m { 
    padding-left: var(--u-length__m)!important; 
    padding-right:var(--u-length__m)!important; }
.u-ph-r { 
    padding-left: var(--u-length__r)!important; 
    padding-right:var(--u-length__r)!important; }
.u-ph-s { 
    padding-left: var(--u-length__s)!important; 
    padding-right:var(--u-length__s)!important; }
.u-ph-xs { 
    padding-left: var(--u-length__xs)!important; 
    padding-right:var(--u-length__xs)!important; }
.u-ph-xxs { 
    padding-left: var(--u-length__xxs)!important; 
    padding-right:var(--u-length__xxs)!important; }

/*　/border---　*/
.u-border__bottom {
    border-bottom: 1px solid var(--u-color__dark_gray);
}
.u-line-mark {
    position: relative;
    z-index: 1;
}
.u-line-mark::before {
    position: absolute;
    content:"";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25%;
    background: var(--u-color__light_yellow);
    z-index: -1;
}
.u-line-mark02 {
    border-bottom: 0.3em solid #ff0;
}

/*　/ディスプレイ---　*/
.u-sp-only {
    display: block!important;
}
.u-pc-only {
    display: none!important;
}
@media (min-width:769px){
    .u-sp-only {
        display: none!important;
    }
    .u-pc-only {
        display: block!important;
    }
}
.u-block {
    display: block!important;
}
.u-inline-block {
    display: inline-block!important;
}
.u-inline {
    display: inline!important;
}
/*　---ディスプレイ/　*/

/*　/テキスト---　*/
.u-text-center { text-align: center!important; }
.u-text-center__pc_only { text-align: justify!important; }
.u-text-center__sp_only { text-align: center!important; }
.u-text-justify { text-align: justify!important; }
.u-text-left { text-align: left!important; }
.u-text-right { text-align: right!important; }
.u-text-weight-bold { font-weight: bold!important;}
.u-text-weight-normal { font-weight: normal!important;}
.u-line_height_s { line-height: 0.7; }
.u-text-spacing { letter-spacing: 0.15em;}
.u-text-underline { text-decoration: underline;}
@media (min-width:769px){
    .u-text-center__pc_only { text-align: center!important; }
    .u-text-center__sp_only { text-align: justify!important; }
}
.u-text-xxxxl { font-size: var(--u-text__xxxxl)!important;}
.u-text-xxxl { font-size: var(--u-text__xxxl)!important;}
.u-text-xxl { font-size: var(--u-text__xxl)!important;}
.u-text-xl { font-size: var(--u-text__xl)!important;}
.u-text-l { font-size: var(--u-text__l)!important;}
.u-text-m { font-size: var(--u-text__m)!important;}
.u-text-r { font-size: var(--u-text__r)!important;}
.u-text-s { font-size: var(--u-text__s)!important;}
.u-text-xs { font-size: var(--u-text__xs)!important;}
.u-text-xxs { font-size: var(--u-text__xxs)!important;}

.u-gradation__01 {
    background-color: #050606;
    background-image: linear-gradient(135deg, #050606 0%, #4a5e83 100%);
}

/* drop-shadow */
.u-drop-shadow__01 { filter: var(--u-drop-shadow__01); }
.u-drop-shadow__02 { filter: var(--u-drop-shadow__02); }
.u-drop-shadow__03 { filter: var(--u-drop-shadow__03); }
.u-drop-shadow__04 { filter: var(--u-drop-shadow__04); }


.dummy {
    background: rgba(0, 0, 0, 0.2);
}
.u-opacity__0_3 {opacity: 0.3}
/* -------------------------------------- 
layout　ページを構成する要素のレイアウトに対して使用するクラス
----------------------------------------- */
.l-inner {
    max-width: 100%;
    padding: 0 var(--u-padding__smartphone);
}
.l-w100 {
    width: 100%;
}
@media (min-width:769px){
    .l-inner {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 50px;
    }
}
.l-margin-center {
    margin: 0 auto;
}
.l-circle {
    border-radius: 50%;
}
/* flex box -------------------------*/
/* flex box container */
.l-2-column { width: 100%; }
.l-3-column { width: 100%; }
.l-4-column { width: 100%; }
@media (min-width:768px){
    .l-2-column { width: calc((100% - var(--u-length__s)) / 2)!important; }
    .l-3-column { width: calc((100% - var(--u-length__s) * 2) / 3)!important; }
    .l-4-column { width: calc((100% - var(--u-length__s) * 3) / 4)!important; }
}

/* flex-direction */
.l-flex {
    display: flex;
}
.l-flex-column {
    display: flex!important;
    flex-direction: column;
}
.l-flex-row {
    display: flex;
    flex-direction: column;
}
@media (min-width:768px){
    .l-flex-row {
        flex-direction: row;
    }
}
/* justify-content */
.l-space-between { justify-content: space-between!important; }
.l-space-around { justify-content: space-around!important; }
.l-justify-center { justify-content: center!important; }
/* align-items */
.l-align-center { align-items: center!important;}
.l-align-stretch { align-items: stretch!important; }
.l-align-start { align-items: flex-start!important; }
.l-align-end { align-items: flex-end!important; }
/* align-self */
.l-align-self-stretch {align-self: stretch;} 
.l-align-self-start {align-self: flex-start;} 
.l-align-self-baseline {align-self: baseline;} 
.l-align-self-center {align-self: center;} 
.l-align-self-end {align-self: flex-end;}
.l-flex-grow {flex-grow:1;} 
.l-flex-grow__2 {flex-grow:2;}
.l-flex-grow__3 {flex-grow:3;} 
.l-flex-grow__4 {flex-grow:4;}
.l-flex-shrink {flex-shrink:1;} 
/* flexその他 */
.l-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.l-flex-center__v {
    display: flex;
    align-items: center;
}
.l-flex-center__h {
    display: flex;
    justify-content: center;
}
.l-flex-wrap {
    flex-wrap: wrap;
}
/* position */
.l-relative {
    position: relative;
}
.l-position_center {
    position: absolute;
    top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}
.l-position__x-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.l-position__y-center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
/* その他 */
.l-know_how-dummy__img {
    display: block;
    text-align: center;
    margin-top: 40px;
    background: rgba(0, 0, 0, 0.1);
    width: 840px;
    height: 448px;
}
.l-pageheader {
    height: 100px;
    background: #f5f5f5;
}
.l-pageheader .l-inner {
    display: flex;
    align-items: center;
    height: 100%;
}
.l-pageheader h1 {
    margin: 0;
}
/* -------------------------------------- 
component　複数のページで再利用できる要素に対して使用するクラス
----------------------------------------- */
/*　
ボタン
*/
.c-button a{ /*ボタンのベースとなるクラス*/
    width: 100%;
    text-align: center;
    padding: 0.8em 0;
    border-radius: 4px;
    font-size: 1.6rem;
    font-weight: bold;
    transition: all  0.3s ease;
}
.c-button a {
    display: block;
}
.c-button__01 a{ /* 「--u-color__yellow」の色のボタンに.c-buttonと一緒に記述*/
    background: var(--u-color__yellow);
    color: rgb(0, 0, 0);
}
.c-button__02 a{ /* 「白枠＆白文字」のボタンに.c-buttonと一緒に記述*/
    border: 1px solid #fff;
    color: #fff;
}
.c-button__03 a{ /* 「ゴールド＆白文字」のボタンに.c-buttonと一緒に記述*/
    color: #fff;
    text-shadow: 0px 0px 10px rgb(0 0 0 / 40%);
    background-color: #D0AB00;
}
.c-button__04 a{ /* 「白色」のボタンに.c-buttonと一緒に記述*/
    color: #000;
    background: #fff;
}
.c-button__05 a{ /* 「水色グラデーション」のボタンに.c-buttonと一緒に記述*/
    color: #fff;
    background: var(--u-color__blue);
    text-shadow: 0px 0px 10px rgb(0 0 0 / 40%);
}
.c-button__06 a{ /* 「グレー枠＆黒文字」のボタンに.c-buttonと一緒に記述*/
    border: 1px solid #aaa;
    color: var(--u-color__dark_gray);
}
.c-button__light_blue_gray a{
    color: #fff;
    background: var(--u-color__light_blue_gray);
}
.c-button__bule_vivid a{ 
    color: #fff;
    background-color: var(--u-color__blue_vivid);
}
.c-button__gray a{ 
    color: #fff;
    background-color: #666;
}
.c-button__11 a{ /* 「セキュリティ（application）」のボタンに.c-buttonと一緒に記述*/
    color: #fff;
    background-color: var(--u-color__blue);
}
.c-button__12 a{ /* 「セキュリティ（environment）」のボタンに.c-buttonと一緒に記述*/
    color: #fff;
    background-color: var(--u-color__green);
}
.c-button__13 a{ /* 「セキュリティ（people）」のボタンに.c-buttonと一緒に記述*/
    color: #fff;
    background-color: var(--u-color__cyan);
}
.c-button__11_2 a{ /* 「セキュリティ（application）」のボタンに.c-buttonと一緒に記述*/
    color: #fff;
    background-color: #80abd7;
}
.c-button__12_2 a{ /* 「セキュリティ（environment）」のボタンに.c-buttonと一緒に記述*/
    color: #fff;
    background-color: #bdca66;
}
.c-button__13_2 a{ /* 「セキュリティ（people）」のボタンに.c-buttonと一緒に記述*/
    color: #fff;
    background-color: var(--u-color__cyan);
}
/* 
ボタンhover 
*/
.c-button__01 a:hover {
    background-color: #fff;
    color: #D0AB00!important;
}
.c-button__02 a:hover {
    background-color: #fff;
    color: #393C5E;
}
.c-button__03 a:hover {
    background-color: #fff;
    color: #D0AB00;
    text-shadow: none;
}
.c-button__04 a:hover { /* 「白色」のボタンに.c-buttonと一緒に記述*/
    color: #000!important;
    background: var(--u-color__yellow);
}
.c-button__05 a:hover { /* 「水色グラデーション」のボタンに.c-buttonと一緒に記述*/
    color: #fff;
    background: var(--u-color__yellow);
    text-shadow: 0px 0px 10px rgb(0 0 0 / 40%);
}
.c-button__06 a:hover {
    background-color: #eee;
    /* border: 1px solid var(--u-color__yellow); */
}
.c-button__bule_vivid a:hover{
    color: #000!important;
    background: var(--u-color__yellow);
}
.c-button__light_blue_gray a:hover {
    color: #000!important;
    background: var(--u-color__yellow);
}
.c-button__gray a:hover {
    color: #fff!important;
    background: var(--u-color__yellow);
}
.c-button__11 a:hover{ /* 「セキュリティ（application）」のボタンに.c-buttonと一緒に記述*/
    color: #000!important;
    background: var(--u-color__yellow);
}
.c-button__12 a:hover{ /* 「セキュリティ（environment）」のボタンに.c-buttonと一緒に記述*/
    color: #000!important;
    background: var(--u-color__yellow);
    background: #28bb99;
}
.c-button__13 a:hover{ /* 「セキュリティ（people）」のボタンに.c-buttonと一緒に記述*/
    color: #000!important;
    background: var(--u-color__yellow);
}
.c-chevron { 
    position: relative;
    padding-right: 25px!important;
    padding-left: 25px!important;
}
.c-chevron::after {
    content: "chevron_right";
    color: inherit;
    font-family: 'Material Symbols Outlined';
    font-size: 2.5rem;
    position: absolute;
    top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
    right: 3px;
    font-variation-settings:
    'FILL' 1,
    'wght' 700,
    'GRAD' 200,
    'opsz' 48
}
.support_documents .c-chevron::after {
    /* right: 14px; */
}
/* hoverで拡大するバナー */
a.c-banner-scaling {
    cursor: pointer;
    transition: all .3s cubic-bezier(0,0,0.55,1);
    text-decoration: none;
    display: flex;
}
a:link.c-banner-scaling,
a:visited.c-banner-scaling,
a:active.c-banner-scaling {
    text-decoration: none;
}
a:hover.c-banner-scaling {
    transform: scale3d(1.015,1.015,1.015);
    box-shadow: 2px 4px 16px rgba(0,0,0,.08);
}
a:hover.c-banner-scaling::after{
}

.c-banner-scaling * { /* animation時のにじみ防止 */
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* hr */
.c-hr {
    border-top: 1px solid #aaa;
    width: 100%;
}
.c-hr__dark {
    border-top: 1px solid #555;
    width: 100%;
}
.c-notification {
    background: #a50a05;
    padding: 0.35em 1.5em;
    color: #fff;
    font-weight: bold;
    font-size: var(--u-text__r);
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 200,
  'opsz' 48
}
/* 
3カラムフローティングバナー 
*/
.c-floating-bnr-container {
    display: none;
    width: 100%;
    height: 76px;
    position: fixed;
    bottom: 0px;
    right: 0px;
    z-index: 999;
    transform: translateX(0%);
}
/* a */
.c-floating-bnr-container a {
    padding: 4px 0px 8px 8px;
    width: calc(100% / 3);
    cursor: pointer;
    text-decoration: none;
    transition: all .3s cubic-bezier(0,0,0.55,1);
}

.c-floating-bnr-container a:link,
.c-floating-bnr-container a:visited,
.c-floating-bnr-container a:active {
    text-decoration: none;
}
.c-floating-bnr-container a:last-child {
    padding-right: 8px;
}
.c-floating-bnr-container a:hover {
    transform: scale3d(1.015,1.015,1.015);
}
.c-floating-bnr-container a:hover::after {
    box-shadow: 2px 4px 16px rgba(0,0,0,.08);
}

.c-floating-bnr-container * { /* animation時のにじみ防止 */
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.c-floating-bnr-container a .p-bnr-contents {
    height: 62px;
    padding: 8px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f9f9f9;
    filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.4));
}

.c-floating-bnr-container img {
    width: auto;
    margin: 0 14px 0 0;
}
.c-floating-bnr-container h3 {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}
.c-floating-bnr-container p {
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: normal;
    color: var(--u-color__blue_vivid);
    text-decoration: none;
}
.c-floating-bnr-container .close_button {
    width: 28px;
    height: auto;
    position: absolute;
    top: -26px;
    right: 3px;
    z-index: 3;
    cursor: pointer;
    margin: 0;
}
.c-floating-bnr-container .material-symbols-rounded {
    font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}
.c-floating-bnr-container.close {
    display: none;
}
.c-floating-bnr-container .i-amazon-pay img {height: 30px;}
.c-floating-bnr-container .i-eccube-payment img {height: 42px;}
.c-floating-bnr-container .i-advisor img:not(:first-child) {height: 32px;}
.c-floating-bnr-container .i-advisor img:first-child {
    margin: 0 8px 0 0;
    width: 37px;
    height: auto;
}
@media (min-width:769px){
    .c-floating-bnr-container .p-text-area {
        display: none;
    }
    .c-floating-bnr-container {
        display: flex;
    }
    .c-floating-bnr-container img {margin: 0 0px 0 0;}
}
@media (min-width:1180px){
    .c-floating-bnr-container .p-text-area {display: block;}
    .c-floating-bnr-container img {margin: 0 14px 0 0;}
    .c-floating-bnr-container h3 {font-size: 12px;}

    .c-floating-bnr-container .i-eccube-payment img {height: 34px;}
    .c-floating-bnr-container .i-amazon-pay img {height: 25px;}
    .c-floating-bnr-container .i-advisor img:not(:first-child) {height: 24px;}
    .c-floating-bnr-container .i-advisor img:first-child {width: 30px;
}
@media (min-width:1400px){
    .c-floating-bnr-container img {margin: 0 20px 0 0;}
    .c-floating-bnr-container h3 {font-size: 14px;}

    .c-floating-bnr-container .i-eccube-payment img {height: 42px;}
    .c-floating-bnr-container .i-amazon-pay img {height: 30px;}
    .c-floating-bnr-container .i-advisor img:not(:first-child) {height: 32px;}
}
/* フローティングバナー設置のための調整コード */