html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-feature-settings: "palt";
}

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

body {
    line-height: 1
}

html {
    height: 100%
}

body {
    height: 100%
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none
}

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

.clearfix:after {
    visibility: hidden;
    height: 0;
    display: block;
    font-size: 0;
    content: " ";
    clear: both
}

a {
    outline: none
}

a:focus {
    outline: none
}

a,
a:link,
a:visited,
a:active,
a:hover {
    color: inherit;
    text-decoration: none
}

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

* html .clearfix {
    zoom: 1
}

*:first-child+html .clearfix {
    zoom: 1
}

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none
}

input[type="submit"],
input[type="button"] {
    border-radius: 0;
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    appearance: button;
    border: none;
    box-sizing: border-box
}

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

input[type="submit"]::focus,
input[type="button"]::focus {
    outline-offset: -2px
}

body {
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Arial", "Meiryo", "Yu Gothic", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: none;
    -webkit-font-smoothing: antialiased;
    -webkit-font-smoothing: subpixel-antialiased
}

main {
    position: relative
}

.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 14px;
    padding-left: 14px
}

.row {
    display: flex;
    -webkit-display: flex;
    -ms-display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    margin-left: -14px;
    margin-right: -14px
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-left: 14px;
    padding-right: 14px
}

.col-1 {
    flex: 0 0 8.333333%;
    -webkit-flex: 0 0 8.333333%;
    -ms-flex: 0 0 8.333333%;
    max-width: 8.333333%
}

.col-2 {
    flex: 0 0 16.666667%;
    -webkit-flex: 0 0 16.666667%;
    -ms-flex: 0 0 16.666667%;
    max-width: 16.666667%
}

.col-3 {
    flex: 0 0 25%;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    max-width: 25%
}

.col-4 {
    flex: 0 0 33.333333%;
    -webkit-flex: 0 0 33.333333%;
    -ms-flex: 0 0 33.333333%;
    max-width: 33.333333%
}

.col-5 {
    flex: 0 0 41.666667%;
    -webkit-flex: 0 0 41.666667%;
    -ms-flex: 0 0 41.666667%;
    max-width: 41.666667%
}

.col-6 {
    flex: 0 0 50%;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    max-width: 50%
}

.col-7 {
    flex: 0 0 58.333333%;
    -webkit-flex: 0 0 58.333333%;
    -ms-flex: 0 0 58.333333%;
    max-width: 58.333333%
}

.col-8 {
    flex: 0 0 66.666667%;
    -webkit-flex: 0 0 66.666667%;
    -ms-flex: 0 0 66.666667%;
    max-width: 66.666667%
}

.col-9 {
    flex: 0 0 75%;
    -webkit-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    max-width: 75%
}

.col-10 {
    flex: 0 0 83.333333%;
    -webkit-flex: 0 0 83.333333%;
    -ms-flex: 0 0 83.333333%;
    max-width: 83.333333%
}

.col-11 {
    flex: 0 0 91.666667%;
    -ms-flex: 0 0 91.666667%;
    -webkit-flex: 0 0 91.666667%;
    max-width: 91.666667%
}

.col-12 {
    flex: 0 0 100%;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    max-width: 100%
}

.col-push-1 {
    left: 8.333333%
}

.col-push-2 {
    left: 16.666667%
}

.col-push-3 {
    left: 25%
}

.col-push-4 {
    left: 33.333333%
}

.col-push-5 {
    left: 41.666667%
}

.col-push-6 {
    left: 50%
}

.col-push-7 {
    left: 58.333333%
}

.col-push-8 {
    left: 66.666667%
}

.col-push-9 {
    left: 75%
}

.col-push-10 {
    left: 83.333333%
}

.col-push-11 {
    left: 91.666667%
}

.col-push-12 {
    left: 100%
}

.col-pull-1 {
    right: 8.333333%
}

.col-pull-2 {
    right: 16.666667%
}

.col-pull-3 {
    right: 25%
}

.col-pull-4 {
    right: 33.333333%
}

.col-pull-5 {
    right: 41.666667%
}

.col-pull-6 {
    right: 50%
}

.col-pull-7 {
    right: 58.333333%
}

.col-pull-8 {
    right: 66.666667%
}

.col-pull-9 {
    right: 75%
}

.col-pull-10 {
    right: 83.333333%
}

.col-pull-11 {
    right: 91.666667%
}

.col-pull-12 {
    right: 100%
}

.col-center {
    margin-left: auto;
    margin-right: auto
}

@media screen and (max-width: 979px) {
    .container {
        padding-left: 28px;
        padding-right: 28px
    }

    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6 {
        flex: 0 0 50%;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        max-width: 50%
    }

    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12 {
        flex: 0 0 100%;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        max-width: 100%
    }

    .col-offset-1,
    .col-offset-2,
    .col-offset-3,
    .col-offset-4,
    .col-offset-5,
    .col-offset-6 {
        margin-left: 50%
    }

    .col-offset-7,
    .col-offset-8,
    .col-offset-9,
    .col-offset-10,
    .col-offset-11,
    .col-offset-12 {
        margin-left: 100%
    }
}

@media screen and (min-width: 1036px) {
    .container {
        max-width: 1008px
    }

    .row {
        margin-left: -14px;
        margin-right: -14px
    }

    .col-m-1 {
        flex: 0 0 8.333333%;
        -webkit-flex: 0 0 8.333333%;
        -ms-flex: 0 0 8.333333%;
        max-width: 8.333333%
    }

    .col-m-2 {
        flex: 0 0 16.666667%;
        -webkit-flex: 0 0 16.666667%;
        -ms-flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    .col-m-3 {
        flex: 0 0 25%;
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        max-width: 25%
    }

    .col-m-4 {
        flex: 0 0 33.333333%;
        -webkit-flex: 0 0 33.333333%;
        -ms-flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-m-5 {
        flex: 0 0 41.666667%;
        -webkit-flex: 0 0 41.666667%;
        -ms-flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-m-6 {
        flex: 0 0 50%;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        max-width: 50%
    }

    .col-m-7 {
        flex: 0 0 58.333333%;
        -webkit-flex: 0 0 58.333333%;
        -ms-flex: 0 0 58.333333%;
        max-width: 58.333333%
    }

    .col-m-8 {
        flex: 0 0 66.666667%;
        -webkit-flex: 0 0 66.666667%;
        -ms-flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-m-9 {
        flex: 0 0 75%;
        -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
        max-width: 75%
    }

    .col-m-10 {
        flex: 0 0 83.333333%;
        -webkit-flex: 0 0 83.333333%;
        -ms-flex: 0 0 83.333333%;
        max-width: 83.333333%
    }

    .col-m-11 {
        flex: 0 0 91.666667%;
        -ms-flex: 0 0 91.666667%;
        -webkit-flex: 0 0 91.666667%;
        max-width: 91.666667%
    }

    .col-m-12 {
        flex: 0 0 100%;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        max-width: 100%
    }

    .col-offset-m-1 {
        margin-left: 8.333333%
    }

    .col-offset-m-2 {
        margin-left: 16.666667%
    }

    .col-offset-m-3 {
        margin-left: 25%
    }

    .col-offset-m-4 {
        margin-left: 33.333333%
    }

    .col-offset-m-5 {
        margin-left: 41.666667%
    }

    .col-offset-m-6 {
        margin-left: 50%
    }

    .col-offset-m-7 {
        margin-left: 58.333333%
    }

    .col-offset-m-8 {
        margin-left: 66.666667%
    }

    .col-offset-m-9 {
        margin-left: 75%
    }

    .col-offset-m-10 {
        margin-left: 83.333333%
    }

    .col-offset-m-11 {
        margin-left: 91.666667%
    }

    .col-offset-m-12 {
        margin-left: 100%
    }

    .order-1 {
        order: 1
    }

    .order-2 {
        order: 2
    }

    .justify-content-center {
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important
    }
}

@media screen and (min-width: 1336px) {
    .container {
        max-width: 1308px
    }

    .col-l-1 {
        flex: 0 0 8.333333%;
        -webkit-flex: 0 0 8.333333%;
        -ms-flex: 0 0 8.333333%;
        max-width: 8.333333%
    }

    .col-l-2 {
        flex: 0 0 16.666667%;
        -webkit-flex: 0 0 16.666667%;
        -ms-flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    .col-l-3 {
        flex: 0 0 25%;
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        max-width: 25%
    }

    .col-l-4 {
        flex: 0 0 33.333333%;
        -webkit-flex: 0 0 33.333333%;
        -ms-flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-l-5 {
        flex: 0 0 41.666667%;
        -webkit-flex: 0 0 41.666667%;
        -ms-flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-l-6 {
        flex: 0 0 50%;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        max-width: 50%
    }

    .col-l-7 {
        flex: 0 0 58.333333%;
        -webkit-flex: 0 0 58.333333%;
        -ms-flex: 0 0 58.333333%;
        max-width: 58.333333%
    }

    .col-l-8 {
        flex: 0 0 66.666667%;
        -webkit-flex: 0 0 66.666667%;
        -ms-flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-l-9 {
        flex: 0 0 75%;
        -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
        max-width: 75%
    }

    .col-l-10 {
        flex: 0 0 83.333333%;
        -webkit-flex: 0 0 83.333333%;
        -ms-flex: 0 0 83.333333%;
        max-width: 83.333333%
    }

    .col-l-11 {
        flex: 0 0 91.666667%;
        -ms-flex: 0 0 91.666667%;
        -webkit-flex: 0 0 91.666667%;
        max-width: 91.666667%
    }

    .col-l-12 {
        flex: 0 0 100%;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        max-width: 100%
    }
}

h1 {
    font-size: 1.5rem
}

h2 {
    font-size: 1.25rem
}

.wsnr {
    white-space: nowrap
}

.small {
    font-size: 60%
}

.sup {
    font-size: 50%;
    vertical-align: text-top
}

.sub {
    font-size: 50%;
    vertical-align: text-bottom
}

.text__serif {
    font-family: serif
}

.text__bold {
    font-weight: bold
}

.text__normal {
    font-weight: normal
}

.text__thin {
    font-weight: 100
}

.text__xxxl {
    font-size: 3rem
}

.text__xxl {
    font-size: 2rem
}

.text__xl {
    font-size: 1.5rem
}

.text__l {
    font-size: 1.25rem
}

.text__m {
    font-size: 1rem
}

.text__s {
    font-size: .75rem
}

.text__xs {
    font-size: .625rem
}

.text__left {
    text-align: left
}

.text__right {
    text-align: right
}

.text__justify {
    text-align: justify
}

.text__center {
    text-align: center
}

button.btn,
input[type="submit"].btn,
input[type="button"].btn,
a.btn,
span.btn {
    border: none;
    font-weight: bold
}

button.btn.normal,
input[type="submit"].btn.normal,
input[type="button"].btn.normal,
a.btn.normal,
span.btn.normal {
    font-weight: normal
}

button.btn:active,
input[type="submit"].btn:active,
input[type="button"].btn:active,
a.btn:active,
span.btn:active {
    opacity: .5
}

button.btn.btn__l.round,
input[type="submit"].btn.btn__l.round,
input[type="button"].btn.btn__l.round,
a.btn.btn__l.round,
span.btn.btn__l.round {
    line-height: 44px;
    border-radius: 30px;
    padding: 0 20px
}

button.btn.btn__l.square,
input[type="submit"].btn.btn__l.square,
input[type="button"].btn.btn__l.square,
a.btn.btn__l.square,
span.btn.btn__l.square {
    line-height: 44px;
    border-radius: 4px;
    padding: 0 15px
}

button.btn.btn__m.round,
input[type="submit"].btn.btn__m.round,
input[type="button"].btn.btn__m.round,
a.btn.btn__m.round,
span.btn.btn__m.round {
    line-height: 35px;
    border-radius: 35px;
    padding: 0 15px
}

button.btn.btn__m.square,
input[type="submit"].btn.btn__m.square,
input[type="button"].btn.btn__m.square,
a.btn.btn__m.square,
span.btn.btn__m.square {
    line-height: 35px;
    border-radius: 4px;
    padding: 0 15px
}

button.btn.btn__s,
input[type="submit"].btn.btn__s,
input[type="button"].btn.btn__s,
a.btn.btn__s,
span.btn.btn__s {
    font-size: .75rem
}

button.btn.btn__s.round,
input[type="submit"].btn.btn__s.round,
input[type="button"].btn.btn__s.round,
a.btn.btn__s.round,
span.btn.btn__s.round {
    line-height: 24px;
    border-radius: 24px;
    padding: 0 10px
}

button.btn.btn__s.square,
input[type="submit"].btn.btn__s.square,
input[type="button"].btn.btn__s.square,
a.btn.btn__s.square,
span.btn.btn__s.square {
    line-height: 24px;
    border-radius: 4px;
    padding: 0 5px
}

button.btn.inline,
input[type="submit"].btn.inline,
input[type="button"].btn.inline,
a.btn.inline,
span.btn.inline {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    margin-right: 5px
}

button.btn.block,
input[type="submit"].btn.block,
input[type="button"].btn.block,
a.btn.block,
span.btn.block {
    display: block;
    text-align: center
}

button.btn.border__wh,
input[type="submit"].btn.border__wh,
input[type="button"].btn.border__wh,
a.btn.border__wh,
span.btn.border__wh {
    border: 1px solid #fff;
    color: #fff
}

button.btn.border__wh:hover,
input[type="submit"].btn.border__wh:hover,
input[type="button"].btn.border__wh:hover,
a.btn.border__wh:hover,
span.btn.border__wh:hover {
    background-color: rgba(255, 255, 255, 0.2)
}

button.btn.border__bk,
input[type="submit"].btn.border__bk,
input[type="button"].btn.border__bk,
a.btn.border__bk,
span.btn.border__bk {
    border: 1px solid #5a5a5a
}

button.btn.border__bk:hover,
input[type="submit"].btn.border__bk:hover,
input[type="button"].btn.border__bk:hover,
a.btn.border__bk:hover,
span.btn.border__bk:hover {
    background-color: rgba(90, 90, 90, 0.2)
}

button.btn.yellow,
input[type="submit"].btn.yellow,
input[type="button"].btn.yellow,
a.btn.yellow,
span.btn.yellow {
    background-color: #fac83c
}

button.btn.yellow:hover,
input[type="submit"].btn.yellow:hover,
input[type="button"].btn.yellow:hover,
a.btn.yellow:hover,
span.btn.yellow:hover {
    background-color: #ff9b00
}

button.btn.red,
input[type="submit"].btn.red,
input[type="button"].btn.red,
a.btn.red,
span.btn.red {
    background-color: #ff6478;
    color: #fff
}

button.btn.red:hover,
input[type="submit"].btn.red:hover,
input[type="button"].btn.red:hover,
a.btn.red:hover,
span.btn.red:hover {
    background-color: #ff2850
}

button.btn.gray,
input[type="submit"].btn.gray,
input[type="button"].btn.gray,
a.btn.gray,
span.btn.gray {
    background-color: #f0f0f0
}

button.btn.gray:hover,
input[type="submit"].btn.gray:hover,
input[type="button"].btn.gray:hover,
a.btn.gray:hover,
span.btn.gray:hover {
    background-color: #c8c8c8
}

button.btn.angle__right i,
input[type="submit"].btn.angle__right i,
input[type="button"].btn.angle__right i,
a.btn.angle__right i,
span.btn.angle__right i {
    margin-left: 5px
}

button.btn.angle__left i,
input[type="submit"].btn.angle__left i,
input[type="button"].btn.angle__left i,
a.btn.angle__left i,
span.btn.angle__left i {
    margin-right: 5px
}

span.tag {
    border: none;
    font-weight: bold
}

span.tag.normal {
    font-weight: normal
}

span.tag.btn__l.round {
    line-height: 44px;
    border-radius: 30px;
    padding: 0 20px
}

span.tag.btn__l.square {
    line-height: 44px;
    border-radius: 4px;
    padding: 0 15px
}

span.tag.btn__m.round {
    line-height: 35px;
    border-radius: 35px;
    padding: 0 15px
}

span.tag.btn__m.square {
    line-height: 35px;
    border-radius: 4px;
    padding: 0 15px
}

span.tag.btn__s {
    font-size: 12px
}

span.tag.btn__s.round {
    line-height: 35px;
    border-radius: 24px;
    padding: 0 10px
}

span.tag.btn__s.square {
    line-height: 24px;
    border-radius: 4px;
    padding: 0 5px
}

span.tag.inline {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    margin-right: 5px
}

span.tag.block {
    display: block;
    text-align: center
}

span.tag.border__wh {
    border: 1px solid #fff;
    color: #fff
}

span.tag.border__bk {
    border: 1px solid #5a5a5a
}

span.tag.yellow {
    background-color: #fac83c
}

span.tag.red {
    background-color: #ff6478;
    color: #fff
}

span.tag.gray {
    background-color: #f0f0f0
}

.mg__top__off {
    margin-top: 0 !important
}

.mg__top__xs {
    margin-top: 5px !important
}

.mg__top__s {
    margin-top: 10px !important
}

.mg__top__m {
    margin-top: 20px !important
}

.mg__top__l {
    margin-top: 40px !important
}

.mg__top__xl {
    margin-top: 80px !important
}

.mg__bottom__off {
    margin-bottom: 0 !important
}

.mg__bottom__xs {
    margin-bottom: 5px !important
}

.mg__bottom__s {
    margin-bottom: 10px !important
}

.mg__bottom__m {
    margin-bottom: 20px !important
}

.mg__bottom__l {
    margin-bottom: 40px !important
}

.mg__bottom__xl {
    margin-bottom: 80px !important
}

.pd__top__off {
    padding-top: 0 !important
}

.pd__top__xs {
    padding-top: 5px !important
}

.pd__top__s {
    padding-top: 10px !important
}

.pd__top__m {
    padding-top: 20px !important
}

.pd__top__l {
    padding-top: 40px !important
}

.pd__top__xl {
    padding-top: 80px !important
}

.pd__bottom__off {
    padding-bottom: 0 !important
}

.pd__bottom__xs {
    padding-bottom: 5px !important
}

.pd__bottom__s {
    padding-bottom: 10px !important
}

.pd__bottom__m {
    padding-bottom: 20px !important
}

.pd__bottom__l {
    padding-bottom: 40px !important
}

.pd__bottom__xl {
    padding-bottom: 80px !important
}

.bg__white {
    background-color: #fff
}

.bg__gray {
    background-color: #F0F0F0
}

.bg__darkgray {
    background-color: #C8C8C8
}

.bg__black {
    background-color: #5A5A5A
}

.bg__yellow {
    background-color: #FAC83C
}

.bg__red {
    background-color: #FF6478
}

.text__white {
    color: #fff
}

.text__gray__light {
    color: #F0F0F0
}

.text__gray {
    color: #C8C8C8
}

.text__gray__dark {
    color: #828282
}

.text__black__light {
    color: #6e6e6e
}

.text__black {
    color: #5A5A5A
}

.text__black__dark {
    color: #000
}

.text__yellow__light {
    color: #FFF078
}

.text__yellow {
    color: #FAC83C
}

.text__yellow__dark {
    color: #FF9B00
}

.text__red__light {
    color: #FFB4BE
}

.text__red {
    color: #FF6478
}

.text__red__dark {
    color: #FF2850
}

.text__blue__light {
    color: #8CB4DC
}

.text__blue {
    color: #00508C
}

.text__blue__dark {
    color: #003264
}

.clear__sp {
    display: none !important
}

@media screen and (min-width: 980px) {
    .text__xxxl__pc {
        font-size: 3rem
    }

    .text__xxl__pc {
        font-size: 2rem
    }

    .text__xl__pc {
        font-size: 1.5rem
    }

    .text__l__pc {
        font-size: 1.25rem
    }

    .text__m__pc {
        font-size: 1rem
    }

    .text__s__pc {
        font-size: .75rem
    }

    .text__xs__pc {
        font-size: .625rem
    }

    .clear__pc {
        display: none !important
    }

    .clear__sp {
        display: block !important
    }

    .clear__sp.inline {
        display: inline !important
    }
}

h2 {
    position: relative
}

h2:before {
    content: '';
    width: 80px;
    height: 1px;
    border-top: 1px dashed #5A5A5A;
    display: block;
    margin-bottom: 10px
}

h2:after {
    content: '';
    width: 80px;
    height: 1px;
    border-top: 1px dashed #5A5A5A;
    display: block;
    margin-top: 10px
}

.text__center h2:before,
.text__center h2:after {
    margin-left: auto;
    margin-right: auto
}

h2.text__red:before,
h2.text__red:after {
    border-color: #FF6478
}

@media screen and (min-width: 1036px) {
    .text__left__pc {
        text-align: left
    }

    .text__right__pc {
        text-align: right
    }

    .text__center__pc {
        text-align: center
    }

    .pd__top__off__pc {
        padding-top: 0 !important
    }

    .pd__bottom__off__pc {
        padding-bottom: 0 !important
    }

    .mg__top__off__pc {
        margin-top: 0 !important
    }

    .mg__bottom__off__pc {
        margin-bottom: 0 !important
    }

    .text__center__pc h2:before,
    .text__center__pc h2:after {
        margin-left: auto;
        margin-right: auto
    }
}

.footer {
    color: #fff
}

.footer__gotop {
    display: block;
    margin: 30px auto;
    width: 50px;
    height: 50px
}

.footer__gotop i {
    font-size: 44px
}

.footer__logo {
    display: inline-block;
    padding: 30px 0;
    transition: .3s ease opacity
}

.footer__logo img {
    height: 44px;
    width: auto
}

.footer__logo:hover {
    opacity: .7
}

.footer__address {
    line-height: 1.6
}

.footer__address p:last-child {
    margin-bottom: 20px
}

.footer__sns a {
    display: inline-block;
    padding: 0 20px 0 0;
    font-size: 44px
}

.footer__links {
    padding-top: 20px
}

.footer__links .footer__contact__btn {
    margin-bottom: 20px
}

.footer__links .footer__link {
    line-height: 2
}

.footer__copyright {
    margin: 40px 0
}

@media screen and (min-width: 980px) {
    .footer__gotop {
        transition: .3s ease opacity
    }

    .footer__gotop:hover {
        color: #fac83c
    }

    .footer__gotop:active {
        color: #ff9b00
    }

    .footer__contact {
        display: inline-block;
        width: 315px
    }

    .footer__sns a {
        transition: .3s ease opacity
    }

    .footer__sns a:hover {
        color: #fac83c
    }

    .footer__sns a:active {
        color: #ff9b00
    }

    .footer__links a {
        transition: .3s ease opacity
    }

    .footer__links a:hover {
        color: #fac83c
    }

    .footer__links a:active {
        color: #ff9b00
    }
}
.header__full {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    background-color: #fff;
    transition: .3s ease all;
}
.header__full.header__full__transparent {
    position: absolute;
    background-color: transparent;
    z-index: 50;
}
.header__full.header__full__transparent a {
    color: #fff;
}
.header__full.header__full__transparent .navigation li>a.navigation__icon.navigation__border:before,
.header__full.header__full__transparent .navigation li>a.navigation__icon.navigation__border:after {
    background-color: #fff;
}
.header__full.slideup {
    top: -65px;
}
.header__full >.menu__open,
.header__full >.menu__default {
  display: none;
}
.header__full >.container {
  display: block;
}
.header__container {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.header__home {
    display: block;
    padding: 12px 0 9px
}

.header__home img {
    height: 30px;
    width: auto
}

@media screen and (min-width: 980px) {
    
}

.header__list,
.header__icon {
    display: none
}

.navigation {
    display: block;
    padding: 0;
}

.navigation ul {
    display: flex;
    align-items: center;
}

.navigation li {
    display: block;
    padding: 0;
}

.navigation li:last-child {
    border-radius: none
}

.navigation li.menu {
    display: none
}

.navigation li>a {
    display: block;
    padding: 0 15px 0;
    border: none;
    letter-spacing: .01em
}
.navigation li>a.navigation__icon {
    padding: 0 15px;
}
.navigation li:last-child>a.navigation__icon {
  padding-left: 0;
}
.navigation li>a.navigation__icon.navigation__border {
  position: relative;
}
.navigation li>a.navigation__icon.navigation__border:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: block;
  height: 20px;
  width: 1px;
  background-color: #C8C8C8;
  margin: auto;
}
.navigation li>a.navigation__icon.navigation__border:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 20px;
  width: 1px;
  background-color: #C8C8C8;
  margin: auto;
}
.navigation li span {
    display: block
}

.navigation li i {
    font-size: 12px;
    margin-left: 7px;
    vertical-align: middle
}

.header__products {
    display: none;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #fff;
    transition: .3s ease all
}

.header__products.on {
    display: block
}

.header__products .collection {
    display: block;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #5A5A5A;
    transition: .3s ease all
}

.header__products .collection__tag {
    float: right
}

.header__products .collection__tag i {
    margin-right: 3px
}

.header__products .product {
    display: block;
    padding: 5px 0;
    transition: .3s ease all
}

.header__products .product:hover dl {
    background-color: #f0f0f0
}

.header__products .product dl {
    display: flex;
    align-items: center
}

.header__products .product dl dt {
    width: 60px;
    height: 60px
}

.header__products .product dl dt img {
    width: 60px;
    height: 60px
}

.header__products .product dl dd {
    padding-left: 10px
}

.header__products .header__ir {
	display: block;
    padding: 5px 0 5px 5px;
    transition: .3s ease all;
}

.header__products .header__ir:hover {
	background-color: #f0f0f0;
}

.header__products .header__ir i {
	float: right;
    margin-top: 5px;
    margin-right: 5px;
}

.menu__irfolder {
    display: none;
}

.menu__irfolder a {
	border-top: 1px dashed #C8C8C8;
    display: block;
    padding: 17.5px 0;
    margin-left: 16px;
}

main {
    padding-top: 56px
}


@media screen and (max-width: 1036px) {
    .header__home img {
      height: 24px;
      width: auto;
    }
    .header__list {
        display: block
    }

    .header__icon {
      display: block;
      margin-right: 14px
    }
    .header__icon:nth-child(2) {
      margin-left: auto;
    }
    .header__icon:nth-child(3) {
      margin-right: 18px;
    }
    .header__list.header__icon {
      font-size: 20px;
      margin-right: 0;
      margin-top: -4px;
    }
    .navigation {
        display: none
    }

    main {
        padding-top: 74px
    }
    .header__full >.container {
      display: none;
    }
    .header__full >.menu__default {
      display: block;
    }
}

.nav__container {
    width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 5px;
  }
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav__side {
    display: flex;
    margin-left: auto;
  }
  .nav__side a {display: block;}
  .menu__categories >li {
    border-bottom: 1px solid #C8C8C8;
  }
  .menu__categories >li:last-child {
    border-bottom: 0;
  }
  .menu__category {
    display: block;
    padding: 15px 0;
  }
  .menu__type {
    display: block;
    padding: 15px 0;
  }
  .menu__type >p {
    margin-bottom: -4px;
  }
  .menu__link {
    border-bottom: 1px dashed #C8C8C8;
  }
  .menu__sub {
    margin-left: 16px;
  }
  .menu__accordion {
    position: fixed;
    overflow: scroll;
    width: 100vw;
    height: calc(100vh - 54px);
    top: -100vh;
    right: 0;
    z-index: 1;
    background-color: #fff;
    transition: .6s ease all;
  }
  .menu__accordion.on {
    top: 54px;
  }
  .menu__folder {
    display: none;
    padding-bottom: 10px;
    overflow: scroll;
  }
  .menu__folder ul {
    display: flex;
  }
  .menu__folder ul li {
    padding-right: 10px;
    text-align: center;
  }
  .menu__open {
    display: none;
  }
  .icon__right {
    position: relative;
  }
  .icon__right:after {
    content: '';
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 8px;
    height: 13px;
    display: block;
    background: url(https://asset.basefood.co.jp/images/navi/icon-right.png) no-repeat center center;
    background-size: contain;
  }
  .icon__plus {
    position: relative;
  }
  .icon__plus:after {
    content: '';
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    display: block;
    background: url(https://asset.basefood.co.jp/images/navi/icon-plus.png) no-repeat center center;
    background-size: contain;
  }
  .icon__plus.minus:after {
    content: '';
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 12px;
    height: 2px;
    display: block;
    background: url(https://asset.basefood.co.jp/images/navi/icon-minus.png) no-repeat center center;
    background-size: contain;
  }
  .cart__batch {
    position: absolute;
    right: 32px;
    top: 3px;
    display: block;
    background-color: #FF6478;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 10px;
    color: #fff;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
  }
  .nav__cart {
    position: relative;
  }
  .nav__cart .cart__batch {
    top: 0;
    right: 0;
  }

.lineup {
    margin-bottom: 40px
}

.lineup a {
    display: block;
    transition: 0.3s ease all
}

.lineup a:hover {
    opacity: 0.8
}

.lineup .col-m-4 {
    align-self: flex-end
}

.lineup .lineup__table div:first-child img {
    width: 80%;
    height: auto
}

.lineup .lineup__table div:last-child img {
    height: 80px;
    width: auto;
    margin-top: 20px
}

.lineup .lineup__table div:last-child img:first-child {
    margin-right: 20px
}

.lineup img {
    width: 100%;
    height: auto
}

.kv__lineup a {
    display: block
}

.kv__lineup a img {
    width: 100%
}

.kv__lineup a img.adjust {
    width: 116%;
    margin-left: -8%
}

.kv__lineup a.bread {
    width: 100%
}

.kv__lineup a.noodle {
    width: 80%;
    float: right
}

.kv__lineup .tag__products img {
    height: 80px;
    width: auto;
    margin-left: 20px
}

@media screen and (min-width: 1036px) {
    .lineup>.col-12 {
        align-self: flex-end
    }

    .lineup .lineup__table {
        -ms-box-orient: horizontal;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -moz-flex;
        display: -webkit-flex;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .lineup .lineup__table div {
        align-self: flex-end
    }

    .lineup .lineup__table div:first-child {
        width: 100%;
        order: 2;
        padding-left: 20px
    }

    .lineup .lineup__table div:first-child img {
        width: 100%;
        height: auto
    }

    .lineup .lineup__table div:last-child {
        order: 1;
        width: 105px;
        text-align: right
    }

    .lineup .lineup__table div:last-child img {
        width: 80%;
        height: auto
    }

    .lineup .lineup__table div:last-child img:first-child {
        margin-right: 0
    }

    .lineup img.clear__sp {
        display: inline
    }

    .kv__lineup {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -moz-flex;
        display: -webkit-flex;
        display: flex;
        align-items: flex-end
    }

    .kv__lineup .col-m-1 {
        order: 1;
        margin-left: 8.33333%
    }

    .kv__lineup .col-m-5.col-offset-m-1 {
        order: 2;
        margin-left: 0
    }

    .kv__lineup .col-m-4 {
        order: 3
    }

    .kv__lineup .col-m-5 {
        order: 4
    }

    .kv__lineup a.noodle {
        width: 100%;
        float: auto
    }

    .kv__lineup a img.adjust {
        width: 100%;
        margin-left: 0
    }

    .kv__lineup .tag__products img {
        width: 100%;
        height: auto;
        margin-left: 0;
        margin-top: 20px
    }
}

.corporate__head {
    font-size: 8.5333vw;
    font-weight: bold
}

.corporate__img {
    width: 100vw;
    height: auto;
    margin-left: -28px;
    margin-bottom: -10.667vw
}

.corporate__sample {
    width: 100%;
    height: auto
}

@media screen and (min-width: 1036px) {
    .corporate__head {
        font-size: 4rem
    }

    .corporate__img {
        width: 100%;
        height: auto;
        margin-left: 0;
        margin-bottom: -4rem
    }
}

.corporate__content {
    border-top: 1px solid #C8C8C8;
    display: table;
    width: 100%
}

.corporate__content:last-child {
    border-bottom: 1px solid #C8C8C8
}

.corporate__content dt,
.corporate__content dd {
    display: table-cell;
    vertical-align: top;
    padding: 15px
}

.corporate__content dt {
    width: 7em;
    background-color: #F0F0F0
}

.corporate__content dd {
    width: calc(100% - 7em);
    background-color: #FFF
}

.corporate__content dd a:hover {
    color: #FAC83C
}

.corporate__content dd a:active {
    color: #FF9B00
}

body {
    position: relative;
    overflow-x: hidden;
    background-color: #f0f0f0
}
body.page {
    background-color: #fff
}

body,
button {
    color: #5A5A5A
}

h2 {
    margin-bottom: 20px
}

.header+article {
    padding-top: 20px
}

.section {
    padding-top: 20px;
    padding-bottom: 20px
}

.section.bg {
    padding-top: 40px;
    padding-bottom: 40px
}

.text__lightgray {
    color: #C8C8C8
}

.text__red {
    color: #FF6478
}

.text__yellow {
    color: #FAC83C
}

.markpen {
    background: linear-gradient(transparent 60%, #FFF078 60%, #FFF078 90%, transparent 90%)
}

.radio input {
    height: 24px;
    width: 24px
}

.radio__input {
    display: none
}

.radio__input+label {
    padding-left: 35px;
    position: relative;
    margin-right: 20px
}

.radio__input+label::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 25px;
    height: 25px;
    border: 1px solid #C8C8C8;
    border-radius: 50%
}

.radio__input:checked+label::before {
    border: 0;
    background-color: #FAC83C
}

.radio__input:checked+label::after {
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    left: 9px;
    width: 7px;
    height: 11px;
    transform: rotate(40deg);
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff
}

.checkbox__input {
    display: none
}

.checkbox__input+label {
    padding-left: 35px;
    position: relative;
    margin-right: 20px
}

.checkbox__input+label::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 25px;
    height: 25px;
    border: 1px solid #C8C8C8;
    border-radius: 4px
}

.checkbox__input:checked+label::before {
    border: 0;
    background-color: #FAC83C
}

.checkbox__input:checked+label::after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 9px;
    width: 7px;
    height: 11px;
    transform: rotate(40deg);
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff
}

.gray__table {
    border: 1px solid #C8C8C8;
    border-radius: 4px
}

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

.table dt,
.table dd {
    display: table-cell;
    vertical-align: text-top;
    padding-top: 14px;
    padding-bottom: 14px
}

.table dt {
    width: 70px;
    padding-left: 20px
}

.table dd {
    padding-left: 20px;
    padding-right: 20px;
    width: calc(100% - 70px)
}

.table dd.input {
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle
}

.table.multi {
    border-bottom: 1px solid #C8C8C8
}

.table.wide dt {
    width: 120px
}

.table.wide dd {
    width: calc(100% - 120px)
}

.table.input dt,
.table.input dd {
    vertical-align: middle
}

.table.input dt {
    width: 80%;
    padding: 0 0 0 10px
}

.table.input dd {
    width: 20%
}

.table.pd__clear dd,
.table.pd__clear dt {
    padding-left: 0
}

.table input {
    width: 100%;
    line-height: 40px;
    background-color: transparent;
    border: none;
    padding-left: 10px
}

.border__bottom {
    border-bottom: 1px solid #C8C8C8
}

.border__top {
    border-top: 1px solid #C8C8C8
}

.selectdiv,
.selectdiv__inline {
    position: relative
}

.selectdiv__inline {
    display: inline-block;
    vertical-align: middle;
    min-width: 90px
}

select::-ms-expand {
    display: none
}

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

.pick__datetime .selectdiv {
    display: table-cell;
    vertical-align: top
}

.pick__datetime .selectdiv:first-child {
    width: 50%;
    max-width: 320px
}

.pick__datetime .selectdiv:last-child {
    padding-left: 10px;
    width: 50%;
    max-width: 320px
}

.selectdiv:after,
.selectdiv.selectdiv__inline:after {
    content: '';
    width: 10px;
    height: 10px;
    display: block;
    border-right: 1px solid #5A5A5A;
    border-bottom: 1px solid #5A5A5A;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    right: 15px;
    top: 18px;
    position: absolute;
    pointer-events: none
}

.selectdiv select,
.selectdiv.selectdiv__inline select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 44px;
    margin: 5px 0px;
    padding: 0px 15px 0 10px;
    font-size: 16px;
    line-height: 44px;
    color: #333;
    background-color: #fff;
    background-image: none;
    border: 1px solid #C8C8C8;
    -ms-word-break: normal;
    word-break: normal
}

dl.table__dl {
    display: table;
    width: 100%
}

dl.table__dl dt,
dl.table__dl dd {
    display: table-cell;
    vertical-align: top
}

dl.table__dl.middle dt,
dl.table__dl.middle dd {
    vertical-align: middle
}

dl.toggle__dl>dt {
    padding: 14px 20px
}

dl.toggle__dl>dt>p img {
    margin-left: 35px
}

dl.toggle__dl>dd {
    display: none;
    background-color: #F0F0F0
}

ul.pay__list {
    padding: 10px 0
}

ul.pay__list li {
    padding: 8px 20px
}

dl.goods__table>dt {
    width: 90px
}

dl.goods__table>dt>img {
    width: 100%;
    max-width: 80px
}

a.print__btn {
    color: #FAC83C
}

video.video {
    width: 100%
}

input.coupon {
    border: 1px solid #C8C8C8;
    line-height: 44px;
    border-radius: 4px;
    padding: 0 10px
}

.toggle__cart,
.toggle__cart p.text__red.text__s,
.confirm__clear,
.breadcrumb {
    display: none
}

button.btn.inline.mini.toggle__btn {
    display: none
}

button.btn.inline.mini.toggle__btn.show {
    display: inline-block
}

.schedule dt {
    display: none;
    width: 100%
}

.schedule dt div {
    padding: 10px 8px;
    display: table-cell;
    vertical-align: middle;
    border-bottom: 1px solid #C8C8C8
}

.schedule dt div:first-child {
    padding-left: 10px;
    padding-right: 0
}

.schedule dt div.skip p {
    color: #C8C8C8;
    text-decoration: line-through
}

.schedule dt:first-child {
    display: table
}

.schedule dd {
    cursor: pointer;
    padding: 10px 0;
    background-color: #F0F0F0
}

.schedule dd i {
    margin-left: 7px
}

.credit dt,
.credit dd {
    padding: 14px 20px
}

.credit>dd {
    border-top: 1px solid #C8C8C8
}

.credit>dd:last-child {
    display: none;
    padding: 0;
    background-color: #F0F0F0
}

.credit__btn__submit.btn.inline.square.text__s.credit__btn__submit {
    display: inline-block;
    display: none
}

.order__histories .order__history.pd__top__m:first-child {
    padding-top: 0 !important
}

.order__history {
    border-bottom: 1px solid #C8C8C8
}

.order__detail dl {
    display: table;
    width: 100%
}

.order__detail dl dt,
.order__detail dl dd {
    display: table-cell;
    vertical-align: top;
    padding: 5px 0
}

.col__clear__pd {
    padding-left: 0;
    padding-right: 0
}

.error {
    background-color: #F0F0F0;
    border-radius: 4px;
    padding: 10px 20px
}

.order__histories__pc,
.order__detail__pc {
    display: none
}

.disable {
    opacity: .6;
    background-color: #F0F0F0 !important;
    cursor: not-allowed
}

@media screen and (min-width: 1036px) {
    main.reverse {
        -webkit-box-direction: row-reverse;
        -moz-box-direction: row-reverse;
        -webkit-flex-direction: row-reverse;
        -moz-flex-direction: row-reverse;
        flex-direction: row-reverse;
        display: flex
    }

    .confirm__clear,
    .toggle__cart,
    .breadcrumb {
        display: block
    }

    .breadcrumb li {
        display: inline-block;
        vertical-align: top
    }

    .breadcrumb i {
        margin: 0 5px
    }

    .toggle__cart p.text__red.text__s {
        display: inline-block
    }

    .confirm__showup,
    .toggle__controller,
    .toggle__controller p.text__red.text__s {
        display: none
    }

    .order__histories,
    .order__detail {
        display: none
    }

    .order__histories__pc,
    .order__detail__pc {
        display: block
    }

    .order__histories__pc table,
    .order__detail__pc table {
        width: 100%
    }

    .order__histories__pc table thead,
    .order__detail__pc table thead {
        border-bottom: 1px solid #C8C8C8
    }

    .order__histories__pc table thead th,
    .order__detail__pc table thead th {
        padding: 15px 0
    }

    .order__histories__pc table thead th:first-child,
    .order__detail__pc table thead th:first-child {
        padding-left: 31px
    }

    .order__histories__pc table tbody td,
    .order__detail__pc table tbody td {
        padding: 10px;
        vertical-align: middle
    }

    .order__histories__pc table tbody td>*,
    .order__detail__pc table tbody td>* {
        vertical-align: middle
    }

    .order__histories__pc table tbody td>*:first-child,
    .order__detail__pc table tbody td>*:first-child {
        margin-right: 20px
    }

    .order__histories__pc table tbody.goods tr,
    .order__detail__pc table tbody.goods tr {
        border-bottom: 1px solid #C8C8C8
    }

    .order__histories__pc table tbody.goods tr td,
    .order__detail__pc table tbody.goods tr td {
        padding-top: 15px;
        padding-bottom: 15px
    }

    .cart__block {
        background-color: #FAFAFA;
        padding: 20px 40px 40px;
        margin-top: 10px;
        border-radius: 4px
    }
}

section.news dl,
div.news dl {
    border-bottom: 1px solid #C8C8C8;
    padding: 20px 0
}

section.news dl dt,
section.news dl dd,
div.news dl dt,
div.news dl dd {
    display: block
}

section.news dl dt,
div.news dl dt {
    line-height: 2
}

section.news dl dt span,
div.news dl dt span {
    vertical-align: bottom;
    margin-right: 5px
}

section.news dl dd a,
div.news dl dd a {
    display: block
}

@media screen and (min-width: 980px) {

    section.news dl,
    div.news dl {
        display: table;
        width: 100%
    }

    section.news dl dt,
    section.news dl dd,
    div.news dl dt,
    div.news dl dd {
        display: table-cell;
        vertical-align: middle;
        padding: 0 5px
    }

    section.news dl dt,
    div.news dl dt {
        width: 25%
    }

    section.news dl dt span:first-child,
    div.news dl dt span:first-child {
        width: 90px;
        display: inline-block
    }

    section.news dl dd,
    div.news dl dd {
        width: 75%
    }

    section.news dl dd a,
    div.news dl dd a {
        transition: .3s ease all
    }

    section.news dl dd a:hover,
    div.news dl dd a:hover {
        color: #FAC83C
    }

    section.news dl dd a:active,
    div.news dl dd a:active {
        color: #FF9B00
    }
}

section.cta__lineup .lineup {
    display: none
}

section.coures img {
    width: 100%;
    height: auto
}

@media screen and (min-width: 980px) {
    section.cta__lineup .lineup {
        display: flex
    }
}

section.media .field__logos {
    margin-top: 40px;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center
}

section.media img {
    display: inline-block;
    vertical-align: middle;
    max-width: 120px;
    max-height: 80px;
    margin: 10px
}

section.books .col-6:first-child {
    flex: 0 0 40%;
    -webkit-flex: 0 0 40%;
    -ms-flex: 0 0 40%;
    max-width: 40%
}

section.books .col-6:last-child {
    flex: 0 0 60%;
    -webkit-flex: 0 0 60%;
    -ms-flex: 0 0 60%;
    max-width: 60%
}

section.books img {
    width: 100%;
    height: auto;
    border: 1px solid #5A5A5A
}

@media screen and (min-width: 1036px) {
    section.books .col-6:first-child.col-m-2 {
        flex: 0 0 16.666667%;
        -webkit-flex: 0 0 16.666667%;
        -ms-flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    section.books .col-6:last-child.col-m-6 {
        flex: 0 0 50%;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        max-width: 50%
    }
}

section {
    padding: 80px 0;
    margin-top: -4px
}

section.heading a.btn.inline.mini.gray.angle__right {
    color: #5A5A5A
}

section.heading .address span {
    display: block
}

section.heading .event__only__pc {
    display: none
}

section.heading .text__yl {
    color: #fac83c
}

section.concept {
    background-color: #fff
}

section.concept .venn {
    width: 100%
}

section.concept .text__red {
    color: #FF6478
}

section.concept .copy__final {
    letter-spacing: .1em
}

section.concept .copy__final span.wsnr {
    white-space: initial
}

section.note__nutrition {
    padding: 40px 0
}

body.front {
    position: relative
}

body.front:after {
    content: '';
    display: block;
    width: 100vw;
    height: 100vh;
    background: url(https://asset.basefood.co.jp/images/bg/bg_MZ7_3780_sp.jpg) no-repeat center center;
    background-size: cover;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: -2
}

.copy {
    color: #fff
}

.header__bars.wh {
    color: #fff
}

.lineup {
    margin-bottom: 40px
}

.lineup a {
    display: block;
    transition: .3s ease all
}

.lineup a:hover {
    opacity: .8
}

.lineup .col-m-4 {
    align-self: flex-end
}

.lineup .lineup__table div:first-child img {
    width: 80%;
    height: auto
}

.lineup .lineup__table div:last-child img {
    height: 80px;
    width: auto;
    margin-top: 20px
}

.lineup .lineup__table div:last-child img:first-child {
    margin-right: 20px
}

.lineup img {
    width: 100%;
    height: auto
}

.kv__lineup a {
    display: block
}

.kv__lineup a img {
    width: 100%
}

.kv__lineup a.bread {
    width: 100%
}

.kv__lineup a.noodle {
    width: 80%;
    float: right
}

.kv__lineup .tag__products img {
    height: 80px;
    width: auto;
    margin-left: 20px
}

.goods img {
    width: 100%;
    height: auto
}

.slideshow {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden
}

.slideshow__image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 15s ease-in-out infinite both;
    -moz-animation: imageAnimation 15s ease-in-out infinite both;
    -o-animation: imageAnimation 15s ease-in-out infinite both;
    -ms-animation: imageAnimation 15s ease-in-out infinite both;
    animation: imageAnimation 15s ease-in-out infinite both
}

.slideshow li:first-child .slideshow__image {
    background-image: url(https://asset.basefood.co.jp/images/bg/bg_MZ7_3780_sp.jpg)
}

.slideshow li:nth-child(2) .slideshow__image {
    background-image: url(https://asset.basefood.co.jp/images/bg/bg_MZ7_3732_sp.jpg);
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    -o-animation-delay: 5s;
    -ms-animation-delay: 5s;
    animation-delay: 5s
}

.slideshow li:nth-child(3) .slideshow__image {
    background-image: url(https://asset.basefood.co.jp/images/bg/bg_MZ7_3419_sp.jpg);
    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    -o-animation-delay: 10s;
    -ms-animation-delay: 10s;
    animation-delay: 10s
}

@-webkit-keyframes imageAnimation {
    0% {
        transform: scale(1)
    }

    33% {
        opacity: 1
    }

    66% {
        opacity: 0
    }

    100% {
        transform: scale(1.1)
    }
}

@-moz-keyframes imageAnimation {
    0% {
        transform: scale(1)
    }

    33% {
        opacity: 1
    }

    66% {
        opacity: 0
    }

    100% {
        transform: scale(1.1)
    }
}

@-o-keyframes imageAnimation {
    0% {
        transform: scale(1)
    }

    33% {
        opacity: 1
    }

    66% {
        opacity: 0
    }

    100% {
        transform: scale(1.1)
    }
}

@-ms-keyframes imageAnimation {
    0% {
        transform: scale(1)
    }

    33% {
        opacity: 1
    }

    66% {
        opacity: 0
    }

    100% {
        transform: scale(1.1)
    }
}

@keyframes imageAnimation {
    0% {
        transform: scale(1)
    }

    33% {
        opacity: 1
    }

    66% {
        opacity: 0
    }

    100% {
        transform: scale(1.1)
    }
}

.illustration .col-m-5 {
    position: relative
}

.illustration .col-m-5:after {
    content: '';
    display: block;
    background-color: #5A5A5A;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    margin: 40px auto 0
}

.illustration .col-m-5:last-child:after {
    display: none
}

.phone span.line {
    vertical-align: middle;
    margin: 0 10px
}

.phone span.line.tag.btn__s.round {
    line-height: 2;
    margin-right: 0
}

@media screen and (min-width: 1036px) {
    body.front:after {
        background: url(https://asset.basefood.co.jp/images/bg/bg_MZ7_3780.jpg) no-repeat center center;
        background-size: cover
    }

    .slideshow li:first-child .slideshow__image {
        background-image: url(https://asset.basefood.co.jp/images/bg/bg_MZ7_3780.jpg)
    }

    .slideshow li:nth-child(2) .slideshow__image {
        background-image: url(https://asset.basefood.co.jp/images/bg/bg_MZ7_3732.jpg)
    }

    .slideshow li:nth-child(3) .slideshow__image {
        background-image: url(https://asset.basefood.co.jp/images/bg/bg_MZ7_3419.jpg)
    }

    section.heading {
        padding-top: 10vh;
        min-height: calc(100vh - 70px)
    }

    section.heading .address dl {
        display: table;
        width: 100%
    }

    section.heading .address dl dt,
    section.heading .address dl dd {
        display: table-cell;
        vertical-align: top
    }

    section.heading .address dl dt {
        width: 5em
    }

    section.heading .address dl dd {
        width: calc(100% - 5em)
    }

    section.heading .wide dl dt,
    section.heading .wide dl dd {
        display: inline-block;
        vertical-align: top
    }

    section.heading .event__only__pc {
        display: flex
    }

    section.heading .event__only__pc img {
        width: 100%
    }

    section.hp__copy .copy__final span.wsnr {
        white-space: nowrap
    }

    .navigation {
        background-color: transparent
    }

    .navigation.wh li a {
        color: #fff;
        border-color: #fff
    }

    .navigation.wh li a.text__red {
        color: #FF6478
    }

    .navigation.wh li a.text__yellow {
        color: #FAC83C
    }

    .lineup>.col-12 {
        align-self: flex-end
    }

    .lineup .lineup__table {
        -ms-box-orient: horizontal;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -moz-flex;
        display: -webkit-flex;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .lineup .lineup__table div {
        align-self: flex-end
    }

    .lineup .lineup__table div:first-child {
        width: 100%;
        order: 2;
        padding-left: 20px
    }

    .lineup .lineup__table div:first-child img {
        width: 100%;
        height: auto
    }

    .lineup .lineup__table div:last-child {
        order: 1;
        width: 105px;
        text-align: right
    }

    .lineup .lineup__table div:last-child img {
        width: 80%;
        height: auto
    }

    .lineup .lineup__table div:last-child img:first-child {
        margin-right: 0
    }

    .lineup img.clear__sp {
        display: inline
    }

    .kv__lineup {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -moz-flex;
        display: -webkit-flex;
        display: flex;
        align-items: flex-end
    }

    .kv__lineup .col-m-1 {
        order: 1;
        margin-left: 8.333333%
    }

    .kv__lineup .col-m-5.col-offset-m-1 {
        order: 2;
        margin-left: 0
    }

    .kv__lineup .col-m-4 {
        order: 3
    }

    .kv__lineup a.noodle {
        width: 100%;
        float: auto
    }

    .kv__lineup .tag__products img {
        width: 100%;
        height: auto;
        margin-left: 0;
        margin-top: 20px
    }

    .illustration .col-m-5:nth-child(4):after,
    .illustration .col-m-5:last-child:after {
        display: none
    }
}

.policy__list li {
    padding-left: 1em;
    text-indent: -1em
}

@media screen and (min-width: 1036px) {
    .policy__contact {
        margin-left: 20px
    }
}

.law__content {
    border-top: 1px solid #C8C8C8
}

.law__content:last-child {
    border-bottom: 1px solid #C8C8C8
}

.law__content dt {
    padding: 20px 5px 0;
    background-color: #F0F0F0
}

.law__content dd {
    padding: 10px 5px 25px
}

.law__content dd a:hover {
    color: #FAC83C
}

.law__content dd a:active {
    color: #FF9B00
}

.law__content dd hr {
    border-color: #C8C8C8;
    border-style: dashed;
    border-width: .5px
}

.law__content dd ul li {
    position: relative;
    padding-left: 1em;
    text-indent: -1em
}

.law__content dd ul li:before {
    content: '・'
}

@media screen and (min-width: 980px) {
    .law__content {
        display: table;
        width: 100%
    }

    .law__content dt,
    .law__content dd {
        display: table-cell;
        vertical-align: top;
        padding: 15px 20px
    }

    .law__content dt {
        width: 33.33%
    }

    .law__content dd {
        width: calc(100% - 33.33%)
    }
}

.news__single__ttl {
    border-bottom: 1px solid #C8C8C8
}

.news__single p {
    margin-bottom: 1em
}

.news__single h3,
.news__single h4 {
    font-weight: bold;
    margin-bottom: 1em
}

.news__single img {
    margin-bottom: 1em;
    width: 100%;
    height: auto
}

.news__single a {
    display: inline-block;
    color: #FAC83C
}

.news__single a:hover {
    color: #FF9B00
}

/* .news__single iframe {
    width: 100%
} */

.news__list {
    display: none
}

a.single__back {
    color: #FAC83C
}

a.single__back:hover {
    color: #FF9B00
}

a.single__back i {
    margin-right: 5px
}

@media screen and (min-width: 1036px) {
    .news__list {
        display: block
    }

    .news__list dl {
        padding: 20px 0;
        border-bottom: 1px solid #C8C8C8
    }

    .news__list dl dd a:hover {
        color: #FAC83C
    }

    .news__list dl dd a:active {
        color: #FF9B00
    }
}

.goods__fix {
    background-color: #FAC83C;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    padding: 0;
    z-index: 99
}

.goods__fix .show {
    background-color: #FAC83C;
    padding: 11px 0
}

.goods__fix .detail {
    background-color: #fff;
    display: none
}

.vertical__bottom {
    vertical-align: bottom
}

.show #show-detail {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto
}

.show #show-detail:hover {
    background-color: #f0f0f0
}

.detail .row {
    align-items: baseline
}

.detail .selectdiv:after {
    display: block;
    right: 14px;
    top: 10px;
    position: absolute;
    pointer-events: none;
    font-size: 19px;
    font-family: "Font Awesome 5 Free";
    content: '\f107';
    font-weight: 900;
    border: none;
    transform: none
}

.detail .selectdiv select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 44px;
    margin: 5px 0px;
    padding: 0px 15px 0 10px;
    font-size: 16px;
    line-height: 44px;
    color: #333;
    background-color: #fff;
    background-image: none;
    border: 1px solid #C8C8C8;
    -ms-word-break: normal;
    word-break: normal
}

.detail .radio__input {
    display: none
}

.detail .radio__input+label {
    padding-left: 45px;
    padding-right: 10px;
    position: relative;
    display: block;
    margin-right: 0
}

.detail .radio__input+label::before {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 25px;
    height: 25px;
    border: 1px solid #C8C8C8;
    border-radius: 50%;
    bottom: initial;
    margin: initial
}

.detail .radio__input.recommend+label {
    border: 1px solid #C8C8C8;
    border-radius: 4px
}

.detail .radio__input.recommend:checked+label {
    background-color: #F0F0F0
}

.detail .radio__input:checked+label::before {
    border: 0;
    background-color: #FAC83C
}

.detail .radio__input:checked+label::after {
    content: "";
    display: block;
    position: absolute;
    left: 19px;
    top: 16px;
    bottom: initial;
    margin: initial;
    width: 7px;
    height: 11px;
    transform: rotate(40deg);
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff
}

.shop__detailbox {
    text-align: center
}

.shop__detailbox span {
    font-size: 2em
}

.shop__detailbox.gray div {
    border-color: #5A5A5A
}

.shop__detailbox.yellow div {
    border-color: #FAC83C
}

.shop__detailbox__left,
.shop__detailbox__right {
    display: inline-block;
    line-height: 1.7;
    padding: 15px;
    border-width: 4px;
    border-radius: 12px;
    border-style: solid
}

.shop__detailbox__left p:first-child,
.shop__detailbox__right p:first-child {
    line-height: 1.5
}

.shop__detailbox__left p:last-child,
.shop__detailbox__right p:last-child {
    letter-spacing: .04em;
    line-height: 1
}

.shop__detailbox__left {
    margin-right: 15px
}

.full__images {
    width: 100%
}

.top__navi {
    background-color: #F0F0F0
}

.top__navi__link {
    display: block;
    transition: .3s ease all
}

.top__navi__link img {
    width: 20px;
    height: auto;
    vertical-align: baseline;
    margin-right: 5px
}

.top__navi__link:hover {
    opacity: .8
}

.ingredients {
    background: url(https://asset.basefood.co.jp/images/bg/bg_ingredients_sp.jpg) no-repeat bottom center;
    background-size: cover;
    padding-bottom: 60vw;
    position: relative
}

.ingredients .lineup {
    display: none
}

.ingredients .ghost__btn {
    position: absolute;
    top: 80px;
    width: 45vw;
    height: 40vw;
    display: block
}

.ingredients .ghost__btn.left {
    left: 0
}

.ingredients .ghost__btn.right {
    right: 0;
    z-index: 10
}

.ingredients:before {
    content: '';
    display: block;
    height: 40vw;
    width: 56vw;
    background: url(https://asset.basefood.co.jp/images/pkg/pkg_bn_regular_v5_0_omote.png) no-repeat top right;
    background-size: contain;
    margin-left: -11vw;
    margin-bottom: 40px
}

.ingredients:after {
    content: '';
    position: absolute;
    top: 80px;
    right: -26vw;
    display: block;
    height: 40vw;
    width: 70vw;
    background: url(https://asset.basefood.co.jp/images/pkg/pkg_bb_rb_plain_omote.png) no-repeat top left;
    background-size: contain
}

.about__bread {
    background: url(https://asset.basefood.co.jp/images/bg/bg_mcy_2765_sp.jpg) no-repeat center center;
    background-size: cover;
    height: 100vh
}

.about__bread .bread__btn {
    display: inline-block;
    transition: .3s ease all
}

.about__bread .bread__btn:hover {
    opacity: .8
}

.about__bread .bread__img {
    width: 100%
}

.about__noodle {
    background: url(https://asset.basefood.co.jp/images/bg/bg_mcy_7510_sp.jpg) no-repeat center center;
    background-size: cover;
    height: 100vh
}

.about__noodle .noodle__btn {
    display: inline-block;
    transition: .3s ease all
}

.about__noodle .noodle__btn:hover {
    opacity: .8
}

.about__noodle .noodle__img {
    width: 100%
}

.collections {
    padding: 40px 0
}

.collections table {
    width: 100%
}

.collections table img {
    width: 100%;
    height: auto
}

.collections table td {
    vertical-align: middle
}

.collections table tr:first-child a {
    display: block;
    transition: .3s ease all
}

.collections table tr:first-child a:hover {
    opacity: .8
}

.collections .col-12.col-m-4 {
    margin: 40px 0
}

@media screen and (min-width: 1036px) {
    .ingredients {
        background: url(https://asset.basefood.co.jp/images/bg/bg_ingredients_pc.jpg) no-repeat center center;
        background-size: cover;
        background-attachment: fixed;
        padding-bottom: 80px
    }

    .ingredients .lineup {
        display: flex
    }

    .ingredients:before,
    .ingredients:after {
        display: none
    }

    .ingredients .ghost__btn {
        display: none
    }

    .about__bread {
        background: url(https://asset.basefood.co.jp/images/bg/bg_mcy_2765_pc.jpg) no-repeat center center;
        background-size: cover;
        background-attachment: fixed
    }

    .about__noodle {
        background: url(https://asset.basefood.co.jp/images/bg/bg_mcy_7510_pc.jpg) no-repeat center center;
        background-size: cover;
        background-attachment: fixed
    }
}

.weekicon.icon_bread {
    height: 35px;
    background: url(../shopify/images/icon_bread_yl.png) no-repeat center bottom;
    background-size: 60px
}

.weekicon.icon_noodle {
    height: 60px;
    background: url(../shopify/images/icon_noodle_yl.png) no-repeat center bottom;
    background-size: 60px
}

.scene__evening {
    background: url(https://asset.basefood.co.jp/images/bg/bg_scene_evening_sp.jpg) no-repeat center center;
    background-size: cover;
    min-height: 100vh
}

.subscription {
    background: url(https://asset.basefood.co.jp/images/bg/bg_subscription_sp.jpg) no-repeat center bottom;
    background-size: cover;
    padding-bottom: 90vw
}

.coures__point i {
    font-size: 36px;
    margin-right: 10px;
    vertical-align: bottom
}

@media screen and (min-width: 1036px) {
    .scene__evening {
        background: url(https://asset.basefood.co.jp/images/bg/bg_scene_evening_pc.jpg) no-repeat center center;
        background-size: cover;
        background-attachment: fixed
    }

    .subscription {
        background: url(https://asset.basefood.co.jp/images/bg/bg_subscription_pc.jpg) no-repeat center center;
        background-size: cover;
        padding-bottom: 80px;
        background-attachment: fixed;
        min-height: calc(100vh - 58px - 70px)
    }
}

.lang-toggle {
  display: inline-flex;
  border: 1.5px solid #ddd;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  margin-left: 16px;
}
.lang-btn {
  display: inline-block;
  padding: 6px 20px;
  font-size: 1rem;
  font-weight: bold;
  color: #222;
  background: #fff;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.lang-btn.active {
  background: #FAC83C;
  color: #5A5A5A;
}

.header__right {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.header__right .navigation {
  margin-right: 24px;
}

.divider {
  width: 1px;
  height: 20px;
  background-color: #ddd;
  margin: 0 16px;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}

.lang-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: #5A5A5A;
  text-decoration: none;
  font-size: 12px;
  font-weight: normal;
  transition: all 0.2s ease;
}

.lang-switch-btn:hover {
  opacity: 0.7;
}