@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap&subset=japanese');

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
dl,
dt,
dd,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    margin: 0;
    padding: 0
}

ul {
    list-style-type: none
}

input,
select {
    vertical-align: middle
}

img {
    border-style: none
}

a {
    color: #424242;
    text-decoration: none
}

input,
button,
a {
    outline: 0
}

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

pre,
.pre {
    font-family: noto sans jp, helvetica neue, Helvetica, Arial, Roboto, droid sans, メイリオ, Meiryo, ＭＳ Ｐゴシック, ヒラギノ角ゴ pro w3, hiragino kaku gothic pron, sans-serif;
    white-space: pre;
    white-space: pre-wrap;
    white-space: pre-line;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -hp-pre-wrap;
    word-wrap: break-word
}

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

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

label {
    margin-left: .3rem
}

html {
    font-size: 14px
}

@media screen and (min-width:480px) and (max-width:960px) {
    html {
        font-size: 13px
    }
}

@media screen and (min-width:0px) and (max-width:479px) {
    html {
        font-size: 12px
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 1rem
}

body {
    color: #333;
    line-height: 1.8;
    letter-spacing: 0;
    font-family: noto sans jp, helvetica neue, Helvetica, Arial, Roboto, droid sans, メイリオ, Meiryo, ＭＳ Ｐゴシック, ヒラギノ角ゴ pro w3, hiragino kaku gothic pron, sans-serif;
    background-color: #fff
}

#headerbox {
    clear: both;
    margin: 0 auto;
    width: 100%;
    background-color: #fff
}

#wrapper {
    margin: 0 auto;
    min-width: 320px
}

#content {
    float: left;
    width: 100%
}

#mainbox {
    clear: both;
    margin: 0 auto;
    min-height: 300px;
    background-color: #fff
}

#leftbox {
    min-height: 300px;
    background-color: #fff
}

#rightbox {
    min-height: 300px;
    background-color: #fff
}

#footerbox {
    clear: both;
    margin: 0 auto;
    width: 100%
}

div,
dl,
dt,
dd,
header,
footer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
}

div:before,
div:after,
header:before,
header:after,
footer:before,
footer:after {
    content: "";
    display: table
}

div:after,
header:after,
footer:after {
    clear: both
}

.cf:before,
.cf:after {
    content: "";
    display: table
}

.cf:after {
    clear: both
}

.err {
    clear: both;
    margin-top: .5rem;
    color: red;
    font-size: .9rem
}

.required {
    font-size: .8rem;
    font-weight: 400;
    color: #ef3030
}

.caution {
    color: red
}

#builder_cmd {
    background-color: #aaa;
    padding-bottom: .5em
}

#builder_cmd p.builder_page_name {
    clear: both;
    padding-top: .5em;
    padding-bottom: .5em;
    width: 100%;
    color: #fff;
    font-weight: 700;
    text-align: center
}

#builder_cmd p.builder_view_mode {
    float: left;
    margin-left: .5em;
    padding-top: .3em;
    padding-bottom: .3em;
    width: 5em;
    color: red;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    background-color: #fff
}

#builder_cmd [class^=builder_cmd_] {
    float: right;
    margin-right: .5em;
    padding-top: .3em;
    padding-bottom: .3em;
    width: 5em;
    color: #fff;
    text-align: center;
    vertical-align: middle
}

#builder_cmd .builder_cmd_0 {
    background-color: #00f
}

#builder_cmd .builder_cmd_1 {
    background-color: red
}

p.builder_column_title {
    color: #fff;
    text-align: center;
    border: 1px dashed #fff;
    background-color: #aaa
}

[id^=builder_child_cmd] {
    clear: both;
    text-align: center;
    background-color: #aaa
}

[id^=builder_child_cmd]>div {
    clear: both;
    padding-top: .2em;
    padding-bottom: .2em;
    width: 100%;
    background-color: #ccc
}

[id^=builder_child_cmd] a {
    display: inline-block;
    color: #fff;
    padding-top: .5em;
    padding-bottom: .5em;
    font-size: .8em;
    text-align: center;
    background-color: #888
}

[id^=builder_child_cmd] ul {
    list-style: none
}

[id^=builder_child_cmd] li {}

[id^=builder_child_cmd] li:first-child {
    float: left;
    width: 50%
}

[id^=builder_child_cmd] li:not(:first-child) {
    float: right;
    width: 50%;
    background-color: #ccc
}

[id^=builder_child_cmd] a[class^=builder_child_cmd_] {
    border: 1px solid #777
}

[id^=builder_child_cmd] a.builder_child_cmd_new,
[id^=builder_child_cmd] a.builder_child_cmd_sel {
    float: left;
    width: 3em
}

[id^=builder_child_cmd] a.builder_child_cmd_up,
[id^=builder_child_cmd] a.builder_child_cmd_down {
    float: right;
    width: 1.5em
}

[id^=builder_child_cmd] a.builder_child_cmd_edit {
    float: right;
    width: 3em
}

[id^=builder_child_cmd] a.builder_child_cmd_del {
    float: left;
    background-color: red;
    width: 3em
}

.BLK_ERR {
    margin: 0 auto;
    padding: 3em 3em 5em;
    width: 960px
}

.BLK_ERR h1 {
    font-size: 1.5rem;
    font-weight: 700
}

.BLK_ERR p {
    font-size: 1.2rem;
    font-weight: 700
}

.message {
    margin: 0 auto;
    max-width: 960px
}

#section_list {
    margin: 0 auto;
    width: 98%
}

#section_list .section {
    padding: .5rem 0
}

#section_list .a_ttl0 {
    clear: both;
    padding: .5rem 1rem;
    display: block;
    width: auto;
    color: #fff;
    font-weight: 700;
    font-size: 1.5rem;
    background-color: #ec0714;
    word-wrap: break-word;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px
}

#section_list .a_ttl1 {
    clear: both;
    padding: .4rem 1rem;
    display: block;
    width: auto;
    color: #333;
    font-weight: 700;
    font-size: 1.3rem;
    border-left: 4px solid #ec0714;
    border-bottom: 4px solid #ec0714;
    word-wrap: break-word
}

#section_list .a_ttl2 {
    clear: both;
    padding: .5rem 1.5rem;
    display: block;
    width: auto;
    color: #333;
    font-size: 1.3rem;
    background-color: #fff0f5;
    word-wrap: break-word
}

#section_list .a_ttl3 {
    clear: both;
    padding: .5rem 1.5rem;
    display: block;
    width: auto;
    color: #333;
    font-size: 1.3rem;
    background-color: #f0f0f0;
    border-bottom: 1px solid #333;
    word-wrap: break-word
}

@media screen and (min-width:480px) and (max-width:960px) {
    #section_list {
        width: 97%
    }

    #section_list .a_ttl0 {
        font-size: 1.4rem
    }

    #section_list .a_ttl1 {
        font-size: 1.2rem
    }

    #section_list .a_ttl2 {
        font-size: 1.2rem
    }

    #section_list .a_ttl3 {
        font-size: 1.2rem
    }

    #section_list .section {
        padding: .5rem 0
    }
}

@media screen and (min-width:0px) and (max-width:479px) {
    #section_list {
        width: 96%
    }

    #section_list .a_ttl0 {
        font-size: 1.3rem
    }

    #section_list .a_ttl1 {
        font-size: 1.1rem
    }

    #section_list .a_ttl2 {
        font-size: 1.1rem
    }

    #section_list .a_ttl3 {
        font-size: 1.1rem
    }
}

#section_list .index {
    margin: 2rem auto;
    padding: 3.4rem 2.4rem;
    border-top: 2px solid #ec0714;
    border-bottom: 2px solid #ec0714;
    background-color: #f6f6f6;
    word-wrap: break-word
}

#section_list .index>div {
    position: relative;
    padding-left: 2rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: #ec0714
}

#section_list .index>div::before {
    position: absolute;
    top: .5rem;
    left: 0;
    width: 16px;
    height: 16px;
    background-image: url(/contents/block/120003/index.png);
    background-size: contain;
    background-repeat: no-repeat
}

#section_list .index ul li {
    padding: .6rem 0
}

#section_list .index ul li:first-of-type {
    margin-top: 1.4rem
}

#section_list .index ul li.lv_h2 {
    padding-left: 1rem
}

#section_list .index ul li.lv_h3 {
    padding-left: 4rem
}

#section_list .index ul li.lv_h4 {
    padding-left: 6rem
}

#section_list .index ul li a {
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: underline;
    color: #ec0714
}

@media screen and (min-width:0px) and (max-width:479px) {
    #section_list .index ul li.lv_h2 {
        padding-left: 1rem
    }

    #section_list .index ul li.lv_h3 {
        padding-left: 2rem
    }

    #section_list .index ul li.lv_h4 {
        padding-left: 3rem
    }

    #section_list .index ul li a {
        font-size: 1.2rem
    }
}

#section_list .product_deck {
    padding: .1rem .3rem;
    background-color: #f6f6f6;
    display: flex;
    flex-wrap: wrap
}

#section_list .product_deck>div {
    margin-bottom: .5rem;
    padding: .4rem .2rem 0 .3rem;
    text-align: center;
    width: 12.5%;
    background-color: #fff;
    border: 3px solid #f6f6f6
}

#section_list .product_deck>div>div:first-of-type {
    height: calc(100% - 10px)
}

#section_list .product_deck>div a.thumb img {
    height: 100%;
    width: 100%
}

#section_list .product_deck div.count {
    position: relative
}

#section_list .product_deck div.count p {
    position: absolute;
    bottom: .2rem;
    left: 0;
    right: 0;
    margin: auto;
    line-height: 1.5rem;
    width: 2rem;
    color: #fff;
    background-color: #000;
    opacity: .8;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 3px #fff;
    -moz-box-shadow: 0 0 3px #fff;
    -webkit-box-shadow: 0 0 3px #fff
}

div.large_image {
    position: absolute;
    z-index: 999;
    display: none;
    margin: 0 auto;
    padding: 8px 8px 2px;
    width: 80%;
    max-width: 350px;
    background-color: #fff;
    box-shadow: 0 0 10px #ccc;
    -moz-box-shadow: 0 0 10px #ccc;
    -webkit-box-shadow: 0 0 10px #ccc
}

div.large_image img {
    width: 100%
}

@media screen and (min-width:481px) and (max-width:1030px) {
    #section_list .product_deck>div {
        width: 25%
    }
}

@media screen and (min-width:0px) and (max-width:480px) {
    #section_list .product_deck>div {
        width: 33%
    }
}

#section_list .product_content {
    width: 100%;
    background-color: #f6f6f6
}

#section_list .product_content>div {
    padding: 0 1rem;
    display: table
}

#section_list .product_content div.image {
    display: table-cell;
    padding: 1rem 0;
    width: 30%;
    text-align: center
}

#section_list .product_content div.image a img.card {
    width: 100%
}

#section_list .product_content div.detail {
    display: table-cell;
    vertical-align: top;
    padding: 0 .5rem;
    width: 70%;
    height: 100%
}

@media screen and (min-width:481px) and (max-width:1030px) {
    #section_list .product_content div.detail>a {
        left: 15%
    }

    #section_list .product_content div.detail {
        font-size: .9rem
    }
}

@media screen and (min-width:0px) and (max-width:480px) {
    #section_list .product_content div.detail>a {
        left: 15%
    }
}

#section_list .product_list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    width: auto
}

#section_list .product_list>div {
    padding: .1rem;
    text-align: center;
    border: 4px solid #fff;
    width: 19.5%
}

#section_list .product_list.center>div {
    margin: 0 auto
}

#section_list .product_list>div>div:first-of-type {
    height: calc(100% - 10px)
}

#section_list .product_list>div a.thumb img {
    height: 100%;
    width: 100%
}

@media screen and (min-width:0px) and (max-width:479px) {
    #section_list .product_list>div {
        border: 2px solid #fff
    }
}

#section_list .product_step {
    display: flex
}

#section_list .product_step>div {
    float: left;
    margin: 0 auto;
    padding: 1rem .4rem;
    width: 25%;
    max-width: 198px
}

#section_list .product_step>div a.thumb img {
    width: 100%
}

@media screen and (min-width:0px) and (max-width:800px) {
    #section_list .product_step {
        display: block
    }

    #section_list .product_step>div {
        clear: both;
        float: none;
        width: 230px;
        max-width: 230px
    }
}

div.suggest {
    position: absolute;
    display: none;
    top: calc(100% - 0.2rem);
    left: 1rem;
    width: 100%;
    border: solid 2px #1191e6;
    background-color: #fff;
    box-shadow: 0 0 10px #aaa;
    -moz-box-shadow: 0 0 10px #aaa;
    -webkit-box-shadow: 0 0 10px #aaa
}

div.suggest ul {
    max-height: 390px
}

div.suggest ul li {
    padding: 0 .5rem;
    height: 30px
}

div.suggest ul li.selected {
    background-color: #aedaf7
}

div.suggest p {
    padding: .2rem 1rem;
    text-align: right;
    color: #555;
    background-color: #eee
}