#formFlow {
    text-align: center;
    margin-bottom: 60px
}

#formFlow ul {
    border: #B8B8B8 1px solid;
    border-top: none;
    border-bottom: none;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-justify-content: center;
    justify-content: center
}

#formFlow li {
    border: #B8B8B8 1px solid;
    border-left: none;
    border-right: 0;
    position: relative;
    line-height: 1.3;
    background: #FCF6E8;
    padding: 0 2em 0 3em;
    height: 3em;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center
}

#formFlow li:first-child {
    padding: 0 2em 0 2.4em
}

#formFlow li:last-child {
    padding: 0 2.4em 0 3.4em
}

#formFlow li.visit {
    background: #B8B8B8;
    color: #fff
}

#formFlow li:not(:last-child):before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1.5em 0 1.5em 1em;
    border-color: transparent transparent transparent #B8B8B8;
    position: absolute;
    right: 0;
    top: -1;
    z-index: 10;
    transform: translate(100%, 0%)
}

#formFlow li:not(.visit):not(:last-child):after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1.5em 0 1.5em 1em;
    border-color: transparent transparent transparent #FCF6E8;
    position: absolute;
    right: 1px;
    top: -1px;
    z-index: 11;
    transform: translate(100%, 0%)
}

@media screen and (max-width: 750px) {
    #formFlow {
        margin-bottom:10%
    }

    #formFlow li {
        padding: 2px 1.2em 2px 2.2em;
        font-size: 1.3rem;
        height: 3.2em
    }

    #formFlow li:first-child {
        padding: 2px 1em 2px 1.4em
    }

    #formFlow li:last-child {
        padding: 2px 1.4em 2px 2.2em
    }

    #formFlow li:not(:last-child):before {
        border-width: 1.6em 0 1.6em 1em
    }

    #formFlow li:not(.visit):not(:last-child):after {
        border-width: 1.6em 0 1.6em 1em
    }
}

@media screen and (max-width: 460px) {
    #formFlow ul {
        display:-webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between
    }

    #formFlow li {
        padding: 2px .3em 2px 1.2em;
        font-size: 1.0rem;
        flex-grow: 1
    }

    #formFlow li:first-child {
        padding: 2px 0.3em 2px 0.5em
    }

    #formFlow li:last-child {
        padding: 2px 0.5em 2px 1.2em
    }
}

#cartWrap {
    max-width: 1010px;
    margin-left: auto;
    margin-right: auto
}

.itemBoxAllWrap {
    border: #EBEBEB 3px solid;
    background: #EBEBEB;
    max-width: 1010px;
    margin-left: auto;
    margin-right: auto
}

.itemBoxWrap {
    background: #fff;
    border-bottom: #BEBEBE 2px solid;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.itemBox {
    width: 66%
}

.itemBox .course {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: .8em
}

.itemBox .cName {
    background: #8A8A8A;
    color: #fff;
    font-weight: bold;
    line-height: 1.4;
    padding: 0.4em 0.6em
}

.itemBox .cName.teiki {
    background: #00BD42;
    line-height: 1.3;
    padding: 0.4em 0.8em 0.3em 1em
}

.itemBox .item {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center
}

.itemBox .item a {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease-out
}

.itemBox .item .img {
    border: #ccc 1px solid;
    width: 90px;
    margin-right: 1.5em
}

.itemBox .item .img p {
    width: 100%;
    padding-top: 100%;
    position: relative
}

.itemBox .item .img a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.itemBox .item .img img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 86%;
    max-height: 86%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.itemBox .item .box {
    flex: 1
}

.itemBox .item .name {
    margin-bottom: .7em;
    line-height: 1.5
}

.itemBox .item .kikaku {
    font-size: 1.3rem
}

.itemBox .item .uPrice {
    font-size: 1.3rem
}

.itemBox .item .ttl {
    margin-right: 1em
}

.itemBox .item .uPrice {
    margin-top: 1px
}

.itemBox .item .uPrice strong {
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: normal
}

.itemBoxWrap .subTotalBox,.teikiConfirm .subTotalBox {
    width: 34%;
    border-left: #BEBEBE 1px solid;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.itemBoxWrap .subTotalBox .tblLine,.teikiConfirm .subTotalBox .tblLine {
    border-bottom: #BEBEBE 1px solid;
    display: -webkit-flex;
    display: flex;
    flex-grow: 1
}

.itemBoxWrap .subTotalBox .tblLine:last-child,.teikiConfirm .subTotalBox .tblLine:last-child {
    border: none
}

.itemBoxWrap .subTotalBox .ttl,.teikiConfirm .subTotalBox .ttl {
    flex: 1.3;
    padding: 0 0.5em;
    border-right: #BEBEBE 1px solid;
    font-size: 1.3rem;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center
}

.itemBoxWrap .subTotalBox .column,.teikiConfirm .subTotalBox .column {
    flex: 2;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-align-items: center;
    align-items: center;
    padding: 5px 15px
}

.itemBoxWrap .subTotalBox .column p,.teikiConfirm .subTotalBox .column p {
    width: 100%;
    text-align: right
}

.itemBoxWrap .subTotalBox .delete,.teikiConfirm .subTotalBox .delete {
    display: inline-block;
    background: #B3B3B3;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.4;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    width: 5.4em;
    height: 2.4em;
    text-decoration: none;
    border-radius: 2em;
    margin-left: 1em;
    transition: all 0.2s ease-out
}

.orderTotal {
    max-width: 450px;
    background: #fff;
    margin-left: auto
}

.orderTotal .line {
    border-bottom: #BEBEBE 1px solid;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    padding: 0 15px .2em;
    height: 3em
}

.orderTotal .allTotal {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 0.4em 15px 0;
    height: 3.7em;
    font-weight: bold
}

.orderTotal .price {
    flex: 1;
    text-align: right
}

.orderTotal .allTotal .price {
    font-size: 1.8rem
}

.orderTotal .allTotal .price strong {
    font-size: 2.4rem
}

.teikiConfirmTtl {
    font-size: 1.5rem;
    line-height: 1.4;
    padding: 0.6em 0.5em 0.5em;
    font-weight: bold;
    text-align: center;
    color: rgba(0,0,0,0.7)
}

.teikiConfirm {
    display: -webkit-flex;
    display: flex
}

.oyakusokuBox {
    width: 550px;
    background: #fff;
    margin-right: 2px;
    padding: 1em
}

.oyakusokuBox ul {
    font-size: 1.2rem;
    margin: 0.8em 0 0 1em
}

.teikiConfirm .subTotalBox {
    flex: 1;
    width: auto;
    background: #fff;
    border: none
}

.teikiConfirm .subTotalBox .ttl {
    flex: 1.7;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    padding: 0 0 0 1.5em
}

.teikiConfirm .subTotalBox .column {
    flex: 1
}

.formBtnWrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 60px;
    position: relative
}

.formBtnWrap a {
    text-decoration: none;
    color: inherit;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    height: 52px
}

.formBtnWrap .btnN {
    font-size: 1.4rem;
    width: 250px;
    margin-right: 20px;
    margin-left: 0
}

.formBtnWrap .btnOR {
    font-size: 1.6rem;
    font-weight: bold;
    width: 290px
}

.formBtnWrap .btnG {
    font-size: 1.4rem;
    width: 250px
}

.btnN a,.btnBack a {
    border: #B3B3B3 1px solid;
    color: inherit;
    transition: all 0.2s ease-out;
    padding: 0 1.5em
}

.btnOR a {
    background: #EE4F19;
    color: #fff;
    text-decoration: none;
    transition: all 0.2s ease-out;
    padding: 0 1.5em
}

.btnG a {
    background: #00A339;
    color: #fff;
    text-decoration: none;
    transition: all 0.2s ease-out;
    padding: 0 1.5em;
    height: 3.4em
}

.btnN {
    width: 284px;
    margin-left: auto;
    margin-right: auto
}

.btnN a {
    text-decoration: none;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    height: 3.4em
}

.btnN img {
    width: 6px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translate(0, -50%)
}

.btnBack {
    width: 284px;
    margin-left: auto;
    margin-right: auto
}

.btnBack a {
    text-decoration: none;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    height: 3.4em
}

.btnBack img {
    width: 6px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translate(0, -50%) scale(-1, 1)
}

.formBtnWrap.side .btnN {
    position: absolute;
    left: 0;
    max-width: 124px
}

.formBtnWrap.side .btnN a {
    height: 42px
}

.errorArea {
    border: #D80B0B 1px solid;
    margin: 0 0 2.4em;
    padding: 1em 1.4em;
    color: #D80B0B
}

.error:not(:empty) {
    color: #D80B0B;
    font-size: 1.3rem;
    margin-top: 6px;
    line-height: 1.5;
    background: rgba(216,11,11,0.1);
    padding: 2px 5px;
    margin-bottom: -3px
}

@keyframes borderAnimation {
    from {
        background-position: 0 0, -9px 0, 100% -9px, 0 100%
    }

    to {
        background-position: 0 -9px, 0 0, 100% 0, -9px 100%
    }
}

.pc .itemBoxWrap .subTotalBox .delete:hover {
    background: #CCC
}

.pc .item .img a:hover {
    opacity: 0.8
}

.pc .item .name a:hover {
    color: #00BD42
}

.pc .btnN a:hover,.pc .btnBack a:hover {
    opacity: 0.7
}

.pc .btnOR a:hover {
    background: #FF711F
}

.pc .btnG a:hover {
    background: #00BD42
}

@media screen and (max-width: 750px) {
    .errorArea {
        margin:0 0 2em;
        padding: .9em .9em;
        font-size: 1.3rem
    }

    .itemBox {
        width: 100%
    }

    .itemBox .course {
        display: block;
        margin-bottom: 1em
    }

    .itemBox .cName {
        display: inline-block;
        padding: 0.2em 0.3em
    }

    .itemBox .cName.teiki {
        padding: 0.4em 0.5em 0.4em .7em
    }

    .itemBox .item {
        -webkit-align-items: flex-start;
        align-items: flex-start
    }

    .itemBox .item .img {
        width: 70px;
        margin-right: 1em
    }

    .itemBoxWrap .subTotalBox {
        width: 100%;
        border: none;
        border-top: #BEBEBE 1px solid
    }

    .orderTotal {
        margin-top: 6px
    }

    .orderTotal .line {
        padding: 0 15px .2em;
        height: 2.7em
    }

    .orderTotal .allTotal {
        padding: 0.3em 15px 0;
        height: 3.5em
    }

    .orderTotal .price {
        flex: 1;
        text-align: right
    }

    .orderTotal .allTotal .price {
        font-size: 1.7rem
    }

    .orderTotal .allTotal .price strong {
        font-size: 2.3rem
    }

    .formBtnWrap .btnN {
        width: 30%;
        margin-right: 3%
    }

    .formBtnWrap .btnOR {
        width: 44%
    }

    .teikiConfirmTtl {
        font-size: 1.4rem
    }

    .teikiConfirm {
        display: block
    }

    .oyakusokuBox {
        width: 100%;
        margin-right: 0;
        padding: 10px 8px
    }

    .oyakusokuBox ul {
        font-size: 1.2rem;
        margin: 0.6em 0 0 0
    }

    .teikiConfirm .subTotalBox {
        width: 100%;
        border-top: #EBEBEB 2px solid
    }

    .teikiConfirm .subTotalBox .ttl {
        flex: 1;
        -webkit-align-items: flex-start;
        align-items: flex-start;
        padding: 5px 8px;
        font-size: 1.2rem;
        width: 50%
    }

    .teikiConfirm .subTotalBox .column {
        flex: 1
    }
}

@media screen and (max-width: 460px) {
    .formBtnWrap {
        margin-top:13%;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }

    .formBtnWrap .btnN,.formBtnWrap .btnG {
        width: 60%;
        margin: 12px 0 0
    }

    .formBtnWrap .btnN a {
        height: 42px
    }

    .formBtnWrap .btnG a {
        height: 42px
    }

    .formBtnWrap .btnOR {
        width: 78%
    }

    .formBtnWrap.side .btnN {
        position: relative;
        max-width: none
    }
}

@media screen and (max-width: 330px) {
    .item .img {
        width:60px
    }
}

#popupBox {
    background: rgba(77,77,77,0.7);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    display: none
}

#popupBox .flex {
    width: 100vw;
    height: 100vh;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center
}

#popupBox .changeBox {
    background: #fff;
    padding: 22px 22px 35px;
    position: relative;
    min-width: 700px;
    max-height: 100%;
    overflow-y: auto;
    display: none
}

#popupBox .title {
    font-weight: bold;
    font-size: 2.0rem;
    line-height: 1.4;
    margin-bottom: .6em
}

#popupBox .courseList {
    margin: 0 15px 10px
}

#popupBox .courseList li {
    border-bottom: #ccc 2px solid;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center
}

#popupBox .courseList li:last-child {
    border-bottom: none
}

#popupBox .courseList li.radio label {
    overflow: hidden
}

#popupBox .courseList li.radio label:before {
    width: 36px;
    height: 36px;
    left: 5px;
    top: 50%;
    transform: translate(0, -50%)
}

#popupBox .courseList li.radio label:after {
    width: 18px;
    height: 18px;
    left: 15px;
    top: 50%;
    transform: translate(0, -50%)
}

#popupBox .courseList li.radio label {
    padding: 20px 8em 20px 56px;
    flex: 1;
    margin: 0;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none
}

#popupBox .courseList li .name {
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.4
}

#popupBox .courseList li .point {
    margin-top: 9px
}

#popupBox .courseList li .point span {
    border: 1px solid rgba(216,11,11,0.8);
    padding: .3em 1em;
    line-height: 1.4;
    margin-right: 5px;
    display: inline-block
}

#popupBox .courseList li .point .teiki {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translate(0, -50%);
    background: #00BD42;
    color: #fff;
    border: none
}

#popupBox .back {
    position: absolute;
    left: 20px;
    bottom: 15px
}

#popupBox .back a {
    border: rgba(153,153,153,0.8) 1px solid;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.3;
    padding: .6em 1.8em;
    border-radius: 2em;
    color: #777;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease-out
}

#popupBox .btn {
    margin: 20px auto 0;
    text-align: center
}

#popupBox .btn a {
    text-decoration: none;
    background: #EE4F19;
    color: #fff;
    font-weight: bold;
    font-size: 1.7rem;
    padding: .8em 2.5em;
    border-radius: 2em;
    display: inline-block;
    transition: all 0.2s ease-out
}

.pc #popupBox .back a:hover {
    opacity: 0.7
}

.pc #popupBox .btn a:hover {
    opacity: 0.7
}

@media screen and (max-width: 750px) {
    #popupBox .flex {
        padding:2vw 2vw 0
    }

    #popupBox .changeBox {
        padding: 4vw 4vw 5vw;
        min-width: 76vw;
        max-width: 100%
    }

    #popupBox .title {
        font-size: 1.6rem;
        margin-bottom: .8em
    }

    #popupBox .courseList {
        margin: 0 0 6px;
        width: 100%
    }

    #popupBox .courseList li {
        display: block
    }

    #popupBox .courseList li.radio label:before {
        width: 21px;
        height: 21px;
        left: 0
    }

    #popupBox .courseList li.radio label:after {
        width: 10px;
        height: 10px;
        left: 6px
    }

    #popupBox .courseList li.radio label {
        padding: 15px 5px 15px 30px
    }

    #popupBox .courseList li .name {
        font-size: 1.75rem;
        margin-right: -1em
    }

    #popupBox .courseList li .point {
        margin-top: 7px
    }

    #popupBox .courseList li .point span {
        font-size: 1.2rem;
        padding: .2em .6em;
        margin-right: 5px
    }

    #popupBox .courseList li .point .teiki {
        position: relative;
        right: auto;
        top: auto;
        transform: translate(0, 0);
        border: #00BD42 1px solid
    }

    #popupBox .back {
        position: relative;
        left: auto;
        bottom: auto;
        text-align: center;
        margin-top: 14px
    }

    #popupBox .back a {
        font-size: 1.4rem;
        padding: .6em 1.8em;
        min-width: 50%
    }

    #popupBox .btn {
        margin: 5.4vw auto 0
    }

    #popupBox .btn a {
        font-size: 1.7rem;
        padding: .8em 2em;
        min-width: 90%
    }
}

@media screen and (max-width: 750px) {
    #popupBox .changeBox {
        min-width:94vw
    }
}

.formTbl,.nTbl {
    border: #ccc 1px solid;
    border-top: none;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0
}

.formTbl th,.nTbl th {
    width: 16em;
    font-size: 1.3rem;
    font-weight: normal;
    color: rgba(0,0,0,0.72);
    background: #F7F7F7;
    padding: 1.5em 3em 1.5em 18px;
    position: relative;
    border-top: #ccc 1px solid;
    vertical-align: top
}

.formTbl th .hissu,.nTbl th .hissu {
    font-size: 1.1rem;
    color: #D80B0B;
    position: absolute;
    right: 15px;
    top: 2.6em;
    transform: translate(0, -50%)
}

.formTbl td,.nTbl td {
    padding: 12px 16px;
    border-top: #ccc 1px solid
}

.formTbl .checkbox.w50,.nTbl .checkbox.w50 {
    display: inline-block;
    margin-left: 18px
}

.formTbl input,.nTbl input {
    font-size: 1.5rem;
    padding: 8px
}

.formTbl input.w50,.nTbl input.w50 {
    width: 48.6%;
    max-width: 250px
}

.formTbl input.w100,.nTbl input.w100 {
    max-width: 500px
}

.formTbl select,.nTbl select {
    font-size: 1.5rem;
    width: 10em
}

.formTbl select.month,.nTbl select.month {
    width: 5em
}

.formTbl select.year,.nTbl select.year {
    width: 8em
}

.formTbl .creditMihon,.nTbl .creditMihon {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 20px
}

.formTbl .creditMihon img,.nTbl .creditMihon img {
    max-width: 335px;
    margin-right: 16px
}

.formTbl .creditMihon p,.nTbl .creditMihon p {
    flex: 1;
    font-size: 1.2rem;
    margin-right: 1em
}

.formTbl .flexC.mrgT,.nTbl .flexC.mrgT {
    margin-top: 8px
}

.formTbl .flexC .ttl,.nTbl .flexC .ttl {
    width: 11em;
    font-size: 1.3rem
}

.formTbl .flexC div,.nTbl .flexC div {
    flex: 1
}

.formTbl .addressTD select,.nTbl .addressTD select {
    min-width: 40%
}

.formTbl .zip input,.nTbl .zip input {
    width: 5em;
    min-width: 0
}

.formTbl .zip input:nth-child(2),.nTbl .zip input:nth-child(2) {
    width: 7em;
    min-width: 0
}

.formTbl .selectDayTime,.nTbl .selectDayTime {
    width: 50%
}

.nTbl {
    border-left: none;
    border-right: none
}

.nTbl th {
    width: 18em;
    font-size: 1.4rem;
    padding: 15px 18px
}

.nTbl td {
    padding: 15px 10px 15px 24px
}

.radio label.inline {
    font-size: 1.5rem;
    display: inline-block;
    padding-right: 1em;
    padding-left: 36px;
    margin-right: 1.5em;
    margin-bottom: 0
}

.radio label.inline:before {
    width: 26px;
    height: 26px
}

.radio label.inline:after {
    width: 16px;
    height: 16px;
    left: 6px
}

.checkbox label.inline {
    font-size: 1.5rem;
    display: inline-block;
    padding-right: 1em;
    padding-left: 38px;
    margin-right: 1.5em;
    margin-bottom: 0
}

.checkbox label.inline:before {
    width: 26px;
    height: 26px
}

.checkbox label.inline:after {
    top: 40%;
    left: -3px;
    width: 12px;
    height: 24px;
    border-width: 5px
}

@media screen and (max-width: 750px) {
    .formTbl th {
        width:13em;
        font-size: 1.3rem;
        padding: 1.6em 3em 1.6em 15px
    }

    .formTbl .checkbox.w50 {
        display: block;
        margin: 5px 0 -6px
    }

    .formTbl .flexC .ttl {
        width: 11em;
        font-size: 1.1rem
    }

    .nTbl {
        display: block;
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translate(-50%, 0)
    }

    .nTbl tbody,.nTbl tr,.nTbl th,.nTbl td {
        display: block;
        width: 100%
    }

    .nTbl th {
        font-size: 1.3rem;
        padding: 4px 12px
    }

    .nTbl td {
        padding: 11px 15px 21px
    }
}

@media screen and (max-width: 460px) {
    .formTbl {
        display:block
    }

    .formTbl input {
        font-size: 1.6rem;
        padding: 10px 8px
    }

    .formTbl select {
        font-size: 1.6rem
    }

    .formTbl tbody,.formTbl tr,.formTbl th,.formTbl td {
        display: block;
        width: 100%
    }

    .formTbl th {
        font-size: 1.3rem;
        padding: 4px 3em 4px 10px
    }

    .formTbl th .hissu {
        right: 10px;
        top: 50%
    }

    .formTbl td {
        padding: 12px 10px 16px
    }

    .formTbl .flexC {
        display: block
    }

    .formTbl .flexC.mrgT {
        margin-top: 12px
    }

    .formTbl .flexC .ttl {
        width: 100%;
        font-size: 1.3rem;
        margin-bottom: 3px
    }

    .formTbl .creditMihon p {
        margin: 1em 0 0
    }

    .formTbl .addressTD select {
        min-width: 70%
    }

    .credit input.w75 {
        width: 100%
    }

    .credit input.secNum {
        width: 50%
    }
}

#thanksPage {
    padding-top: 70px
}

#thanksPage h1#pageTitle {
    display: none
}

.thanksBox {
    max-width: 820px;
    margin: 0 auto
}

.thanksBox h2 {
    font-size: 2.9rem;
    font-weight: bold;
    line-height: 1.4;
    text-align: center
}

.thanksBox h2 .name {
    font-size: 2.0rem;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 0.5em
}

.thanksBox h3 {
    font-size: 2.0rem;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    margin: 1em 0 2em
}

.thanksBox .grayBox {
    background: #EBEBEB;
    font-size: 1.5rem;
    padding: 20px;
    text-align: center;
    margin: 40px 0
}

.thanksBox .thanksTxt {
    text-align: center;
    line-height: 2.0
}

.thanksBox .btnN {
    margin: 50px auto 0
}

.thanksBox .formBtnWrap .btnN {
    margin: 0 20px 0 0
}

@media screen and (max-width: 750px) {
    #thanksPage {
        padding-top:7vw
    }

    .thanksBox {
        max-width: 100%
    }

    .thanksBox h2 {
        font-size: 2.2rem
    }

    .thanksBox h2 .name {
        font-size: 1.8rem;
        margin-bottom: 1em
    }

    .thanksBox h3 {
        font-size: 1.7rem;
        margin: 1.4em 0 2em
    }

    .thanksBox .grayBox {
        font-size: 1.4rem;
        padding: 10px 4vw;
        text-align: left;
        margin: 8vw 0
    }

    .thanksBox .thanksTxt {
        text-align: left;
        line-height: 1.8
    }

    .thanksBox .btnN {
        width: 250px;
        margin: 10vw auto 0
    }
}

@media screen and (max-width: 460px) {
    .thanksBox .formBtnWrap .btnN {
        margin:12px 0 0 0
    }
}

#shoppingPage h2,.myPage h2,#logInWrap h2 {
    font-size: 1.7rem;
    padding-top: 1em;
    margin-top: 2.5em;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: .7em
}

#logInWrap h2 {
    margin-top: 4em
}

#shoppingPage h2:first-of-type {
    margin-top: -0.5em
}

#logInWrap h2:first-of-type {
    margin-top: 0em;
    padding-top: 0
}

#shoppingPage .radio label:before {
    width: 36px;
    height: 36px;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    background: #fff
}

#shoppingPage .radio label:after {
    width: 18px;
    height: 18px;
    left: 10px;
    top: 50%;
    transform: translate(0, -50%)
}

#shoppingPage .radio label {
    padding: 15px 1em 15px 50px;
    flex: 1;
    margin: 0;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none
}

#shoppingPage .select {
    font-weight: bold;
    font-size: 1.6rem;
    color: rgba(0,0,0,0.72);
    width: 15em
}

.radioAcd {
    border: #ccc 1px solid;
    margin-bottom: 5px
}

.radioAcd .select {
    background: #F2F2F2;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 16px;
    width: 100% !important
}

.radioAcd .acdBox {
    padding: 1.5em 40px 1.5em 68px;
    display: none
}

.radioAcd .acdBox.payNum4 {
    padding: 0 !important
}

.radioAcd .creditImg {
    max-width: 720px;
    margin-top: 20px
}

.addressChoice .box {
    border: #ccc 1px solid;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.addressChoice .box:not(.member):not(:last-of-type) {
    border-bottom: none
}

.addressChoice .box.member {
    margin-bottom: 10px
}

.addressChoice .select {
    background: #F2F2F2;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 5px 16px
}

.addressChoice .address {
    flex: 1;
    font-size: 1.3rem;
    padding: 1em 2em;
    line-height: 1.4
}

.addressChoice .address p {
    font-size: 1.4rem;
    margin-top: 0.3em
}

.addressChoice .btnBdr a {
    font-size: 1.3rem;
    border: #ccc 1px solid;
    line-height: 1.4;
    padding: .7em 3em;
    border-radius: 2em;
    display: inline-block;
    transition: all 0.2s ease-out
}

.addressChoice .btnBox {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin: 0 1.5em 0 0
}

.addressChoice .btnBox a {
    text-decoration: none;
    color: inherit;
    font-size: 1.3rem
}

.addressChoice .btnBox a img {
    width: 4px;
    margin-left: 10px;
    line-height: 0;
    vertical-align: 1px
}

.addressChoice .addBtn {
    margin: 26px auto 0;
    text-align: center
}

.addressChoice .addBtn a {
    border: #ccc 1px solid;
    text-decoration: none;
    color: inherit;
    display: inline-block;
    padding: .85em 2.5em;
    transition: all 0.3s ease-out
}

.addressChoice .addBtn a img {
    width: 12.4px;
    transform: rotate(-45deg) translate(0, 30%);
    margin-right: 1em
}

.pc .addressChoice .btnBdr a:hover {
    opacity: 0.7
}

.pc .addressChoice .member .btnBox a:hover {
    text-decoration: underline
}

.pc .addressChoice .addBtn a:hover {
    opacity: 0.7
}

@media screen and (max-width: 750px) {
    #shoppingPage h2 {
        font-size:1.7rem;
        padding-top: .5em;
        margin-top: 1.8em;
        margin-bottom: .6em
    }

    .myPage h2 {
        font-size: 1.7rem;
        padding-top: .5em;
        margin-top: 2.3em;
        margin-bottom: .6em
    }

    #logInWrap h2 {
        margin-top: 2.5em
    }

    #shoppingPage .select {
        font-size: 1.5rem;
        width: 100%;
        padding: 0 10px
    }

    #shoppingPage .radio label:before {
        width: 22px;
        height: 22px
    }

    #shoppingPage .radio label:after {
        width: 10px;
        height: 10px;
        left: 7px
    }

    #shoppingPage .radio label {
        padding: 10px 1em 10px 32px;
        line-height: 1.4
    }

    .addressChoice .box {
        border: #ccc 1px solid;
        display: block;
        padding-bottom: 10px
    }

    .addressChoice .select {
        wiidth: 100%;
        padding: 0 0 0 10px
    }

    .addressChoice .address {
        flex: 0;
        font-size: 1.3rem;
        padding: 1em 14px 0.7em;
        line-height: 1.4
    }

    .addressChoice .address p {
        font-size: 1.4rem;
        margin-top: 0.3em
    }

    .addressChoice .btnBox {
        margin: .5em 1em 0;
        display: block;
        text-align: center
    }

    .addressChoice .btnBox a {
        text-decoration: none;
        color: inherit;
        font-size: 1.3rem
    }

    .addressChoice .btnBox a img {
        width: 4px;
        margin-left: 10px;
        line-height: 0;
        vertical-align: 1px
    }

    .addressChoice .addBtn {
        margin: 7vw auto 0
    }

    .radioAcd .select {
        padding: 0 10px
    }

    .radioAcd .acdBox {
        padding: 1em 4vw
    }

    .radioAcd .creditImg {
        max-width: 720px;
        margin-top: 20px
    }
}

#cartPage #pageTitle {
    display: none
}

#cartPage .itemBox {
    padding: 18px 20px 20px
}

#cartPage .itemBox .item .box {
    padding-top: 5px
}

#cartPage .itemBox .cName {
    font-size: 1.5rem
}

#cartPage .itemBox .change a {
    border: #ccc 1px solid;
    font-size: 1.3rem;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: .4em 1.6em;
    color: inherit;
    text-decoration: none;
    border-radius: 2em;
    margin-left: 1em;
    transition: all 0.2s ease-out
}

#cartPage .itemBox .change a img {
    width: 16px;
    margin-right: 0.5em;
    transition: all 0.2s ease-out
}

#cartPage .item .name {
    font-size: 1.8rem;
    font-weight: bold
}

#cartPage .item .img {
    width: 90px
}

#cartPage .taxTxt {
    text-align: right;
    font-size: 1.2rem;
    margin-top: 1em;
    margin-bottom: -1.4em;
    opacity: 0.95
}

.pc #cartPage .itemBox .change a:hover {
    background: rgba(0,189,66,0.1)
}

.pc #cartPage .itemBox .change a:hover img {
    transform: rotate(60deg)
}

@media screen and (max-width: 750px) {
    #cartPage .itemBox {
        padding:4% 3%
    }

    #cartPage .itemBox .item .box {
        padding-top: 0
    }

    #cartPage .itemBox .cName {
        font-size: 1.4rem
    }

    #cartPage .itemBox .change a {
        font-size: 1.3rem;
        display: -webkit-inline-flex;
        display: inline-flex;
        padding: .4em 1.5em;
        margin: .7em 0 0
    }

    #cartPage .itemBox .change a img {
        width: 16px;
        margin-right: 0.5em
    }

    #cartPage .item .name {
        font-size: 1.6rem
    }

    #cartPage .item .img {
        width: 70px
    }

    #cartPage .taxTxt {
        font-size: 1.1rem;
        margin-top: .7em;
        margin-bottom: -0.8em
    }
}

#shoppingPage {
    padding-top: 70px
}

#shoppingPage #pageTitle {
    display: none
}

#shoppingPage h2 .taxTxt {
    font-size: 1.2rem;
    display: inline-block;
    margin-left: 1.8em;
    font-weight: normal
}

#shoppingPage .formTbl th {
    font-size: 1.5rem;
    font-weight: bold;
    width: 13em
}

#shoppingPage .formTbl th {
    font-size: 1.5rem;
    font-weight: bold
}

#shoppingPage .gift {
    font-size: 1.5rem
}

#shoppingPage .checkbox label {
    padding: 10px 0 10px 44px
}

#shoppingPage .checkbox label:before {
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    width: 28px;
    height: 28px;
    border: 2px solid #C2C2C2;
    border-radius: 2px
}

#shoppingPage .checkbox label:after {
    top: 50%;
    left: 10px;
    transform: translate(0, -50%) rotate(45deg);
    width: 10px;
    height: 26px;
    margin-top: -5.5px;
    border-radius: 0
}

#shoppingPage .itemBoxAllWrap {
    margin-bottom: 26px
}

#shoppingPage .item {
    -webkit-align-items: flex-start;
    align-items: flex-start
}

#shoppingPage .itemBox {
    padding: 12px 16px 10px
}

#shoppingPage .item .name {
    font-size: 1.7rem;
    font-weight: bold
}

#shoppingPage .itemBox .cName {
    padding: 0.3em 0.4em 0.2em 0.8em;
    margin-bottom: 0.7em;
    display: inline-block
}

#shoppingPage .orderTotalWrap {
    width: 710px;
    margin: 50px auto
}

#shoppingPage .orderTotalWrap h2 {
    font-weight: normal;
    font-size: 2.2rem;
    text-align: center
}

#shoppingPage .orderTotalWrap h2 span {
    font-size: 1.6rem
}

#shoppingPage .orderTotalWrap .orderTotal {
    border: #EBEBEB 4px solid;
    width: 100%;
    max-width: none
}

#shoppingPage .orderTotalWrap .title {
    width: 50%;
    text-align: right;
    font-size: 1.5rem
}

#shoppingPage .orderTotalWrap .allTotal .title {
    font-size: 1.6rem
}

@media screen and (max-width: 460px) {
    #shoppingPage .formTbl th {
        width:100%
    }
}

.borderConfBox {
    border: #ccc 1px solid;
    padding: 1.3em 20px;
    min-height: 4em;
    position: relative
}

.borderConfBox .telEmail {
    margin-top: 0.7em
}

.borderConfBox .telEmail span:not(:first-child) {
    display: inline-block;
    margin-left: 3em
}

.borderConfBox .btnBdr {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translate(0, -49%)
}

.borderConfBox .btnBdr a {
    color: inherit;
    text-decoration: none;
    font-size: 1.2rem !important;
    border: #B3B3B3 1px solid;
    border-radius: 2em;
    padding: .5em 1.5em;
    transition: all 0.2s ease-out
}

.pc .borderConfBox .btnBdr a:hover {
    opacity: 0.7
}

@media screen and (max-width: 750px) {
    #shoppingPage {
        padding-top:7vw
    }

    #shoppingPage .itemBoxAllWrap {
        margin-bottom: 6vw
    }

    #shoppingPage .itemBox {
        padding: 8px 8px 6px
    }

    #shoppingPage .itemBox .cName {
        font-size: 1.3rem;
        padding: 0.3em 0.3em 0.2em 0.5em
    }

    #shoppingPage .item .name {
        font-size: 1.5rem
    }

    #shoppingPage .orderTotalWrap {
        width: 100%;
        margin: 11vw auto
    }

    #shoppingPage .orderTotalWrap h2 {
        font-size: 2.0rem
    }

    #shoppingPage .orderTotalWrap h2 span {
        font-size: 1.5rem
    }

    #shoppingPage .orderTotalWrap .orderTotal {
        border: #EBEBEB 3px solid
    }

    #shoppingPage .orderTotalWrap .orderTotal .line {
        height: auto;
        min-height: 2.6em;
        padding: 0 10px .2em
    }

    #shoppingPage .orderTotalWrap .title {
        width: 50%;
        font-size: 1.2rem
    }

    #shoppingPage .orderTotalWrap .allTotal .title {
        font-size: 1.5rem
    }
}

@media screen and (max-width: 460px) {
    .borderConfBox {
        padding:10px 4vw
    }

    .borderConfBox .telEmail span {
        display: block
    }

    .borderConfBox .telEmail span:not(:first-child) {
        margin-left: 0
    }

    .borderConfBox .btnBdr {
        right: 0;
        top: -12px;
        transform: translate(0, -100%)
    }

    .borderConfBox .btnBdr a {
        padding: .52em 1.7em !important;
        font-size: 1.1rem !important
    }
}

#loginPage h1 {
    display: none
}

#logInWrap {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto
}

#logInWrap .borderBox {
    border: #EBEBEB 4px solid;
    padding: 40px 20px 28px
}

#logInWrap .borderBox .formTbl {
    border: none;
    width: 480px;
    margin: 0 auto
}

#logInWrap .borderBox .formTbl th {
    background: none;
    text-align: right;
    border: none;
    padding: .7em 1.7em 10px 0;
    width: 9em;
    color: rgba(0,0,0,0.85);
    vertical-align: top
}

#logInWrap .borderBox .formTbl td {
    border: none;
    padding: 0 0 10px 0
}

#logInWrap .borderBox .formTbl td input {
    padding: 10px 8px
}

#logInWrap .borderBox td .checkbox {
    margin-top: .3em
}

#logInWrap .borderBox .submit {
    max-width: 230px;
    margin: 15px auto 0
}

#logInWrap .borderBox .submit a {
    background: #00BD42;
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    display: block;
    padding: 1em;
    transition: all 0.3s ease-out
}

#logInWrap .borderBox .txtLinkList {
    margin-top: 2em;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    font-size: 1.3rem
}

#logInWrap .borderBox .txtLinkList li:nth-child(2) {
    margin-left: 3em
}

#logInWrap .borderBox .txtLinkList a {
    color: inherit
}

#logInWrap .borderBox .txtLinkList a img {
    width: 4px;
    margin-right: 10px;
    vertical-align: 2px
}

#logInWrap .goEntry {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    margin: 20px 0 0
}

#logInWrap .goEntry .btn {
    width: 280px;
    margin-left: 30px
}

#logInWrap .goEntry .btn a {
    border: #00BD42 1px solid;
    color: #00BD42;
    font-size: 1.6rem;
    font-weight: bold;
    padding: .8em;
    text-decoration: none;
    display: block;
    text-align: center;
    transition: all 0.3s ease-out
}

.pc #logInWrap .borderBox .submit a:hover {
    opacity: 0.8
}

.pc #logInWrap .goEntry .btn a:hover {
    background: #00BD42;
    color: #fff
}

#memberMeritBox {
    background: #F8F5EE;
    border: #C4C4C4 1px solid;
    padding: 30px 30px 25px;
    margin-top: 36px
}

#memberMeritBox h2 {
    color: #F75B25;
    font-size: 1.9rem;
    text-align: center;
    margin: 0 0 .5em;
    padding: 0
}

#memberMeritBox ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 720px;
    margin: 0 auto
}

#memberMeritBox li {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    width: 50%;
    margin-top: 14px
}

#memberMeritBox li .img {
    background: #fff;
    width: 83px;
    height: 83px;
    border-radius: 50%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center
}

#memberMeritBox li .img img {
    width: 84%
}

#memberMeritBox li .txt {
    flex: 1;
    margin-left: 1.4em
}

@media screen and (max-width: 750px) {
    #logInWrap .borderBox .formTbl {
        width:100%
    }

    #logInWrap .goEntry {
        display: block;
        text-align: center;
        margin: 6vw 0 0
    }

    #logInWrap .goEntry .btn {
        margin: 3vw auto 0
    }

    #memberMeritBox {
        padding: 6% 4% 5%;
        margin-top: 8vw
    }

    #memberMeritBox li {
        width: 48%
    }

    #memberMeritBox li:nth-child(2n) {
        margin-left: 4%
    }

    #memberMeritBox li .img {
        width: 13vw;
        height: 13vw
    }

    #memberMeritBox li .txt {
        margin-left: 1.1em
    }
}

@media screen and (max-width: 460px) {
    #logInWrap .borderBox {
        padding:4vw 4vw 5vw
    }

    #logInWrap .borderBox .formTbl th {
        text-align: left;
        padding: .7em 0 5px 0;
        width: 100%
    }

    #logInWrap .borderBox .txtLinkList {
        margin-top: 2em;
        display: block
    }

    #logInWrap .borderBox .txtLinkList li:nth-child(2) {
        margin: 1em 0 0
    }

    #logInWrap .borderBox .txtLinkList a img {
        margin-right: 7px;
        vertical-align: 1px
    }

    #logInWrap .goEntry {
        margin: 8vw 0 0
    }

    #logInWrap .goEntry .btn {
        margin: 5vw auto 0;
        width: 80%
    }

    #memberMeritBox {
        padding: 7% 5% 5%;
        margin-top: 11vw
    }

    #memberMeritBox li {
        width: 100%;
        padding: 0 2%;
        margin-top: 8px
    }

    #memberMeritBox li:nth-child(2n) {
        margin-left: 0
    }

    #memberMeritBox li .img {
        width: 20vw;
        height: 20vw
    }

    #memberMeritBox li .txt {
        margin-left: 1.1em
    }
}

#entryPage h1#pageTitle {
    display: none
}

#entryPage .kiyakuTtl {
    margin: 48px 0 10px
}

.kiyakuBox {
    padding: 20px 30px;
    font-size: 1.3rem;
    border: #ccc 1px solid;
    height: 230px;
    overflow-y: auto
}

.kiyakuBox p {
    margin-bottom: 1.3em
}

.kiyakuBox h1 {
    font-size: 1.8rem;
    margin: 0.4em 0 1.2em;
    padding: 0;
    font-weight: bold;
    text-align: center
}

.kiyakuBox h2 {
    font-weight: bold;
    font-size: 1.4rem;
    margin: 2.6em 0 0.6em
}

.douiTxt {
    text-align: center;
    font-size: 1.5rem;
    margin: 1.8em 0 0
}

.douiTxt .hissu {
    font-size: 1.3rem;
    display: inline-block;
    margin: 0 0 0 1em
}

.douiTxt label.inline {
    margin-right: 0
}

.snsLoginBox ul {
    margin: 1em 0 3.5em;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.snsLoginBox li {
    max-width: 298px;
    flex: 0 0 50%;
    padding-right: 20px
}

.snsLoginBox li img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@media screen and (max-width: 750px) {
    .kiyakuBox {
        padding:5vw 4vw;
        font-size: 1.2rem;
        height: 30vh
    }

    .douiTxt {
        margin: 1.5em 0 0
    }
}

@media screen and (max-width: 460px) {
    .kiyakuBox {
        height:24vh
    }

    .kiyakuBox h1 {
        font-size: 1.6rem;
        margin: 0.2em 0 1em
    }

    .snsLoginBox ul {
        margin: 1em 0 2em
    }

    .snsLoginBox li {
        flex: 0 0 66%;
        padding-right: 0;
        margin-bottom: 8px
    }
}

.myPage h1#pageTitle {
    display: none
}

.myPage h2 .taxTxt {
    font-size: 1.1rem;
    display: inline-block;
    margin-left: 1.8em;
    font-weight: normal
}

.myPage .btnN {
    margin-top: 30px
}

.myPage .btnN.back {
    margin-top: 50px;
    width: 250px
}

.myPage .errorArea {
    margin: 1.5em 0 1.5em
}

.myMenu {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: 1.3rem;
    max-width: 808px;
    margin: 0 auto;
    padding: 0 0 10px
}

.myMenu a {
    text-decoration: none;
    color: inherit;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    border: #B8B8B8 1px solid;
    padding: .8em;
    transition: all 0.3s ease-out
}

.myMenu .visit a {
    background: #FCF4E3
}

.myMenu li {
    width: 24.4%;
    margin: 0 0.8% 6px 0
}

.myMenu li:nth-child(4n) {
    margin-right: 0
}

.pc .myMenu a:hover {
    background: #FCF4E3
}

#myPageTop h1#pageTitle {
    display: block;
    font-size: 2.0rem;
    font-weight: normal;
    text-align: left;
    margin-top: 50px;
    margin-bottom: 30px
}

#myPageTop h1#pageTitle strong {
    font-size: 2.2rem
}

#myPageTop .orderHistory {
    margin-bottom: 1em
}

@media screen and (max-width: 750px) {
    #myPageTop h1#pageTitle {
        margin-top:0;
        margin-bottom: 15px;
        font-size: 1.6rem
    }

    #myPageTop h1#pageTitle strong {
        font-size: 1.9rem
    }

    .myMenu {
        font-size: 1.3rem;
        padding: 0;
        margin: 0 -1%
    }

    .myMenu a {
        padding: .5em
    }

    .myMenu li {
        width: 32.6%;
        margin: 0 1.1% 6px 0
    }

    .myMenu li:nth-child(4n) {
        margin-right: 1.1%
    }

    .myMenu li:nth-child(3n) {
        margin-right: 0
    }
}

@media screen and (max-width: 460px) {
    .myPage .btnN {
        margin-top:6vw
    }

    .myPage .btnN.back {
        margin-top: 10vw;
        width: 68%
    }

    .myMenu {
        font-size: 1.24rem;
        margin: 0 -1%
    }

    .myMenu a {
        padding: .62em 0.2em
    }

    .myMenu li {
        width: 49.4%;
        margin: 0 1.2% 1.2% 0 !important
    }

    .myMenu li:nth-child(2n) {
        margin-right: 0 !important
    }
}

.orderHistory {
    border: #ccc 1px solid
}

.orderHistory .ihead {
    border-bottom: #ccc 1px solid;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    padding: 0.7em 1em;
    font-size: 1.3rem
}

.orderHistory .ihead .detailLink {
    margin-left: auto
}

.orderHistory .ihead .detailLink img {
    width: 5px;
    display: inline-block;
    margin-left: .7em;
    vertical-align: 0px
}

.orderHistory .ihead .detailLink a {
    color: inherit;
    display: inline-block
}

.orderHistory .itemBox {
    border: #ccc 1px solid;
    border-bottom: none;
    width: 100%;
    font-size: 1.3rem;
    padding: 8px 16px
}

.orderHistory .item .img {
    width: 60px;
    margin-right: 1em;
    background: #fff
}

.orderHistory .item .line {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    margin-top: 0.2em
}

.orderHistory .item .name {
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
    flex: 1
}

.orderHistory .item .kikaku {
    margin-left: auto;
    padding-left: 2em
}

.orderHistory .item .num {
    width: 7em;
    text-align: right
}

.orderHistory .sumLine {
    border: #ccc 1px solid;
    background: #F2F2F2
}

.orderHistory .sumLine div {
    background: #fff;
    width: 300px;
    margin-left: auto;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: baseline;
    align-items: baseline;
    padding: 6px 20px
}

.orderHistory .sumLine div .title {
    font-size: 1.2rem
}

.orderHistory .sumLine div .sum {
    margin-left: auto;
    font-weight: bold
}

.teiki .ihead div {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center
}

.teiki .ihead .status {
    color: #00A339;
    border: #00A339 1px solid;
    padding: 2px;
    width: 6em;
    text-align: center;
    margin-right: 1.7em;
    letter-spacing: 1px;
    font-weight: bold
}

.teiki .ihead .jikai {
    margin-right: 35px
}

.teiki .ihead .times strong {
    font-size: 1.4rem
}

.teikiRenraku {
    background: #F3F3F3;
    padding: 30px
}

.teikiRenraku .fz16 {
    text-align: center;
    margin: 1em 0 2em
}

.btnOtoiawaseWrap {
    background: #fff;
    max-width: 830px;
    margin-left: auto;
    margin-right: auto;
    padding: 18px 15px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center
}

.btnOtoiawaseWrap .btn a {
    display: block;
    text-align: center;
    background: #00A339;
    color: #fff;
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: bold;
    padding: 1em 4em;
    transition: all 0.3s ease-out
}

.btnOtoiawaseWrap .img {
    width: 360px;
    margin-left: 30px
}

.pc .btnOtoiawaseWrap .btn a:hover {
    background: #00BD42
}

@media screen and (max-width: 750px) {
    .teikiRenraku {
        padding:4vw
    }

    .teikiRenraku .fz16 {
        font-size: 1.5rem;
        margin: .5em 0 2em
    }

    .btnOtoiawaseWrap {
        padding: 15px 15px
    }

    .btnOtoiawaseWrap .btn a {
        padding: .5em 3em
    }

    .btnOtoiawaseWrap .img {
        width: auto;
        flex: 1;
        margin-left: 20px
    }

    .teiki .ihead div {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-align-items: center;
        align-items: center;
        margin: 0.6em 0 0
    }
}

@media screen and (max-width: 460px) {
    .orderHistory .ihead {
        padding:0.8em .7em 0.8em .8em;
        font-size: 1.2rem
    }

    .orderHistory .ihead .detailLink img {
        margin-left: .7em
    }

    .orderHistory .ihead .detailLink a {
        font-size: 1.3rem
    }

    .orderHistory .itemBox {
        padding: 8px 3vw
    }

    .orderHistory .item .line {
        margin-top: 0.3em
    }

    .orderHistory .item .name {
        width: 100%;
        flex: auto;
        margin-bottom: .5em
    }

    .orderHistory .item .kikaku {
        margin-left: 0;
        padding-left: 0;
        width: 100%
    }

    .orderHistory .item .num {
        text-align: left
    }

    .orderHistory .sumLine div {
        width: 100%;
        padding: 6px 4vw
    }

    .teiki .ihead .status {
        margin-bottom: 6px
    }

    .teiki .ihead .jikai {
        width: 16em
    }

    .teikiRenraku {
        padding: 5vw 5vw
    }

    .teikiRenraku .fz16 {
        font-size: 1.4rem;
        margin: 0 1em 1.1em;
        line-height: 1.6;
        text-align: left
    }

    .teikiRenraku .fz16 br {
        display: none
    }

    .btnOtoiawaseWrap {
        display: block;
        padding: 4vw 4vw
    }

    .btnOtoiawaseWrap .btn a {
        padding: .9em 3em
    }

    .btnOtoiawaseWrap .img {
        margin: 5vw 0 0
    }
}

#myHistoryPage h2 {
    margin-bottom: -15px
}

#myHistoryPage .orderHistory {
    margin-top: 40px
}

#myHistoryPage .noTxt {
    margin-top: 50px
}

#myHistoryDetailPage .itemBoxAllWrap {
    margin-bottom: 50px;
    margin-top: 20px
}

#myHistoryDetailPage .ihead {
    font-size: 1.3rem;
    padding: .8em 1em;
    border-bottom: #BEBEBE 2px solid;
    background: #fff;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center
}

#myHistoryDetailPage .ihead .orderNo {
    margin-right: 35px
}

#myHistoryDetailPage .ihead .date {
    margin-right: 35px
}

#myHistoryDetailPage .ihead .date strong {
    font-size: 1.4rem
}

#myHistoryDetailPage .item {
    -webkit-align-items: flex-start;
    align-items: flex-start
}

#myHistoryDetailPage .itemBox {
    padding: 13px 16px 10px
}

#myHistoryDetailPage .item .img {
    width: 74px
}

#myHistoryDetailPage .item .name {
    font-size: 1.6rem;
    font-weight: bold
}

#myHistoryDetailPage .itemBox .cName {
    padding: 0.3em 0.4em 0.2em 0.8em;
    margin-bottom: 0.7em;
    display: inline-block;
    font-size: 1.3rem
}

#myHistoryDetailPage .itemBox .itemCode {
    font-size: 1.3rem
}

#myHistoryDetailPage dl {
    border: #ccc 1px solid
}

#myHistoryDetailPage dl:not(:first-of-type) {
    border-top: none
}

#myHistoryDetailPage dt {
    background: #F2F2F2;
    color: rgba(0,0,0,0.6);
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.4;
    padding: .6em 12px
}

#myHistoryDetailPage dd {
    padding: 14px 24px 16px
}

#myHistoryDetailPage dd.changeBox {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center
}

#myHistoryDetailPage dd.changeBox div {
    flex: 1;
    padding-right: 5px
}

#myHistoryDetailPage dd.changeBox .telChange {
    font-size: 1.3rem;
    width: 19em;
    margin-left: auto
}

#myHistoryDetailPage dd.changeBox .btnBdr {
    margin-left: auto
}

#myHistoryDetailPage dd.changeBox .btnBdr a {
    color: inherit;
    text-decoration: none;
    font-size: 1.2rem !important;
    border: #B3B3B3 1px solid;
    border-radius: 2em;
    padding: .5em 1.5em;
    transition: all 0.2s ease-out
}

#myHistoryDetailPage dd.changeBox .btnBdr a:hover {
    opacity: 0.7
}

#myHistoryDetailPage dd .slipNum {
    display: inline-block;
    margin-left: .5em
}

#myHistoryDetailPage dd .limit {
    display: inline-block;
    margin-left: 2.5em
}

#myHistoryDetailPage .cChange {
    margin: -14px auto 20px
}

#myHistoryDetailPage .attention {
    font-size: 1.5rem;
    margin: 44px auto;
    text-align: center;
    line-height: 2.2
}

@media screen and (max-width: 750px) {
    #myHistoryDetailPage h2 {
        margin-top:0
    }

    #myHistoryDetailPage .itemBoxAllWrap {
        margin-bottom: 9vw;
        margin-top: 10px
    }

    #myHistoryDetailPage .itemBox {
        padding: 4vw 3vw 3vw
    }

    #myHistoryDetailPage .item .img {
        width: 70px
    }

    #myHistoryDetailPage .itemBox .cName {
        padding: 0.3em 0.25em 0.3em 0.5em;
        margin-bottom: 0.6em;
        font-size: 1.2rem
    }

    #myHistoryDetailPage .itemBox .itemCode {
        font-size: 1.2rem;
        margin-bottom: 2px
    }

    #myHistoryDetailPage dt {
        padding: .5em 10px
    }

    #myHistoryDetailPage dd {
        padding: 3vw 3vw 5vw 4vw
    }

    #myHistoryDetailPage .attention {
        font-size: 1.2rem;
        margin: 10vw auto 6vw;
        line-height: 1.9
    }

    #myHistoryDetailPage .attention .red {
        display: inline-block;
        margin-top: 0.5em
    }
}

@media screen and (max-width: 460px) {
    #myHistoryPage h2 {
        margin-bottom:-10px
    }

    #myHistoryPage .orderHistory {
        margin-top: 30px
    }

    #myHistoryDetailPage .cChange {
        margin: -2vw auto 10vw
    }

    #myHistoryDetailPage dd.changeBox .telChange {
        font-size: 1.2rem;
        width: 100%;
        text-align: center;
        margin: 1.5em 0 -0.4em
    }

    #myHistoryDetailPage dd .slipNum {
        display: block;
        margin-left: 4.5em
    }
}

#myAddressPage .addressChoice .select {
    font-size: 1.3rem;
    width: 15em
}

#myAddressPage .addressChoice .address {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column
}

#myAddressPage .addressChoice .tel {
    margin-top: 0.5em;
    font-size: 1.3rem
}

#myAddressPage .addressChoice .name {
    width: 14em;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 1em 0;
    padding-left: 2em
}

#myAddressPage .addressChoice .btnBox {
    -webkit-flex-direction: column;
    flex-direction: column;
    margin: 14px 1.5em 10px 0
}

#myAddressPage .addressChoice .btnBdr a {
    font-size: 1.2rem;
    padding: .5em 2.8em
}

#myAddressPage .addressChoice .delete {
    font-size: 1.2rem;
    margin-top: .7em
}

#myAddressPage .addressChoice .delete a {
    text-decoration: underline
}

.pc .delete a:hover {
    text-decoration: none
}

@media screen and (max-width: 750px) {
    #myAddressPage .addressChoice .box {
        padding-bottom:3vw
    }

    #myAddressPage .addressChoice .select {
        font-size: 1.4rem;
        width: 100%;
        padding: 5px 10px
    }

    #myAddressPage .addressChoice .name {
        width: 100%;
        padding: 1.1em 3vw 1em
    }

    #myAddressPage .addressChoice .address {
        padding: 0 3vw
    }

    #myAddressPage .addressChoice .btnBox {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-flex-direction: row;
        flex-direction: row;
        margin: 4vw 3vw 0
    }

    #myAddressPage .addressChoice .delete {
        font-size: 1.2rem;
        margin-top: 0;
        margin-left: 2em;
        text-decoration: underline
    }
}

#passwordPage #pageTitle {
    display: none
}

@media screen and (max-width: 460px) {
    #passwordPage input.w50 {
        width:80%
    }
}

#topPage.contents {
    max-width: none;
    padding: 0 0 70px
}

#topPage h2 {
    font-size: 2.4rem;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 40px
}

#topPage #important {
    padding: .74em 1.5em;
    margin: 15px auto;
    color: #D80B0B;
    border: rgba(216,11,11,0.7) 1px solid
}

#topPage #important a {
    color: inherit;
    text-decoration: none
}

#topPage #important a .icon {
    width: 4px;
    vertical-align: .1em;
    margin-left: 1em
}

.pc #topPage #important a:hover {
    text-decoration: underline
}

#topSlide {
    width: 100vw;
    overflow: hidden;
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    opacity: 0
}

#topSlide:before {
    content: "";
    display: block;
    width: 100vw;
    height: 100%;
    background: rgba(255,255,255,0.6);
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(505px, 0);
    z-index: 900
}

#topSlide:after {
    content: "";
    display: block;
    width: 100vw;
    height: 100%;
    background: rgba(255,255,255,0.6);
    position: absolute;
    right: 50%;
    top: 0;
    transform: translate(-505px, 0);
    z-index: 900
}

#topSlide img {
    width: 1000px;
    max-width: 1000px;
    margin: 0 11px;
    text-align: center
}

#topSlide .slick-dots {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 18px;
    padding-bottom: 2px
}

#topSlide .slick-dots li {
    width: 10px;
    height: 10px;
    font-size: 0;
    line-height: 0;
    margin: 0 15px
}

#topSlide .slick-dots button {
    width: 10px;
    height: 10px;
    border: none;
    background: #C2C2C2;
    border-radius: 50%;
    overflow: hidden;
    padding: 0;
    margin: 0
}

#topSlide .slick-dots .slick-active button {
    border: #00BD42 2px solid;
    background: #fff;
    transform: scale(1.1, 1.1)
}

@media screen and (max-width: 1080px) {
    #topSlide img {
        width:100%;
        margin: 0
    }

    #topSlide:before,#topSlide:after {
        content: none
    }
}

@media screen and (max-width: 750px) {
    #topPage.contents {
        padding:0 0 1%
    }

    #topPage #important {
        padding: .7em .6em;
        margin: 0;
        border: none;
        font-size: 1.3rem
    }

    #topPage #important a .icon {
        margin-left: .6em;
        margin-right: -0.7em
    }

    #topSlide {
        margin-bottom: 8vw
    }

    #topSlide .slick-dots {
        margin-top: 12px
    }

    #topSlide .slick-dots li {
        margin: 0 10px
    }
}

@media screen and (max-width: 460px) {
    #topPage h2 {
        font-size:2.2rem;
        margin-bottom: 1.6em
    }
}

#topPage #infoArea {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px 30px;
    position: relative
}

#topPage #infoArea:before {
    content: "";
    width: 150vw;
    height: 100%;
    background: #F8F6EF;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
    z-index: -1
}

#topPage #infoArea h2 {
    font-size: 1.9rem;
    margin-bottom: 24px;
    text-align: left
}

#topPage #infoArea ul {
    margin-left: 22px;
    margin-right: 6.5em
}

#topPage #infoArea ul li {
    display: -webkit-flex;
    display: flex;
    font-size: 1.3rem;
    margin-bottom: 1.2em
}

#topPage #infoArea ul li a {
    color: inherit
}

#topPage #infoArea ul li .date {
    margin-right: 2em
}

#topPage #infoArea .goto {
    font-size: 1.3rem;
    text-align: right;
    margin-top: -.6em
}

#topPage #infoArea .goto img {
    width: 4px;
    vertical-align: 1px;
    margin-right: 8px
}

.pc #topPage #infoArea .goto a:hover {
    text-decoration: underline
}

@media screen and (max-width: 750px) {
    #topPage #infoArea {
        padding:8.4vw 5vw 9.5vw
    }

    #topPage #infoArea h2 {
        text-align: center;
        font-size: 2.0rem
    }

    #topPage #infoArea ul {
        margin-left: 0;
        margin-right: 0
    }

    #topPage #infoArea .goto {
        text-align: center;
        margin: 2.5em auto 0;
        padding: .4em;
        width: 48vw;
        padding-left: 10px;
        display: block;
        border: #BABAB9 1px solid
    }
}

#topPage #rankBox {
    padding: 100px 20px
}

#topPage #rankBox a {
    text-decoration: none;
    color: inherit
}

#topPage #rankBox ul {
    display: -webkit-flex;
    display: flex;
    max-width: 1178px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5rem
}

#topPage #rankBox li {
    flex: 1;
    position: relative;
    width: 18.5%;
    margin-right: 1.875%
}

#topPage #rankBox li:nth-child(2) {
    transition-delay: .2s
}

#topPage #rankBox li:nth-child(3) {
    transition-delay: .4s
}

#topPage #rankBox li:nth-child(4) {
    transition-delay: .5s
}

#topPage #rankBox li:nth-child(5) {
    transition-delay: .6s
}

#topPage #rankBox li:last-child {
    margin-right: 0
}

#topPage #rankBox li .rank {
    width: 31%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10
}

#topPage #rankBox li .img {
    border: #CCC 1px solid;
    width: 100%;
    padding-top: 100%;
    position: relative;
    transition: opacity 0.3s ease-out
}

#topPage #rankBox li .img img {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: 90%;
    max-height: 80%;
    transform: translate(-50%, -50%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

#topPage #rankBox li .name {
    margin-top: .6em;
    transition: opacity 0.3s ease-out
}

.pc #topPage #rankBox a:hover .img {
    opacity: .7
}

.pc #topPage #rankBox a:hover .name {
    opacity: .7
}

@media screen and (max-width: 460px) {
    #topPage #rankBox {
        padding:14vw 5vw 7vw
    }

    #topPage #rankBox ul {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: center;
        justify-content: center;
        font-size: 1.4rem
    }

    #topPage #rankBox li {
        width: 48%;
        flex: none;
        margin-right: 4%;
        margin-bottom: 8%;
        transition-delay: 0s !important
    }

    #topPage #rankBox li:nth-child(2n-1) {
        margin-right: 0
    }

    #topPage #rankBox li:nth-child(1) {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10%
    }

    #topPage #rankBox li .name {
        margin-top: .5em
    }

    #topPage #rankBox li .rank {
        width: 36%
    }
}

#topPage #mitukeruBox {
    max-width: 1000px;
    position: relative;
    padding: 70px 0;
    margin: 0 auto;
    position: relative
}

#topPage #mitukeruBox:before {
    content: "";
    display: block;
    width: 200vw;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
    z-index: -1;
    background: #F9F6F0
}

#topPage #mitukeruBox a {
    color: inherit
}

#topPage #mitukeruBox .box {
    margin-top: 70px;
    position: relative
}

#topPage #mitukeruBox h3 {
    font-size: 1.6rem;
    position: relative;
    margin-bottom: 1em
}

#topPage #mitukeruBox h3:before {
    content: "";
    width: 100%;
    height: 1px;
    background: #D1CEC9;
    display: block;
    position: absolute;
    right: 0;
    top: 56%;
    z-index: -1
}

#topPage #mitukeruBox h3 strong {
    font-size: 1.9rem
}

#topPage #mitukeruBox h3 p {
    display: inline-block;
    background: #F9F6F0;
    padding-right: 8px
}

#topPage #mitukeruBox p.link {
    font-size: 1.3rem;
    text-align: right;
    margin-left: auto;
    display: inline-block;
    position: absolute;
    right: 5px;
    top: 0;
    transform: translate(0, -46%)
}

#topPage #mitukeruBox p.link .icon4 {
    margin-right: 8px
}

#topPage #mitukeruBox p.link a {
    text-decoration: none
}

.pc #topPage #mitukeruBox p.link a:hover {
    text-decoration: underline
}

#topPage #mitukeruBox ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 0 12px
}

#topPage #mitukeruBox .cateBox li {
    flex: 1;
    width: 31.4%;
    margin-right: 2.9%;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.4
}

#topPage #mitukeruBox .cateBox li:last-child {
    margin-right: 0
}

#topPage #mitukeruBox .cateBox li a {
    text-decoration: none;
    height: 7.6em;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    overflow: hidden
}

#topPage #mitukeruBox .cateBox li a .txt {
    display: inline-block;
    position: absolute;
    right: 1.5em;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 10
}

#topPage #mitukeruBox .cateBox li a .bg {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    transition: all 0.2s ease-out
}

#topPage #mitukeruBox .cateBox li a .bg img {
    max-width: 100%;
    max-height: 100%;
    min-width: 100%;
    min-height: 100%
}

#topPage #mitukeruBox .cateBox li:nth-child(1) a {
    color: #fff
}

#topPage #mitukeruBox li.etc {
    font-size: 1.7rem;
    min-width: 2em;
    text-align: center;
    margin: 0
}

#topPage #mitukeruBox .keywordList li.etc {
    min-width: 0
}

.pc #topPage #mitukeruBox .cateBox li a:hover .bg {
    width: 108%;
    height: 108%
}

@media screen and (max-width: 750px) {
    #topPage #mitukeruBox {
        padding:10vw 5%
    }

    #topPage #mitukeruBox ul {
        margin: 6% -3% 0 0
    }

    #topPage #mitukeruBox .box {
        margin-top: 8vw
    }

    #topPage #mitukeruBox .cateBox li {
        width: 32%;
        margin-right: 2%;
        font-size: 1.7rem
    }

    #topPage #mitukeruBox .cateBox li a {
        height: 6em
    }

    #topPage #mitukeruBox .cateBox li a .txt {
        right: .7em
    }
}

@media screen and (max-width: 460px) {
    #topPage #mitukeruBox {
        padding:9vw 5% 14vw
    }

    #topPage #mitukeruBox h2 {
        margin-bottom: -0.6em
    }

    #topPage #mitukeruBox .box {
        margin-top: 15vw;
        padding-bottom: 4em
    }

    #topPage #mitukeruBox h3 {
        text-align: center
    }

    #topPage #mitukeruBox h3 p {
        padding: 0 8px
    }

    #topPage #mitukeruBox p.link {
        right: 50%;
        top: auto;
        bottom: 0;
        transform: translate(50%, 0);
        text-align: center
    }

    #topPage #mitukeruBox p.link a {
        padding: .4em;
        width: 48vw;
        padding-left: 10px;
        display: block;
        border: #BABAB9 1px solid
    }

    #topPage #mitukeruBox .cateBox ul {
        display: block;
        width: 84%;
        margin: 0 auto
    }

    #topPage #mitukeruBox .cateBox li {
        display: block;
        width: 100%;
        margin: 0 auto 3%
    }

    #topPage #mitukeruBox .cateBox li a .txt {
        right: 1.2em
    }

    #topPage #mitukeruBox li.etc {
        font-size: 1.7rem;
        min-width: 1.4em
    }
}

#topPage #guideBox {
    padding: 90px 20px 85px;
    max-width: 860px;
    margin: 0 auto
}

#topPage #guideBox a {
    text-decoration: none;
    color: inherit;
    transition: background 0.3s ease-out
}

#topPage #guideBox .iconGuideList {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center
}

#topPage #guideBox .iconGuideList li {
    width: 240px
}

#topPage #guideBox .iconGuideList li:first-child {
    margin-right: 12px
}

#topPage #guideBox .iconGuideList li a {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    background: #F3F3E9;
    font-size: 1.5rem;
    padding: 1.4em 1em 1em
}

#topPage #guideBox .iconGuideList li img {
    width: 74px
}

#topPage #guideBox .iconGuideList li p {
    margin-top: 1.1em
}

#topPage #guideBox .textGuideList {
    margin: 22px auto 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

#topPage #guideBox .textGuideList li {
    width: calc((100% - 24px)/3);
    margin: 0 12px 10px 0
}

#topPage #guideBox .textGuideList li:nth-child(3n) {
    margin-right: 0
}

#topPage #guideBox .textGuideList li a {
    background: #F3F3E9;
    font-size: 1.4rem;
    padding: 1em 1.4em;
    display: block
}

#topPage #guideBox .textGuideList li img {
    width: 4px;
    vertical-align: 1px;
    margin-right: 12px
}

.pc #topPage #guideBox a:hover {
    background: #F6F6D4
}

@media screen and (max-width: 750px) {
    #topPage #guideBox {
        padding:10% 4% 8%
    }

    #topPage #guideBox .iconGuideList li:first-child {
        margin-right: 2%
    }

    #topPage #guideBox .textGuideList li {
        width: calc((100% - 4%)/3);
        margin: 0 2% 10px 0
    }

    #topPage #guideBox .textGuideList li a {
        padding: 1em .5em 1em 1em
    }

    #topPage #guideBox .textGuideList li img {
        margin-right: 10px
    }
}

@media screen and (max-width: 460px) {
    #topPage #guideBox {
        padding:12% 5% 12%
    }

    #topPage #guideBox h2 {
        margin-bottom: 1.2em
    }

    #topPage #guideBox .iconGuideList {
        display: block;
        padding: 0 5%
    }

    #topPage #guideBox .iconGuideList li {
        width: 100%;
        margin: 0 0 8px !important
    }

    #topPage #guideBox .iconGuideList li a {
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        padding: .8em 1em;
        font-size: 1.54rem
    }

    #topPage #guideBox .iconGuideList li img {
        width: 20%;
        margin-right: .7em
    }

    #topPage #guideBox .iconGuideList li p {
        margin-top: 0
    }

    #topPage #guideBox .textGuideList {
        margin: 15px auto 0
    }

    #topPage #guideBox .textGuideList li {
        width: 49%;
        margin: 0 2% 8px 0 !important
    }

    #topPage #guideBox .textGuideList li:nth-child(2n) {
        margin-right: 0 !important
    }

    #topPage #guideBox .textGuideList li a {
        padding: 1em .2em 1em .8em;
        font-size: 1.32rem
    }

    #topPage #guideBox .textGuideList li img {
        margin-right: .4em
    }
}

#contents {
    padding: 75px 20px 40px;
    position: relative
}

#contents :before {
    content: '';
    display: block;
    width: 200vw;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
    z-index: -1;
    background: url("../img/top/bg_contents.jpg")
}

#contents ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    max-width: 984px;
    margin: 50px auto 0
}

#contents li {
    width: 222px;
    margin: 0 32px 40px 0
}

#contents li:nth-child(4n) {
    margin-right: 0px
}

#contents li a {
    text-decoration: none;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1.4;
    display: block;
    position: relative;
    transition: all 0.2s ease-out
}

#contents li .img {
    width: 100%;
    padding-top: 66%;
    position: relative;
    border: #E0DDD8 1px solid;
    background: #fff;
    margin-bottom: .9em;
    overflow: hidden
}

#contents li .img img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%
}

#contents li .ribon {
    font-size: 1.2rem;
    color: #fff;
    line-height: 1.0;
    height: 2em;
    padding: 0 1em;
    -webkit-flex: flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    position: absolute;
    left: -3px;
    top: -3px;
    z-index: 10;
    font-weight: bold
}

#contents li.recepi .ribon {
    background: #FAB076
}

#contents li.blog .ribon {
    background: #A9C8F2
}

#contents li.teikiGuide img {
    width: 90%
}

#contents li.asuSuma img {
    width: 76%
}

#contents li.blog img {
    width: 70%
}

#contents li. Seikatu img {
    width: 64%
}

.pc #contents li a:hover {
    opacity: .8
}

@media screen and (max-width: 750px) {
    #contents {
        padding:9% 6% 2%
    }

    #contents ul {
        margin: 5% 0 0
    }

    #contents li {
        width: 47%;
        margin: 0 6% 8% 0
    }

    #contents li:nth-child(2n) {
        margin-right: 0 !important
    }

    #contents li a {
        font-size: 1.3rem
    }

    #contents li .ribon {
        font-size: 1.1rem;
        height: 1.8em;
        padding: 0 0.7em
    }

    #contents li .img {
        margin-bottom: .7em
    }

    #contents li.teikiGuide img {
        width: 105%
    }

    #contents li.nandemoQA img {
        width: 105%
    }

    #contents li. Seikatu img {
        width: 70%
    }
}

#itemsListPage .itemsCount {
    text-align: right;
    margin-bottom: 1em;
    margin-top: 2em
}

#itemsListPage .itemsCount strong {
    font-weight: bold;
    font-size: 1.8rem;
    margin: 0 .2em
}

#itemsListPage .itemsList {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

#itemsListPage .itemsList li {
    width: 23.8%;
    border: #ccc 1px solid;
    margin: 0 1.6% 14px 0;
    transition: opacity 0.3s ease-out
}

#itemsListPage .itemsList li:nth-child(4n) {
    margin-right: 0
}

#itemsListPage .itemsList li a {
    display: block;
    color: inherit;
    text-decoration: none;
    padding: 15px 15px 10px
}

#itemsListPage .itemsList li .img {
    width: 100%;
    padding-top: 71.15%;
    position: relative
}

#itemsListPage .itemsList li .img img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

#itemsListPage .itemsList li .name {
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: bold;
    margin: 2em 0 .6em
}

#itemsListPage .itemsList li .txt {
    line-height: 1.5;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

#itemsListPage .itemsList li .price {
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: .7em
}

#itemsListPage .itemsList li .price strong {
    font-size: 1.6rem;
    font-weight: bold;
    margin-right: .1em
}

.pc #itemsListPage .itemsList li:hover {
    opacity: .7
}

@media all and (-ms-high-contrast: none) {
    #itemsListPage .itemsList li .txt {
        height: 3em;
        overflow: hidden
    }
}

@media screen and (max-width: 750px) {
    #itemsListPage .itemsCount {
        margin-top:2em;
        margin-bottom: .4em
    }

    #itemsListPage .itemsList li {
        width: 32%;
        margin: 0 2% 3% 0
    }

    #itemsListPage .itemsList li:nth-child(4n) {
        margin-right: 2%
    }

    #itemsListPage .itemsList li:nth-child(3n) {
        margin-right: 0
    }

    #itemsListPage .itemsList li a {
        padding: 1em 1em 0.8em
    }

    #itemsListPage .itemsList li .name {
        font-size: 1.5rem;
        margin: 1.4em 0 .5em
    }

    #itemsListPage .itemsList li .txt {
        font-size: 1.3rem
    }
}

@media screen and (max-width: 460px) {
    #itemsListPage .itemsList li {
        width:49%;
        margin: 0 2% 3% 0
    }

    #itemsListPage .itemsList li:nth-child(4n) {
        margin-right: 2%
    }

    #itemsListPage .itemsList li:nth-child(3n) {
        margin-right: 2%
    }

    #itemsListPage .itemsList li:nth-child(2n) {
        margin-right: 0
    }

    #itemsListPage .itemsList li a {
        padding: 1em 0.6em 0.8em
    }

    #itemsListPage .itemsList li .img {
        padding-top: 90%
    }
}

#itemDetailPage .sliderWrap {
    opacity: 0;
    float: left;
    width: 452px;
    margin-right: 40px
}

#itemDetailPage .sliderWrap .regular {
    border: #ccc 1px solid
}

#itemDetailPage .sliderWrap .regular .img {
    width: 100%;
    padding-top: 100%;
    position: relative;
    overflow: hidden;
    display: block !important
}

#itemDetailPage .sliderWrap .regular img,#itemDetailPage .sliderWrap .thum img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

#itemDetailPage .sliderWrap .thum {
    margin: 16px -3px 0
}

#itemDetailPage .sliderWrap .thum .slick-slide {
    margin: 0;
    width: calc((100% - 30px)/5) !important;
    margin: 0 3px 6px;
    cursor: pointer
}

#itemDetailPage .sliderWrap .thum .slick-track {
    transform: translate3d(0, 0, 0) !important;
    width: 100% !important
}

#itemDetailPage .sliderWrap .thum .img {
    width: 100%;
    padding-top: 100%;
    position: relative;
    border: #fff 1px solid;
    overflow: hidden;
    display: block !important
}

#itemDetailPage .sliderWrap .thum .slick-current .img {
    border-color: #00BD42
}

#itemDetailPage .grayBtn {
    background: #F2F2F2;
    padding: 10px 20px;
    font-size: 1.3rem;
    margin-top: 25px
}

#itemDetailPage .grayBtn span {
    background: #CCCCC5;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translate(0, -50%)
}

#itemDetailPage .grayBtn img {
    width: 16px
}

#itemDetailPage .grayBtn p {
    max-width: 270px;
    margin: 0 auto
}

#itemDetailPage .grayBtn p:nth-child(2) {
    margin-top: 5px
}

#itemDetailPage .grayBtn a {
    border: #B8B8B8 1px solid;
    background: #fff;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    height: 3.1em;
    text-decoration: none;
    color: inherit;
    position: relative;
    padding-left: 30px;
    transition: all 0.2s ease-out
}

#itemDetailPage .grayBtn .zumi a {
    background: rgba(204,204,197,0.35);
    color: rgba(0,0,0,0.7)
}

#itemDetailPage .teikiNara {
    margin-top: 45px
}

#itemDetailPage .teikiNara .btn a {
    border: #D80B0B 1px solid;
    color: #D80B0B;
    font-size: 1.7rem;
    display: block;
    text-decoration: none;
    position: relative;
    padding: .9em 1em;
    text-align: center;
    transition: all 0.2s ease-out
}

#itemDetailPage .teikiNara .btn a img {
    width: 6px;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translate(-50%, -50%)
}

#itemDetailPage .teikiNara .txt {
    text-align: center;
    margin-top: 1.1em;
    font-size: 1.3rem
}

#itemDetailPage .setumeiBox {
    margin-left: 492px
}

#itemDetailPage .setumeiBox .setumeiList li {
    border-top: #ccc 1px solid;
    font-size: 1.3rem;
    line-height: 1.5;
    margin-top: .7em;
    padding: .7em 3px 0
}

#itemDetailPage h2.subTitle {
    font-size: 1.8rem;
    line-height: 1.4;
    margin-bottom: .5em
}

#itemDetailPage #itemName {
    font-size: 2.6rem;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 1.1em
}

#itemDetailPage h2.midashi {
    font-size: 2.0rem;
    line-height: 1.5;
    margin-bottom: 1em
}

#itemDetailPage .courseBox {
    margin-top: 54px
}

#itemDetailPage .courseBox .cName {
    font-size: 2.1rem;
    font-weight: bold;
    line-height: 1.4;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 4px .3em;
    border-bottom: rgba(0,0,0,0.7) 1px solid;
    margin-bottom: 15px
}

#itemDetailPage .courseBox .cName span.teiki {
    background: #00BD42;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.4;
    display: inline-block;
    padding: .3em .9em;
    margin-right: 1.1em;
    margin-left: -4px
}

#itemDetailPage .courseBox .box {
    display: -webkit-flex;
    display: flex;
    padding-left: 5px
}

#itemDetailPage .courseBox .box ul {
    width: 13em;
    margin-left: 2.6em
}

#itemDetailPage .courseBox .box .leftArea {
    flex: 1
}

#itemDetailPage .courseBox .box .leftArea .txt {
    margin-bottom: 1em
}

#itemDetailPage .courseBox .box li {
    border: rgba(216,11,11,0.8) 1px solid;
    line-height: 1.4;
    padding: .2em .8em;
    width: 100%;
    text-align: center;
    margin-bottom: 5px
}

#itemDetailPage .courseBox .box li strong {
    font-size: 1.8rem
}

#itemDetailPage .courseBox .priceBox {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center
}

#itemDetailPage .courseBox .priceBox .atari {
    font-size: 1.1rem;
    line-height: 1.0;
    padding: 0.6em 0.5em;
    text-align: center;
    width: 7em;
    border: rgba(0,0,0,0.4) 1px solid
}

#itemDetailPage .courseBox .priceBox .block {
    margin-left: 1em;
    flex: 1
}

#itemDetailPage .courseBox .priceBox .block div {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center
}

#itemDetailPage .courseBox .priceBox .block .type {
    font-size: 1.2rem;
    margin-right: 1.3em
}

#itemDetailPage .courseBox .priceBox .block .price {
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.0
}

#itemDetailPage .courseBox .priceBox .block .price strong {
    font-size: 2.6rem;
    margin-right: 2px
}

#itemDetailPage .courseBox .priceBox .block .tujyo {
    margin-bottom: 0.4em
}

#itemDetailPage .courseBox .priceBox .block .tujyo .price {
    font-size: 1.4rem;
    font-weight: normal;
    position: relative
}

#itemDetailPage .courseBox .priceBox .block .tujyo .price:before {
    content: "";
    display: block;
    width: 104%;
    height: 1px;
    position: absolute;
    left: -2%;
    top: 54%;
    background: rgba(0,0,0,0.7)
}

#itemDetailPage .courseBox .priceBox .block .tujyo .price strong {
    font-size: 1.8rem;
    font-weight: normal
}

#itemDetailPage .courseBox .alertText {
    font-size: 1.2rem;
    margin: 1.5em 0 1.2em
}

#itemDetailPage .courseBox .alertText p.kome {
    margin-top: 3px
}

#itemDetailPage .orderBox {
    background: #F5F2EB;
    padding: 12px;
    margin-top: 12px
}

#itemDetailPage .orderBox div {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center
}

#itemDetailPage .orderBox .selectTtl {
    font-size: 1.3rem;
    margin-right: -0.8em
}

#itemDetailPage .orderBox select {
    font-size: 1.6rem;
    margin: 0 1.2em
}

#itemDetailPage .cartBtn a {
    border: #00BD42 1px solid;
    background: #fff;
    font-size: 1.5rem;
    line-height: 1.1;
    color: #00BD42;
    text-decoration: none;
    display: block;
    width: 288px;
    text-align: center;
    padding: .9em;
    font-weight: bold;
    transition: all 0.3s ease-out
}

#itemDetailPage .tujyo .cartBtn a {
    border: rgba(0,0,0,0.7) 1px solid;
    color: #000
}

#itemDetailPage .itemInfoBox {
    max-width: 1060px;
    margin: 85px auto 0;
    border-bottom: #B3B3B3 1px solid
}

#itemDetailPage .itemInfoBox .infoTitle {
    border-top: #B3B3B3 1px solid;
    font-size: 1.8rem;
    line-height: 1.5;
    padding: .82em 1em;
    padding-right: 50px;
    position: relative;
    transition: all 0.3s ease-out;
    cursor: pointer
}

#itemDetailPage .itemInfoBox .infoTitle.open {
    background: rgba(204,204,204,0.2)
}

#itemDetailPage .itemInfoBox .arrow {
    width: 19px;
    line-height: 0;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0, -50%)
}

#itemDetailPage .itemInfoBox .open .arrow {
    transform: translate(0, -50%) rotate(-180deg)
}

#itemDetailPage .itemInfoBox .infoBox {
    padding: 1.5em 2em 2.2em
}

#itemDetailPage .itemInfoBox #faqWrap {
    padding: 2em 3em 2.2em
}

#itemDetailPage .itemInfoBox #faqWrap .icon {
    width: 20px;
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translate(-50%, -50%)
}

#itemDetailPage .itemInfoBox .question {
    background: #FCF6E8;
    font-size: 1.6rem;
    line-height: 1.5;
    padding: 1.2em 60px;
    position: relative;
    cursor: pointer;
    margin-bottom: 6px;
    transition: all 0.3s ease-out
}

#itemDetailPage .itemInfoBox .answer {
    padding: 1.4em 60px 2em;
    position: relative;
    font-size: 1.5rem
}

#itemDetailPage .itemInfoBox .answer .icon {
    top: 2.1em !important
}

#itemDetailPage #htmlArea {
    margin: 100px auto 0;
    max-width: 1060px
}

#itemDetailPage #htmlArea img {
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.pc #itemDetailPage .sliderWrap .thum .img:hover {
    opacity: 0.8
}

.pc #itemDetailPage .grayBtn a:hover {
    opacity: .7
}

.pc #itemDetailPage #teikiNara .btn a:hover {
    background: rgba(216,11,11,0.05)
}

.pc #itemDetailPage .orderBox .cartBtn a:hover {
    background: #00BD42;
    color: #fff
}

.pc #itemDetailPage .tujyo .cartBtn a:hover {
    background: rgba(0,0,0,0.85);
    color: #fff
}

.pc #itemDetailPage .itemInfoBox .infoTitle:hover {
    background: rgba(204,204,204,0.2)
}

.pc #itemDetailPage .itemInfoBox .question:hover {
    background: #FCF0D4
}

@media screen and (max-width: 750px) {
    #itemDetailPage h2.subTitle {
        font-size:1.5rem;
        line-height: 1.5;
        margin-bottom: .6em
    }

    #itemDetailPage #itemName {
        font-size: 2.2rem;
        margin-bottom: 0.7em
    }

    #itemDetailPage .sliderWrap {
        float: none;
        width: 100%;
        margin-right: 0
    }

    #itemDetailPage .sliderWrap .thum {
        margin: 10px -3px 0
    }

    #itemDetailPage .sliderWrap .thum .slick-slide {
        margin: 0 3px 4px
    }

    #itemDetailPage .grayBtn {
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translate(-50%, 0);
        padding: 13px 4%;
        font-size: 1.3rem;
        margin-top: 5%
    }

    #itemDetailPage .grayBtn span {
        width: 2.4em;
        height: 2.4em;
        left: .8em
    }

    #itemDetailPage .grayBtn img {
        width: 1.4em
    }

    #itemDetailPage .grayBtn p:nth-child(2) {
        margin-top: 5px
    }

    #itemDetailPage .grayBtn a {
        padding-left: 2.7em;
        height: 3.2em
    }

    #itemDetailPage .setumeiBox {
        margin: 9% 0 0
    }

    #itemDetailPage .setumeiBox .setumeiList li {
        border-top: #ccc 1px solid;
        font-size: 1.3rem;
        line-height: 1.5;
        margin-top: .7em;
        padding: .7em 3px 0
    }

    #itemDetailPage .teikiNara {
        margin-top: 8%;
        margin-bottom: 8%
    }

    #itemDetailPage .teikiNara .btn a {
        font-size: 1.6rem;
        text-align: left;
        padding: 1em .9em
    }

    #itemDetailPage .teikiNara .btn a img {
        width: 6px;
        right: 10px
    }

    #itemDetailPage .teikiNara .txt {
        text-align: left;
        margin-top: 1em;
        font-size: 1.3rem
    }

    #itemDetailPage .courseBox {
        margin-top: 8%;
        border: rgba(0,0,0,0.7) 1px solid;
        position: relative
    }

    #itemDetailPage .courseBox .cName {
        font-size: 1.84rem;
        display: block;
        padding: 0.74em 0 0.64em 0.45em;
        margin: 0;
        margin-bottom: 0;
        text-align: center
    }

    #itemDetailPage .courseBox .cName span.teiki {
        font-size: 1.2rem;
        display: block;
        padding: .3em .9em;
        margin: 0 auto;
        width: 5em;
        text-align: center;
        position: absolute;
        right: -3%;
        top: 0;
        transform: translate(0, -54%) rotate(10deg)
    }

    #itemDetailPage .courseBox .box {
        padding: 3% 3%
    }

    #itemDetailPage .courseBox .alertText {
        font-size: 1.1rem;
        margin: 0.6em 0 1.2em;
        padding: 0 3%
    }

    #itemDetailPage .courseBox .alertText p.kome {
        margin-top: 3px
    }

    #itemDetailPage .courseBox .alertText .telLink {
        white-space: nowrap
    }

    #itemDetailPage .orderBox {
        padding: 13px 12px;
        margin-top: 0
    }

    #itemDetailPage .cartBtn a {
        margin-top: 11px;
        padding: 1.1em
    }

    #itemDetailPage .itemInfoBox {
        margin: 10% auto 0
    }

    #itemDetailPage .itemInfoBox .infoTitle {
        font-size: 1.6rem;
        padding: .9em .5em;
        padding-right: 28px
    }

    #itemDetailPage .itemInfoBox .arrow {
        width: 15px;
        right: 8px
    }

    #itemDetailPage .itemInfoBox .infoBox {
        padding: 1.2em .2em 1.8em
    }

    #itemDetailPage .itemInfoBox #faqWrap {
        padding: 1.5em .4em
    }

    #itemDetailPage .itemInfoBox #faqWrap .icon {
        display: none
    }

    #itemDetailPage .itemInfoBox .question {
        font-size: 1.5rem;
        padding: 1em 12px;
        padding-right: 28px;
        margin-bottom: 5px
    }

    #itemDetailPage .itemInfoBox .answer {
        padding: 1em 12px 1.5em;
        font-size: 1.4rem
    }

    #itemDetailPage #htmlArea {
        margin: 9% auto 0
    }
}

@media screen and (max-width: 460px) {
    #itemDetailPage .teikiNara {
        margin-top:12%;
        margin-bottom: 13%
    }

    #itemDetailPage .cartArea {
        margin: 0 2%
    }

    #itemDetailPage .courseBox {
        margin-top: 12%
    }

    #itemDetailPage .courseBox .box {
        padding: 4% 3%;
        -webkit-flex-direction: column;
        flex-direction: column
    }

    #itemDetailPage .courseBox .box ul {
        width: 100%;
        margin: 7% 0 0;
        padding: 0 4%
    }

    #itemDetailPage .courseBox .priceBox .atari {
        padding: 0.6em 0.5em;
        text-align: center;
        width: 2.2em
    }

    #itemDetailPage .itemInfoBox {
        margin: 16% auto 0
    }

    #itemDetailPage #htmlArea {
        margin: 15% auto 0;
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translate(-50%, 0)
    }
}

.cloudPage #pageTitle {
    text-align: left;
    margin-bottom: 1em
}

.cloudPage .w1000 {
    padding: 20px 0 0
}

.cloudPage .topTxt {
    margin-bottom: 3em
}

#purposePage .mokutekiList {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -2%
}

#purposePage .mokutekiList a {
    color: inherit
}

#keywordPage .ulWrap {
    border: #ccc 1px solid;
    padding: 1.7em 0 1.5em 2em
}

#keywordPage .keywordList {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

#keywordPage .keywordList a {
    color: inherit
}

#seibunPage .pageIndex {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    background: #F4F4F4;
    font-size: 1.5rem;
    line-height: 1.4;
    padding: 9px 18px;
    margin-bottom: 4.4em
}

#seibunPage .pageIndex li {
    flex: 1
}

#seibunPage .pageIndex li:not(:first-child) {
    margin-left: 4px
}

#seibunPage .pageIndex li a {
    border: rgba(0,189,66,0.5) 1px solid;
    background: #fff;
    color: inherit;
    text-decoration: none;
    padding: 0.4em 1em;
    border-radius: 2em;
    display: block;
    text-align: center;
    transition: all 0.3s ease-out
}

#seibunPage h2 {
    font-size: 1.7rem;
    font-weight: bold;
    line-height: 1.0;
    border: #ccc 1px solid;
    padding: 8px 10px 7px;
    margin: 3em 0 1.2em
}

#seibunPage .seibunList2 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 20px;
    margin-right: -1em
}

#seibunPage .seibunList2 li {
    width: 25%;
    padding-right: 1em;
    margin-bottom: .7em
}

#seibunPage .seibunList2 a {
    color: inherit
}

.pc #seibunPage .pageIndex li a:hover {
    background: rgba(0,189,66,0.08)
}

@media screen and (max-width: 750px) {
    .cloudPage #pageTitle {
        margin-top:0;
        margin-bottom: .7em
    }

    .cloudPage .w1000 {
        padding: 2vw 0 0
    }

    .cloudPage .topTxt {
        margin-bottom: 2em
    }

    #keywordPage .ulWrap {
        padding: 1em 0 1em 1.5em
    }

    #keywordPage .keywordList {
        margin-right: -0.5em
    }

    #seibunPage .seibunList2 li {
        width: 33.3%
    }
}

@media screen and (max-width: 460px) {
    #seibunPage .pageIndex {
        width:100vw;
        position: relative;
        left: 50%;
        transform: translate(-50%, 0);
        padding: 8px 3vw;
        margin-bottom: 3em
    }

    #seibunPage .pageIndex li:not(:first-child) {
        margin-left: 3px
    }

    #seibunPage .pageIndex li a {
        padding: 0.4em .4em;
        border-radius: 2em
    }

    #seibunPage h2 {
        font-size: 1.6rem;
        padding: 8px 10px 7px;
        margin: 2.8em 0 1.1em
    }

    #seibunPage .seibunList2 {
        padding-left: 2vw
    }

    #seibunPage .seibunList2 li {
        width: 50%
    }
}

#contactPage #pageTitle2 {
    font-size: 2.4rem;
    line-height: 1.3;
    text-align: center;
    margin: 3.2em 0 1.8em;
    padding-top: 1em
}

#contactPage #pageTitle3 {
    font-size: 2.4rem;
    line-height: 1.3;
    text-align: center;
    margin: 0 0 2em
}

#contactPage #pageTitle2+p {
    line-height: 1.8
}

#contactPage .topTxt {
    margin: 4em 0 3em;
    text-align: center
}

#contactPage .conBoxWrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 940px;
    margin: 0 auto
}

#contactPage .conBox {
    flex: 1;
    border: #E0E0E0 2px solid;
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.4rem;
    padding: 22px 20px 14px;
    border-radius: 6px
}

#contactPage .conBox h2 {
    font-size: 1.8rem;
    font-weight: bold
}

#contactPage .conBox .img {
    width: 60%;
    max-width: 300px;
    margin: 10px auto 17px
}

#contactPage .boxFAX {
    margin-left: 20px
}

#contactPage #contactKind {
    width: 60%
}

#contactPage #tdTel td {
    padding: 20px
}

#contactPage #tdTel .conBox .img {
    margin-bottom: 0
}

#contactPage .douLink {
    text-align: center;
    margin: 3em 0 0
}

#contactPage .thanksBox .thanksTxt {
    text-align: left;
    margin-top: 2.6em
}

@media screen and (max-width: 750px) {
    #contactPage {
        padding-top:6%
    }

    #contactPage #pageTitle {
        margin-top: 0
    }

    #contactPage #pageTitle2 {
        font-size: 2.2rem;
        margin: 2.4em 0 1.6em;
        padding-top: 1em
    }

    #contactPage #pageTitle3 {
        font-size: 2.2rem;
        text-align: center;
        margin: 0 0 1.5em
    }

    #contactPage #pageTitle2+p {
        line-height: 1.7
    }

    #contactPage .topTxt {
        margin: 2em 0;
        text-align: left
    }

    #contactPage .conBoxWrap {
        display: block;
        width: auto;
        margin: 0 3vw
    }

    #contactPage .conBox {
        padding: 6vw 4vw 4vw;
        font-size: 1.2rem
    }

    #contactPage .conBox p a {
        display: inline-block;
        white-space: nowrap
    }

    #contactPage .conBox h2 {
        font-size: 1.5rem;
        margin-bottom: .8em
    }

    #contactPage .conBox .img {
        width: 80%;
        max-width: 300px;
        margin: 0 auto 5.1vw
    }

    #contactPage .boxFAX {
        margin: 4vw auto 0
    }

    #contactPage #contactKind {
        width: 100%
    }

    #contactPage #tdTel td {
        padding: 5vw 2vw
    }

    #contactPage #tdTel .conBox h2 {
        font-size: 1.5rem;
        margin-bottom: .8em
    }

    #contactPage .douLink {
        margin: 2em 0 0
    }

    #contactPage .douiTxt label {
        text-align: left
    }

    #contactPage .douiTxt .hissu {
        display: block;
        margin: 0 0 -1.5em 0
    }
}

@media screen and (max-width: 460px) {
    #contactPage {
        padding-top:8%
    }
}

#infoPage .infoList {
    border-top: #C9C9C9 1px solid;
    margin-top: 50px
}

#infoPage .infoList li {
    border-bottom: #C9C9C9 1px solid
}

#infoPage .infoList li a {
    text-decoration: none;
    color: inherit;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 1em;
    transition: background 0.15s ease-out, color 0.15s ease-out
}

#infoPage .infoList li .date {
    font-size: 1.3rem;
    width: 9em
}

#infoPage .infoList li .title {
    flex: 1
}

.pc #infoPage .infoList li a:hover {
    background: rgba(0,189,66,0.04);
    color: #00A339
}

#infoDetailPage h1 {
    border-bottom: #C9C9C9 1px solid;
    font-size: 2.4rem;
    line-height: 1.4;
    padding: 1em 12px 0.9em
}

#infoDetailPage h1 .date {
    font-size: 1.4rem;
    margin-bottom: 1.2em
}

#infoDetailPage .kijiBox {
    padding: 0 12px;
    margin: 40px auto 70px;
    line-height: 1.8
}

#infoDetailPage .kijiBox p {
    margin-bottom: 3em
}

#infoDetailPage .kijiBox img {
    max-width: 100%;
    max-height: 600px
}

@media screen and (max-width: 750px) {
    #infoPage .infoList {
        margin-top:9vw
    }

    #infoPage .infoList li a {
        padding: .9em 1vw 1.1em;
        transition: background 0.15s ease-out, color 0.15s ease-out
    }

    #infoPage .infoList li .date {
        font-size: 1.3rem;
        width: 100%;
        margin-bottom: 0.4em
    }

    #infoPage .infoList li .title {
        line-height: 1.5
    }

    #infoDetailPage h1 {
        font-size: 2rem;
        line-height: 1.5;
        padding: 0 0 0.8em
    }

    #infoDetailPage h1 .date {
        font-size: 1.3rem;
        margin-bottom: 0.8em
    }

    #infoDetailPage .kijiBox {
        padding: 0 1vw;
        margin: 7vw auto 12vw;
        line-height: 1.7
    }

    #infoDetailPage .kijiBox p {
        margin-bottom: 2.2em
    }

    #infoDetailPage .kijiBox img {
        max-width: 100%;
        max-height: 70vh
    }
}

#guideTopPage .dlWrap {
    -webkit-flex: flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 75px;
    margin-bottom: -40px
}

#guideTopPage .dlWrap a {
    text-decoration: none;
    color: inherit
}

#guideTopPage dl {
    width: 31.2%;
    margin: 0 3.2% 50px 0
}

#guideTopPage dl:nth-child(3n) {
    margin-right: 0
}

#guideTopPage dt {
    margin-bottom: 1.4em;
    letter-spacing: .07em
}

#guideTopPage dt a {
    background: #F3F3E9;
    font-size: 1.5rem;
    font-weight: bold;
    padding: .8em 18px;
    display: block;
    position: relative;
    transition: opacity 0.1s ease-out
}

#guideTopPage dt a:after {
    content: url("../img/cmn/allow.svg");
    display: block;
    width: 6px;
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translate(0, -50%)
}

#guideTopPage dd {
    margin: .6em 0 0 18px;
    position: relative;
    padding-left: 1.2em;
    line-height: 1.46
}

#guideTopPage dd:before {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    overflow: hidden;
    background: #00A339;
    position: absolute;
    left: .3em;
    top: .45em
}

.pc #guideTopPage dt a:hover {
    opacity: .7
}

.pc #guideTopPage dd a:hover {
    text-decoration: underline
}

@media screen and (max-width: 750px) {
    #guideTopPage .dlWrap {
        margin-top:8vw;
        margin-bottom: -5vw
    }

    #guideTopPage dl {
        width: 48%;
        margin: 0 4% 7vw 0
    }

    #guideTopPage dl:nth-child(3n) {
        margin-right: 4%
    }

    #guideTopPage dl:nth-child(2n) {
        margin-right: 0
    }
}

@media screen and (max-width: 460px) {
    #guideTopPage .dlWrap {
        display:block;
        margin: 12vw 3vw -8vw
    }

    #guideTopPage dl {
        width: 100%;
        margin: 0 0 11vw 0 !important
    }
}

.guideWrap {
    margin: 70px 0 0;
    -webkit-flex: flex;
    display: flex
}

.guideWrap .sideMenu {
    width: 220px;
    margin-right: 60px
}

.guideWrap .sideMenu a {
    text-decoration: none;
    color: inherit
}

.guideWrap .sideMenu dt {
    margin-bottom: 8px
}

.guideWrap .sideMenu dt.visit,.guideWrap .sideMenu dt a {
    background: #F3F3E9;
    font-weight: bold;
    padding: .7em 15px;
    display: block;
    position: relative;
    transition: opacity 0.1s ease-out
}

.guideWrap .sideMenu dt a:after {
    content: url("../img/cmn/allow.svg");
    display: block;
    width: 5px;
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translate(0, -50%)
}

.guideWrap .sideMenu dt.visit {
    color: #00A339
}

.guideWrap .sideMenu dd {
    font-size: 1.3rem;
    margin: .7em 0 0 15px;
    position: relative;
    padding-left: 1.2em;
    line-height: 1.46
}

.guideWrap .sideMenu dd:first-of-type {
    margin-top: 1.2em
}

.guideWrap .sideMenu dd:last-of-type {
    margin-bottom: 1.9em
}

.guideWrap .sideMenu dd:before {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    overflow: hidden;
    background: #00A339;
    position: absolute;
    left: .3em;
    top: .45em
}

.guideWrap .mainArea {
    flex: 1
}

.guideWrap .lineH2 {
    font-size: 1.7rem;
    font-weight: bold;
    margin: 3em 0 1.2em;
    padding-top: 1em;
    line-height: 1.5
}

.guideWrap .lineH2.first {
    margin-top: 0;
    padding-top: 0
}

.guideWrap .lineH2 p {
    padding: 0 15px;
    position: relative
}

.guideWrap .lineH2 p:before {
    content: "";
    display: block;
    width: 3px;
    height: calc(100% - 4px);
    background: #00BD42;
    position: absolute;
    left: 0;
    top: 1px
}

.guideWrap .atBox {
    background: #F9F6F0;
    font-size: 1.3rem;
    padding: 1.5em 1.8em;
    margin: 1.5em 0 0
}

.guideWrap .atBox .title {
    font-weight: bold;
    margin-bottom: 1em
}

.guideWrap .rightImgBox {
    -webkit-flex: flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    margin-top: 36px
}

.guideWrap .rightImgBox .block {
    flex: 1;
    margin-right: 40px;
    line-height: 1.7
}

.guideWrap .rightImgBox p.img {
    width: 50%;
    border: #B3B3B3 1px solid
}

.guideWrap .rightImgBox div.img {
    width: 50%
}

.guideWrap .rightImgBox div.img p {
    border: #B3B3B3 1px solid
}

.guideWrap .rightImgBox h3 {
    font-size: 1.7rem;
    font-weight: bold;
    margin: .5em 0 1.4em
}

.guideWrap .numLink {
    max-width: 410px;
    margin-top: 15px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.pc .guideWrap .sideMenu dt a:hover {
    opacity: .7
}

.pc .guideWrap .sideMenu dd a:hover {
    text-decoration: underline
}

@media screen and (max-width: 1160px) {
    .guideWrap .sideMenu {
        margin-right:40px
    }

    .guideWrap .mainArea {
        margin-right: 20px
    }
}

@media screen and (max-width: 750px) {
    .guideWrap {
        margin:8vw 0 0;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse
    }

    .guideWrap .sideMenu {
        width: auto;
        margin: 12vw 3vw -2vw
    }

    .guideWrap .sideMenu dl {
        -webkit-flex: flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: space-between;
        justify-content: space-between
    }

    .guideWrap .sideMenu dt {
        flex: 0 48.6%;
        margin-bottom: 2%
    }

    .guideWrap .sideMenu dd {
        display: none
    }

    .guideWrap .mainArea {
        margin-right: 0
    }

    .guideWrap .rightImgBox {
        margin-top: 10vw
    }

    .guideWrap .rightImgBox h3 {
        font-size: 1.6rem;
        font-weight: bold;
        margin: .5em 0 1.1em
    }

    .guideWrap .rightImgBox:first-of-type {
        margin-top: 5vw
    }

    .guideWrap .rightImgBox .block {
        flex: none;
        width: 100%;
        margin-right: 0;
        line-height: 1.7
    }

    .guideWrap .rightImgBox p.img {
        width: 84%;
        margin: 5% auto 0
    }
}

@media screen and (max-width: 460px) {
    .guideWrap {
        margin:13vw 0 0
    }

    .guideWrap .sideMenu {
        margin: 16vw 0 -6vw
    }

    .guideWrap .sideMenu dl {
        font-size: 1.2rem
    }

    .guideWrap .sideMenu dt {
        flex: 0 49%;
        margin-bottom: 2%
    }

    .guideWrap .sideMenu dt a:after {
        right: .7em
    }

    .guideWrap .sideMenu dt.visit,.guideWrap .sideMenu dt a {
        padding: .7em .6em
    }
}

#guideTeikiPage .cachTxt {
    max-width: 510px
}

#guideTeikiPage .h2under {
    font-size: 1.5rem;
    letter-spacing: 0.03em;
    margin: 3.6em 0 2.2em
}

#guideTeikiPage .topTxt {
    line-height: 1.7
}

#guideTeikiPage .topTxt strong {
    color: #00BD42;
    font-weight: bold
}

#guideTeikiPage img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

#guideTeikiPage .teikiImg {
    max-width: 748px;
    margin: 20px 0 0
}

#guideTeikiPage .teikiImg2 {
    max-width: 836px;
    margin: 30px -16px 0 0
}

#guideTeikiPage .teikiImg3 {
    margin: 30px 0 0
}

#guideTeikiPage .point3Wrap .block {
    -webkit-flex: flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    margin-top: 30px
}

#guideTeikiPage .point3Wrap .block .point {
    width: 10em;
    padding: 0.8em 1.5em;
    border-radius: 4px;
    border: #EE4F19 1px solid;
    margin-right: 2em
}

#guideTeikiPage .point3Wrap .block .rightbox {
    flex: 1
}

#guideTeikiPage .point3Wrap .block .title {
    font-size: 1.7rem;
    line-height: 1.5;
    font-weight: bold;
    color: #F75B25;
    margin: .4em 0 .7em
}

@media screen and (max-width: 460px) {
    #guideTeikiPage .h2under {
        font-size:1.4rem;
        line-height: 1.7;
        letter-spacing: 0.02em;
        margin: 3.4em 0 2em
    }

    #guideTeikiPage .teikiImg2 {
        margin: 30px 0 0 0
    }

    #guideTeikiPage .point3Wrap .block {
        display: block;
        margin: 9vw 2vw 0
    }

    #guideTeikiPage .point3Wrap .block .point {
        width: 100%;
        padding: 0;
        border: none;
        line-height: 1.0
    }

    #guideTeikiPage .point3Wrap .block .point img {
        width: 22%;
        max-width: 76px
    }

    #guideTeikiPage .point3Wrap .block .title {
        font-size: 1.8rem;
        margin: .3em 0 .7em
    }
}

#guideOrderPage .telBox {
    padding-left: 16px
}

#guideOrderPage .telBox h3 {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: .9em;
    margin-left: -16px
}

#guideOrderPage .telBox .bdBox {
    border: #b3b3b3 1px solid;
    padding: 1.3em 1.6em;
    border-radius: 8px;
    margin-bottom: 1em
}

#guideOrderPage .telBox .bdBox h4 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1em
}

#guideDeliveryPage h3 {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: .6em
}

#guideMypagePage h3 {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: .5em;
    margin-top: 2.2em
}

#guideMypagePage .teikiKakuninBox {
    background: rgba(248,249,209,0.6);
    padding: 1.9em 1.8em;
    margin-top: 3em
}

#guideMypagePage .teikiKakuninBox h3 {
    margin-top: 0;
    font-size: 1.5rem;
    margin-bottom: .9em
}

#guideMypagePage .teikiKakuninBox .flex {
    -webkit-flex: flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 20px
}

#guideMypagePage .teikiKakuninBox .btn a {
    display: inline-block;
    background: #00A339;
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
    padding: 1em 2em;
    text-decoration: none;
    transition: background 0.3s ease-out
}

#guideMypagePage .teikiKakuninBox .flex div {
    margin-left: 40px
}

#guideMypagePage .teikiKakuninBox .flex div img {
    width: 250px
}

@media screen and (max-width: 460px) {
    #guideMypagePage .teikiKakuninBox {
        padding:1.7em 1.4em
    }

    #guideMypagePage .teikiKakuninBox .flex {
        display: block;
        text-align: center;
        margin-top: 30px
    }

    #guideMypagePage .teikiKakuninBox .flex div {
        margin-left: 0;
        margin-top: 20px
    }

    #guideMypagePage .teikiKakuninBox .flex div img {
        width: 74%
    }
}

.pc #guideMypagePage .teikiKakuninBox .btn a:hover {
    background: #00BD42
}

#guidePaymentPage img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

#guidePaymentPage .creditImg02 {
    max-width: 397px;
    margin: 14px 0 0
}

#guidePaymentPage .creditImg03 {
    max-width: 335px;
    margin: 14px 0 0
}

#guidePaymentPage .creditImg01 {
    max-width: 720px;
    margin: 20px 0 0
}

#guidePaymentPage .bdBox {
    border: #b3b3b3 1px solid;
    padding: 1.5em 1.6em;
    border-radius: 8px;
    margin-top: 2em
}

#guidePaymentPage .bdBox h3 {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 1.2em
}

#guidePaymentPage .bdBox h4 {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 2em 0 .8em
}

#faqPage .pageLinkList {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 840px;
    margin: 50px auto 0;
    padding-bottom: 10px
}

#faqPage .pageLinkList li {
    width: 32%;
    margin-right: 2%;
    margin-bottom: 12px;
    position: relative
}

#faqPage .pageLinkList li:nth-child(3n) {
    margin-right: 0
}

#faqPage .pageLinkList li a {
    border: rgba(153,153,153,0.8) 1px solid;
    height: 100%;
    padding: .8em 1em;
    color: inherit;
    text-decoration: none;
    text-align: left;
    -webkit-flex: flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    transition: all 0.3s ease-out
}

#faqPage .pageLinkList li img {
    width: 4px;
    line-height: 0;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translate(0, -50%)
}

#faqPage h2 {
    font-size: 1.7rem;
    font-weight: bold;
    line-height: 1;
    padding-top: 1em;
    margin-top: 2em
}

#faqPage h2 p {
    padding: 2px 11px 1px;
    border-left: #00BD42 3px solid
}

#faqPage .question {
    border-bottom: #999 1px solid;
    font-size: 1.6rem;
    line-height: 1.5;
    padding: 1.1em 50px .8em;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease-out
}

#faqPage .question.open {
    background: rgba(252,240,212,0.7)
}

#faqPage .answer {
    padding: 1.2em 40px 2em 50px;
    position: relative;
    font-size: 1.5rem;
    line-height: 1.7
}

#faqPage .answer .icon {
    top: 2.1em !important
}

#faqPage .answer img {
    max-width: 100%
}

#faqPage .bdBox {
    border: #ccc 1px solid;
    margin: 0.6em .6em 1em;
    padding: .8em 1.2em
}

#faqPage .faqWrap {
    padding: 15px 15px 0
}

#faqPage .faqWrap .icon {
    width: 20px;
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translate(-50%, -50%)
}

#faqPage .arrow {
    width: 19px;
    line-height: 0;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0, -50%)
}

#faqPage .open .arrow {
    transform: translate(0, -50%) rotate(-180deg)
}

#faqPage .telLink,#faqPage .faxNum {
    font-size: 1.7rem;
    color: inherit;
    text-decoration: none
}

@media screen and (max-width: 460px) {
    #faqPage .pageLinkList {
        margin:10% auto -8%;
        font-size: 1.3rem
    }

    #faqPage .pageLinkList li {
        width: 49%;
        margin-right: 2% !important;
        margin-bottom: 2%
    }

    #faqPage .pageLinkList li:nth-child(2n) {
        margin-right: 0 !important
    }

    #faqPage .pageLinkList li a {
        padding: .7em .8em;
        padding-right: 1.2em;
        min-height: 3.4em;
        line-height: 1.4
    }

    #faqPage h2 {
        margin: 2.7em 1% 0
    }

    #faqPage .faqWrap {
        padding: 3% 1% 0
    }

    #faqPage .faqWrap .icon {
        width: 5%;
        left: 3%
    }

    #faqPage .arrow {
        width: 5%;
        right: 1%
    }

    #faqPage .question {
        font-size: 1.5rem;
        margin-top: 0.4em;
        padding: .8em 7% .8em 9%
    }

    #faqPage .answer {
        padding: 1.2em 0 1.4em 9%;
        font-size: 1.4rem;
        line-height: 1.6
    }
}

.pc #faqPage .pageLinkList li a:hover {
    color: #00BD42;
    background: rgba(0,189,66,0.05)
}

.pc #faqPage .question:hover {
    background: #FCF0D4
}

# Page.contents {
    position: relative;
    z-index: 0
}

# Page .txt {
    font-size: 1.5rem;
    line-height: 2.0
}

# Page .pageNav {
    position: absolute;
    top: 22px;
    left: 20px;
    margin: 0;
    z-index: 10
}

# Page #topBGArea {
    position: relative;
    z-index: 0;
    padding: 80px 0 220px;
    min-width: 1000px
}

# Page #topBGArea:before {
    content: "";
    display: block;
    width: 100vw;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
    background: url("../img/ /bg.jpg") no-repeat center bottom;
    background-size: cover
}

# Page #pageTitle {
    margin-bottom: 120px
}

# Page .topFlex {
    -webkit-flex: flex;
    display: flex
}

# Page .topFlex .leftBox {
    flex: 1;
    margin-right: 40px
}

# Page .topFlex .rightbox {
    width: 48%
}

# Page .topFlex h2 {
    max-width: 423px;
    margin-bottom: 3em
}

# Page .topFlex .img {
    margin-bottom: 5em
}

# Page .mBox {
    padding: 130px 0;
    text-align: center
}

# Page .mBox h2 {
    max-width: 520px;
    margin: 0 auto 2.4em
}

@media screen and (max-width: 750px) {
    # Page.contents {
        padding-top:0
    }

    # Page .txt {
        font-size: 1.35rem;
        line-height: 1.9
    }

    # Page #topBGArea {
        padding: 6% 0 11%;
        min-width: 0
    }

    # Page #topBGArea:before {
        background-position: left top;
        background-size: 300%
    }

    # Page #pageTitle {
        margin-bottom: 10vw
    }

    # Page .topFlex {
        display: block;
        padding: 0 4%
    }

    # Page .topFlex .leftBox {
        margin-right: 0
    }

    # Page .topFlex .rightbox {
        width: 100%
    }

    # Page .topFlex h2 {
        width: 70%;
        margin: 0 0 2em
    }

    # Page .topFlex .img {
        max-width: 334px;
        margin: 2.7em auto
    }

    # Page .mBox {
        padding: 12vw 0 11vw
    }

    # Page .mBox h2 {
        width: 80%;
        margin: 0 auto 1.9em
    }
}

@media screen and (max-width: 460px) {
    # Page.contents {
        padding-bottom:0
    }

    # Page .txt {
        font-size: 1.35rem;
        line-height: 1.9
    }

    # Page #topBGArea {
        padding: 8% 0 24%;
        min-width: 0;
        transition: all 0.3s ease-out
    }

    # Page #topBGArea:before {
        position: fixed;
        top: auto;
        bottom: 0;
        z-index: -10;
        height: 100%;
        max-height: 96vh;
        background-size: cover;
        background-position: left 18% bottom 8%;
        transition: all 0.3s ease-out
    }

    # Page #pageTitle {
        margin-bottom: 17vw
    }

    # Page .topFlex h2 {
        width: 100%;
        margin: 0 0 2em
    }

    # Page .bgWhite {
        position: relative;
        z-index: 0;
        padding-bottom: 10%
    }

    # Page .bgWhite:before {
        content: "";
        width: 100vw;
        height: 100%;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, 0);
        background: #fff;
        z-index: -1
    }

    # Page .mBox {
        padding: 18vw 3vw 16vw;
        text-align: left
    }

    # Page .mBox h2 {
        width: 80%;
        margin: 0 auto 1.9em
    }
}

# Page .block {
    margin-bottom: 160px
}

# Page .block .txtBox h2 {
    display: inline-block;
    text-align: left;
    margin-bottom: 2em;
    position: relative
}

# Page .block .txtBox h2 .clover {
    width: 172px;
    z-index: -1;
    position: absolute;
    right: 0;
    top: -40%;
    transform: translate(62%, 0)
}

# Page .block .txtBox h2 img.switch {
    height: 28px
}

# Page .block .txtBox h2 .kodawari {
    -webkit-flex: flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 1em
}

# Page .block .txtBox h2 .kodawari img {
    height: 17px
}

# Page .block .txtBox h2 .kodawari span {
    width: 2em;
    height: 1px;
    display: inline-block;
    overflow: hidden;
    background: #96663F;
    margin-left: .5em;
    opacity: .7
}

# Page #block01 {
    position: relative;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
    width: 100vw;
    max-width: 1500px;
    min-width: 1080px;
    -webkit-flex: flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center
}

# Page #block01 .img {
    flex: 1;
    max-width: 756px
}

# Page #block01 .txtBox {
    width: 49%;
    padding-left: 70px;
    padding-right: 40px
}

@media screen and (max-width: 1140px) {
    # Page #block01 .txtBox {
        padding-left:60px
    }
}

# Page #block02 {
    position: relative;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
    width: 100vw;
    max-width: 1500px;
    min-width: 1080px;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-flex: flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center
}

# Page #block02 .img {
    flex: 1;
    max-width: 760px
}

# Page #block02 .txtBox {
    width: 42%;
    padding-right: 60px;
    padding-left: 40px
}

# Page #block03 .txtBox {
    width: 100%;
    max-width: 710px;
    margin: 0 auto
}

# Page #block04 .flexC {
    padding: 0 35px
}

# Page #block04 .txtBox {
    width: 52%;
    padding-right: 60px
}

# Page #block04 .img {
    flex: 1;
    text-align: center
}

# Page #block04 .img img {
    max-width: 720px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

# Page #block04 .setumeiBox {
    background: #EFEFE3;
    padding: 30px 20px;
    margin-top: 50px;
    margin-bottom: -20px;
    font-size: 1.3rem;
    -webkit-flex: flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center
}

# Page #block04 .setumeiBox dl {
    flex: 1;
    background: #FDFDFC;
    border: #C2BFBC 1px solid;
    margin: 0 10px;
    padding: 1.5em 1.3em
}

# Page #block04 .setumeiBox dt {
    margin-bottom: .9em;
    font-weight: bold;
    font-size: 1.4rem
}

# Page #block05 {
    margin-bottom: 20px;
    -webkit-flex: flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center
}

# Page #block05 .txtBox {
    width: auto;
    padding-right: 40px
}

# Page #block05 .img img {
    max-width: 500px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@media screen and (max-width: 750px) {
    # Page .block {
        margin-bottom:12vw
    }

    # Page .block .txtBox h2 {
        margin-bottom: 1.5em
    }

    # Page .block .txtBox h2 .clover {
        width: 130px;
        top: -25%;
        transform: translate(80%, 0)
    }

    # Page .block .txtBox h2 .kodawari img {
        height: 16px
    }

    # Page #block01 {
        min-width: 0;
        -webkit-flex-direction: column;
        flex-direction: column
    }

    # Page #block01 .txtBox {
        width: 100%;
        padding: 10vw 8vw 0
    }

    # Page #block02 {
        min-width: 0;
        display: block
    }

    # Page #block02 .txtBox {
        width: 100%;
        padding: 10vw 8vw 0
    }

    # Page #block03 .txtBox {
        width: 100%;
        padding: 8vw 3vw 0 4vw
    }

    # Page #block04 .flexC {
        padding: 8vw 4vw 0;
        display: block
    }

    # Page #block04 .txtBox {
        width: 100%;
        padding: 0;
        margin-bottom: 9vw
    }

    # Page #block04 .img img {
        max-width: 380px
    }

    # Page #block04 .setumeiBox {
        display: block;
        padding: 3vw 3vw;
        margin-top: 6vw;
        margin-bottom: 0
    }

    # Page #block04 .setumeiBox dl {
        margin: 0;
        padding: 1.4em 1.2em
    }

    # Page #block04 .setumeiBox dl:first-child {
        margin-bottom: 2vw
    }

    # Page #block05 .txtBox {
        padding: 0 20px
    }
}

@media screen and (max-width: 460px) {
    # Page .block {
        margin-bottom:18vw
    }

    # Page #block01 .txtBox h2 img.switch {
        height: 54px
    }

    # Page #block05 {
        margin-bottom: 0;
        padding: 8vw 4vw 0;
        display: block
    }

    # Page #block05 .txtBox {
        width: auto;
        padding: 0
    }
}

#transactionPage .nTbl {
    margin-top: 50px
}

@media screen and (max-width: 750px) {
    #transactionPage .nTbl {
        margin-top:8vw
    }
}

#privacyPage #pageTitle,#termsPage #pageTitle,#legalPage #pageTitle {
    margin-bottom: 2.6em
}

#privacyPage h2,#termsPage h2,#legalPage h2 {
    font-size: 1.8rem;
    line-height: 1.5;
    font-weight: bold;
    margin: 3.1em 0 .9em
}

#privacyPage .yakusoku,#termsPage .yakusoku,#legalPage .yakusoku {
    font-size: 1.5rem;
    margin: 3.5em 0 1.5em
}

#privacyPage .telLink,#termsPage .telLink,#legalPage .telLink {
    font-size: 1.9rem;
    line-height: 1.3;
    display: inline-block;
    margin-top: 0.3em;
    margin-left: .5em
}

#privacyPage .madoguchi,#termsPage .madoguchi,#legalPage .madoguchi {
    font-size: 1.5rem
}

#privacyPage .date,#termsPage .date,#legalPage .date {
    margin-top: 3em
}

#legalPage h3 {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 2.6em 0 .8em
}

@media screen and (max-width: 750px) {
    #privacyPage #pageTitle,#termsPage #pageTitle,#legalPage #pageTitle {
        margin-bottom:1.5em
    }

    #privacyPage h2,#termsPage h2,#legalPage h2 {
        font-size: 1.7rem;
        margin: 2.4em 0 .6em
    }

    #privacyPage .yakusoku,#termsPage .yakusoku,#legalPage .yakusoku {
        font-size: 1.45rem;
        margin: 3.5em 0 1.5em
    }

    #privacyPage .telLink,#termsPage .telLink,#legalPage .telLink {
        font-size: 2.1rem
    }

    #privacyPage .telLink a,#termsPage .telLink a,#legalPage .telLink a {
        text-decoration: none;
        color: inherit
    }

    #privacyPage .name,#termsPage .name,#legalPage .name {
        margin-top: 3em
    }

    #privacyPage .name .fz13,#termsPage .name .fz13,#legalPage .name .fz13 {
        font-size: 1.2rem
    }

    #privacyPage .date,#termsPage .date,#legalPage .date {
        margin-top: 2em
    }

    #legalPage h3 {
        font-size: 1.6rem;
        margin: 2.1em 0 .6em
    }
}

#sitemapPage a {
    color: inherit
}

#sitemapPage h2 {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 3em 0 0.6em;
    border-bottom: #ccc 1px solid;
    padding: 0.4em .6em
}

#sitemapPage h2 img {
    width: 5px;
    margin-left: 1.1em;
    vertical-align: 1px
}

#sitemapPage h2 a {
    text-decoration: none;
    width: 100%;
    display: block
}

#sitemapPage ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -1em 0 1.4em
}

#sitemapPage li {
    width: 33.3%;
    padding-right: 1em;
    margin-top: .8em
}

.pc #sitemapPage h2 a:hover {
    color: #00BD42
}

@media screen and (max-width: 750px) {
    #sitemapPage h2 {
        font-size:1.5rem;
        margin: 2.6em 0 0.4em;
        padding: 0.2em .5em
    }

    #sitemapPage ul {
        margin: 0 -1em 0 1em
    }

    #sitemapPage li {
        width: 50%;
        padding-right: 1em;
        margin-top: .8em
    }
}

@media screen and (max-width: 460px) {
    #sitemapPage ul {
        margin:0 0 0 1.2em
    }

    #sitemapPage li {
        width: 100%;
        padding-right: 0;
        margin-top: .7em
    }
}

#nandemoQAPage .bgWrap {
    background: #FEEADC;
    padding: 18px;
    margin-bottom: -30px
}

#nandemoQAPage .bgWhite {
    background: #FFF;
    border-radius: 44px;
    padding: 50px 60px
}

#nandemoQAPage h1 {
    max-width: 726px;
    width: 80%;
    margin: 0 auto
}

#nandemoQAPage ul.list {
    max-width: 970px;
    margin: 40px auto 0;
    border-top: #ccc 1px solid
}

#nandemoQAPage ul.list li {
    border-bottom: #ccc 1px solid
}

#nandemoQAPage ul.list li a {
    -webkit-flex: flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    min-height: 4em;
    font-size: 1.6rem;
    position: relative;
    color: inherit;
    text-decoration: none;
    padding: 1.2em .3em 1.2em 4em;
    transition: background 0.3s ease-out
}

#nandemoQAPage ul.list li .q {
    width: 2em;
    position: absolute;
    left: 0.8em;
    top: .95em
}

#nandemoQAPage ul.list li .title {
    flex: 1;
    margin-right: 1em
}

#nandemoQAPage ul.list li .arrow {
    line-height: 0;
    width: 1.3em;
    transform: rotate(-90deg)
}

.pc #nandemoQAPage ul.list li a:hover {
    background: #FEF4ED
}

@media screen and (max-width: 750px) {
    #nandemoQAPage {
        padding-top:0
    }

    #nandemoQAPage .bgWrap {
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translate(-50%, 0);
        padding: 5% 4%;
        margin-bottom: -5%
    }

    #nandemoQAPage .bgWhite {
        border-radius: 2em;
        padding: 7% 5%
    }

    #nandemoQAPage h1 {
        width: 97%
    }

    #nandemoQAPage ul.list {
        margin: 6% auto 0
    }

    #nandemoQAPage ul.list li a {
        padding: 1em 0 1em 3em;
        font-size: 1.4rem
    }

    #nandemoQAPage ul.list li .q {
        width: 2em;
        position: absolute;
        left: 0;
        top: .95em
    }

    #nandemoQAPage ul.list li .title {
        margin-right: .7em
    }
}

#nandemoQADetailPage .bgWrap {
    border: #FEEADC 7px solid;
    padding: 20px 40px 80px;
    margin-top: 80px;
    position: relative;
    border-radius: 12px
}

#nandemoQADetailPage .logo {
    width: 260px;
    position: absolute;
    right: 0;
    top: 0;
    transform: rotate(8deg) translate(7%, -80%)
}

#nandemoQADetailPage h1.title {
    font-size: 2.2rem;
    line-height: 1.5;
    padding: 1.3em 15px 1.6em 90px;
    margin-bottom: 1.6em;
    font-weight: bold;
    border-bottom: #FEEADC 4px solid;
    position: relative
}

#nandemoQADetailPage .mark {
    width: 46px;
    position: absolute;
    left: 10px;
    top: 1em;
    margin: 0
}

#nandemoQADetailPage .mark img {
    margin: 0 !important
}

#nandemoQADetailPage h1.title .title {
    flex: 1
}

#nandemoQADetailPage h2.answer {
    font-size: 2.2rem;
    line-height: 1.5;
    font-weight: bold;
    margin-bottom: 2em;
    position: relative;
    padding: 1em 15px 0 90px
}

#nandemoQADetailPage .aBox {
    position: relative;
    font-size: 1.6rem;
    padding: 0 15px 0 90px
}

#nandemoQADetailPage .aBox * {
    line-height: 1.8
}

#nandemoQADetailPage .aBox p {
    margin-bottom: 2em
}

#nandemoQADetailPage .aBox img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block
}

#nandemoQADetailPage .btnBack {
    margin-top: 4em;
    margin-bottom: -1em
}

@media screen and (max-width: 750px) {
    #nandemoQADetailPage .bgWrap {
        border:#FEEADC 6px solid;
        padding: 1.5% 4% 10%;
        margin: 6% -1% 0
    }

    #nandemoQADetailPage .logo {
        width: 45%
    }

    #nandemoQADetailPage h1.title {
        font-size: 1.8rem;
        padding: 1.1em 0 1.1em 14vw;
        margin-bottom: 1.1em
    }

    #nandemoQADetailPage .mark {
        width: 10vw;
        left: 0;
        top: .8em
    }

    #nandemoQADetailPage h2.answer {
        font-size: 1.8rem;
        margin-bottom: 1.8em;
        padding: .8em 0 0 14vw
    }

    #nandemoQADetailPage .aBox {
        font-size: 1.5rem;
        padding: 0 1vw
    }

    #nandemoQADetailPage .aBox p {
        margin-bottom: 1.5em
    }

    #nandemoQADetailPage .aBox img {
        margin-top: 1.5em;
        margin-bottom: 1.5em
    }

    #nandemoQADetailPage .btnBack {
        margin-top: 2.8em;
        margin-bottom: -.5em;
        max-width: 250px
    }
}

#teachSeibunPage .wMax {
    max-width: 970px
}

#teachSeibunPage h1 {
    max-width: 706px;
    margin: 0 auto
}

#teachSeibunPage .list {
    margin-top: 60px;
    font-size: 1.5rem;
    line-height: 1.4;
    -webkit-flex: flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

#teachSeibunPage .list a {
    text-decoration: none;
    color: inherit;
    -webkit-flex: flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background: rgba(230,242,239,0.7);
    padding: 0.7em 1.6em;
    min-height: 3.8em;
    border-radius: 6px;
    position: relative;
    background: all 0.3s ease-out
}

#teachSeibunPage .list a:before {
    content: url("../img/contents/allow_seiun.svg");
    width: 1em;
    position: absolute;
    right: 0.5em;
    top: 50%;
    transform: translate(0, -50%) rotate(-90deg)
}

#teachSeibunPage .list li {
    flex: 1 1 33%;
    padding: 0 0.5em;
    margin-bottom: 1em
}

@media screen and (max-width: 460px) {
    #teachSeibunPage .wMax {
        padding:0 2vw
    }

    #teachSeibunPage h1 {
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translate(-50%, 0);
        padding: 0 4vw
    }

    #teachSeibunPage .list {
        margin: 10vw 2vw 0;
        font-size: 1.3rem
    }

    #teachSeibunPage .list a {
        padding: 0.7em 2em 0.7em 1.2em
    }

    #teachSeibunPage .list li {
        flex: 1 1 100%;
        padding: 0;
        margin-bottom: 0.6em
    }
}

#teachSeibunPage .pager .visit {
    color: #39ABAD
}

.pc #teachSeibunPage .list a:hover {
    background: rgba(230,242,239,0.9)
}

.pc #teachSeibunPage .pager a:hover {
    color: #39ABAD
}

#teachSeibunDetailPage .wMaxP {
    max-width: 1070px
}

#teachSeibunDetailPage .kokubanBox {
    position: relative;
    background: url("../img/contents/seibun_linebottom.png") no-repeat center bottom,url("../img/contents/seibun_linetop.png") no-repeat center top,url("../img/contents/seibun_lineright.png") no-repeat right top,url("../img/contents/seibun_lineleft.png") no-repeat left top;
    background-size: contain;
    padding: 3em 4em 2.8em;
    font-size: 1.6rem;
    line-height: 1.8
}

#teachSeibunDetailPage .kokubanBox .img {
    width: 186px;
    height: auto;
    position: absolute;
    right: 20px;
    bottom: 2px
}

#teachSeibunDetailPage .kokubanBox h1 {
    font-size: 2.9rem;
    font-weight: bold;
    line-height: 1.4;
    color: #39ABAD;
    margin-bottom: 1em
}

#teachSeibunDetailPage .kijiWrap {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto
}

#teachSeibunDetailPage h2.kijiTitle {
    color: #39ABAD;
    font-size: 2.3rem;
    line-height: 1.5;
    font-weight: bold;
    position: relative;
    margin: 4em 0 1.4em
}

#teachSeibunDetailPage h2.kijiTitle:before {
    content: "";
    background: #39ABAD;
    width: 4px;
    height: 102%;
    position: absolute;
    left: -1em;
    top: -1%;
    display: block
}

#teachSeibunDetailPage .kijiBox {
    font-size: 1.5rem;
    line-height: 1.8
}

#teachSeibunDetailPage .kijiBox img {
    max-width: 100%;
    height: auto;
    display: inline-block
}

#teachSeibunDetailPage .kijiBox p {
    margin-bottom: 1.8em
}

#teachSeibunDetailPage .btnBack {
    margin-top: 80px
}

@media screen and (max-width: 750px) {
    #teachSeibunDetailPage .wMaxP {
        padding:0
    }

    #teachSeibunDetailPage .kokubanBox {
        background-size: auto;
        background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
        padding: 2.1em 2.2em 2.0em;
        font-size: 1.5rem;
        line-height: 1.7
    }

    #teachSeibunDetailPage .kokubanBox .img {
        width: 120px
    }

    #teachSeibunDetailPage .kokubanBox h1 {
        font-size: 2.3rem;
        margin-bottom: .8em
    }

    #teachSeibunDetailPage h2.kijiTitle {
        font-size: 2rem;
        margin: 2.8em 0 1.1em;
        padding-left: 18px
    }

    #teachSeibunDetailPage h2.kijiTitle:before {
        width: 3px;
        height: 100%;
        left: 0;
        top: 0
    }

    #teachSeibunDetailPage .btnBack {
        margin-top: 14vw
    }
}

#asusumaPage h1.titleTop {
    border-bottom: #F76A92 3px solid;
    padding: 40px 0 25px;
    text-align: center;
    position: relative
}

#asusumaPage h1.titleTop p {
    width: 258px;
    margin: 0 auto
}

#asusumaPage h1.titleTop .line {
    position: absolute;
    width: 70%;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0)
}

#asusumaPage h1.titleTop .kazoku {
    position: absolute;
    width: 295px;
    right: 0;
    bottom: -5px
}

#asusumaPage .list {
    max-width: 970px;
    margin: 80px auto 0
}

#asusumaPage .list li {
    font-size: 1.7rem;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 12px
}

#asusumaPage .list a {
    color: inherit;
    text-decoration: none;
    -webkit-flex: flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    border-radius: 6px;
    position: relative;
    background: rgba(247,106,146,0.1);
    padding: .8em 2em;
    min-height: 3.8em;
    transition: color 0.15s ease-out
}

#asusumaPage .list a:before {
    content: url("../img/contents/allow_asusuma.svg");
    width: 1.1em;
    position: absolute;
    right: .6em;
    top: 50%;
    transform: translate(0, -50%) rotate(-90deg)
}

@media screen and (max-width: 750px) {
    #asusumaPage h1.titleTop {
        padding:10vw 0 8vw;
        border-width: 2px
    }

    #asusumaPage h1.titleTop p {
        width: 56%
    }

    #asusumaPage h1.titleTop .line {
        width: 90%
    }

    #asusumaPage h1.titleTop .kazoku {
        width: 50%;
        right: -3%
    }

    #asusumaPage .list {
        margin: 12vw auto 0
    }

    #asusumaPage .list li {
        font-size: 1.5rem;
        margin-bottom: 10px
    }

    #asusumaPage .list a {
        padding: .8em 1.2em;
        padding-right: 1.8em
    }
}

#asusumaPage .pager .visit {
    color: #F76A92
}

.pc #asusumaPage .list a:hover {
    color: #F76A92
}

.pc #asusumaPage .pager a:hover {
    color: #F76A92
}

#asusumaDetailPage h1.titleTop {
    max-width: 950px;
    margin: 0 auto 1.5em;
    padding: 1em 0;
    padding-left: .8em;
    position: relative;
    border-top: rgba(247,106,146,0.7) 3px solid;
    border-bottom: rgba(247,106,146,0.7) 3px solid;
    font-size: 2.8rem;
    font-weight: bold;
    line-height: 1.5;
    color: #F76A92;
    -webkit-flex: flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center
}

#asusumaDetailPage h1.titleTop:before {
    content: "";
    background: rgba(247,106,146,0.7);
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    top: 2px
}

#asusumaDetailPage h1.titleTop:after {
    content: "";
    background: rgba(247,106,146,0.7);
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 2px
}

#asusumaDetailPage h1.titleTop p.txt {
    margin-right: 2em
}

#asusumaDetailPage h1.titleTop p.img {
    width: 138px;
    margin: 0 5px 0 auto
}

#asusumaDetailPage .kijiWrap {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto
}

#asusumaDetailPage .read {
    font-size: 1.6rem;
    line-height: 1.8
}

#asusumaDetailPage h2.kijiTitle {
    color: #F76A92;
    font-size: 2.3rem;
    line-height: 1.5;
    font-weight: bold;
    position: relative;
    margin: 4em 0 1.4em
}

#asusumaDetailPage h2.kijiTitle:before {
    content: "";
    background: #F76A92;
    width: 4px;
    height: 102%;
    position: absolute;
    left: -1em;
    top: -1%;
    display: block
}

#asusumaDetailPage .kijiBox {
    font-size: 1.5rem;
    line-height: 1.8
}

#asusumaDetailPage .kijiBox img {
    max-width: 100%;
    height: auto;
    display: inline-block
}

#asusumaDetailPage .kijiBox p {
    margin-bottom: 1.8em
}

#asusumaDetailPage .btnBack {
    margin-top: 80px
}

@media screen and (max-width: 750px) {
    #asusumaDetailPage h1.titleTop {
        margin:0 auto 1.5em;
        padding: 1em 0.3em;
        font-size: 1.9rem
    }

    #asusumaDetailPage h1.titleTop p.txt {
        margin-right: 0
    }

    #asusumaDetailPage h1.titleTop p.img {
        display: none
    }

    #asusumaDetailPage .read {
        font-size: 1.5rem
    }

    #asusumaDetailPage h2.kijiTitle {
        font-size: 2rem;
        margin: 2.8em 0 1.1em;
        padding-left: 18px
    }

    #asusumaDetailPage h2.kijiTitle:before {
        width: 3px;
        height: 100%;
        left: 0;
        top: 0
    }

    #asusumaDetailPage .btnBack {
        margin-top: 14vw
    }
}

#chiebukuroPage .wMax {
    max-width: 970px;
    margin-left: auto;
    margin-right: auto
}

#chiebukuroPage h1 {
    width: 704px;
    height: 184px;
    padding: 36px 0 0;
    margin: 0 auto 66px;
    text-align: center;
    background: url("../img/contents/chiebukuro_bg.png") no-repeat center top;
    background-size: contain
}

#chiebukuroPage h1 img {
    width: 418px
}

#chiebukuroPage .question {
    background: #FCF6E8;
    border-top: #DFD6C2 1px solid;
    font-size: 1.7rem;
    font-weight: bold;
    line-height: 1.5;
    position: relative;
    -webkit-flex: flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: .8em 30px;
    min-height: 3.8em;
    margin-top: 12px;
    cursor: pointer
}

#chiebukuroPage .question .arrow {
    position: absolute;
    width: 1em;
    line-height: 0;
    right: 1em;
    top: 50%;
    transform: translate(0, -50%)
}

#chiebukuroPage .question.open .arrow {
    transform: translate(0, -50%) rotate(-180deg)
}

#chiebukuroPage .answer {
    display: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    padding: 30px 30px 40px;
    font-size: 1.5rem;
    line-height: 1.8
}

#chiebukuroPage .answer .flex {
    -webkit-flex: flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

#chiebukuroPage .answer .thumImg {
    max-width: 280px;
    margin-right: 30px
}

#chiebukuroPage .answer .thumImg img {
    max-width: 100%;
    height: auto
}

#chiebukuroPage .answer .inner {
    flex: 1
}

#chiebukuroPage .answer .pointBox {
    background: #FCF6E8;
    border: #EE4F19 2px solid;
    border-radius: 6px;
    padding: 1em 1em 1em 4.5em;
    margin-top: 2em;
    position: relative
}

#chiebukuroPage .answer .pointBox .point {
    width: 5em;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-35%, -25%)
}

#chiebukuroPage .answer .pointBox .txt {
    margin: 1.2em 0;
    line-height: 1.6
}

#chiebukuroPage .answer .pointBox .img {
    margin: 0 0 0.3em 1em;
    max-width: 170px;
    height: auto;
    float: right;
    text-align: right
}

#chiebukuroPage .answer .pointBox .img img {
    max-width: 100%;
    height: auto
}

@media screen and (max-width: 750px) {
    #chiebukuroPage h1 {
        width:100vw;
        height: auto;
        padding: 0;
        padding-top: 35%;
        margin: 0 auto 10vw;
        position: relative;
        left: 50%;
        transform: translate(-50%, 0);
        background-size: cover
    }

    #chiebukuroPage h1 img {
        width: 74%;
        position: absolute;
        left: 50%;
        top: 32%;
        transform: translate(-50%, -50%)
    }

    #chiebukuroPage .question {
        font-size: 1.6rem;
        padding: .8em 20px;
        min-height: 3.8em;
        margin-top: 12px
    }

    #chiebukuroPage .answer {
        padding: 5vw 5vw 10vw
    }

    #chiebukuroPage .answer .flex {
        display: block
    }

    #chiebukuroPage .answer .thumImg {
        max-width: 70%;
        margin: 0 auto 1em;
        text-align: center
    }

    #chiebukuroPage .answer .pointBox {
        padding: 1em 1em;
        margin-top: 2.2em;
        position: relative
    }

    #chiebukuroPage .answer .pointBox .point {
        width: 5em;
        position: relative;
        left: auto;
        top: auto;
        float: left;
        margin: -1.8em 0 0 -1.4em;
        transform: translate(-15%, -5%)
    }

    #chiebukuroPage .answer .pointBox .txt {
        margin: 0;
        line-height: 1.7
    }

    #chiebukuroPage .answer .pointBox .img {
        max-width: 56%;
        margin: 0 auto 1em;
        float: none;
        text-align: center
    }
}

.pc #chiebukuroPage .question:hover {
    background: #F9EDD3
}

#recepiPage .titleTop {
    text-align: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

#recepiPage .titleTop p {
    position: relative;
    display: inline-block;
    max-width: 366px
}

#recepiPage .titleTop .line {
    position: absolute;
    top: 2px;
    display: inline-block;
    width: 278px
}

#recepiPage .titleTop .lineLeft {
    left: 0;
    transform: translate(-94%, 0)
}

#recepiPage .titleTop .lineRight {
    right: 0;
    transform: translate(94%, 0)
}

#recepiPage .list {
    max-width: 1020px;
    margin: 30px auto 0;
    -webkit-flex: flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

#recepiPage .list a {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: opacity 0.1s ease-out
}

#recepiPage .list li {
    position: relative;
    flex: 0 0 33%;
    margin-top: 50px;
    padding: 0 18px
}

#recepiPage .list .name {
    font-size: 1.7rem;
    line-height: 1.5;
    margin-top: .6em
}

#recepiPage .list .new {
    font-size: 0;
    line-height: 0;
    width: 60px;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(12px, -50%)
}

@media screen and (max-width: 460px) {
    #recepiPage .titleTop p {
        max-width:80%
    }

    #recepiPage .titleTop .line {
        top: 2px;
        width: 60%
    }

    #recepiPage .titleTop .lineLeft {
        transform: translate(-92%, 0)
    }

    #recepiPage .titleTop .lineRight {
        transform: translate(92%, 0)
    }

    #recepiPage .list {
        margin: 4vw -1vw 15vw
    }

    #recepiPage .list li {
        flex: 0 0 50%;
        margin-top: 9vw;
        padding: 0 2vw
    }

    #recepiPage .list .name {
        font-size: 1.4rem;
        margin-top: .6em
    }

    #recepiPage .list .new {
        width: 11vw;
        transform: translate(1vw, -50%)
    }
}

.pc #recepiPage .list a:hover {
    opacity: 0.8
}

#recepiDetailPage .wMax {
    max-width: 980px
}

#recepiDetailPage .topBox {
    -webkit-flex: flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 60px
}

#recepiDetailPage .topBox .img {
    width: 54%;
    margin-right: 40px
}

#recepiDetailPage .topBox .rightBox {
    flex: 1
}

#recepiDetailPage .topBox .new {
    width: 60px;
    margin-bottom: 10px
}

#recepiDetailPage .topBox h1.name {
    font-size: 2.4rem;
    letter-spacing: .6px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: .9em
}

#recepiDetailPage .topBox .read {
    line-height: 1.8
}

#recepiDetailPage .pickUp {
    max-width: 840px;
    margin: 0 auto;
    -webkit-flex: flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    border: #DFD6C2 2px solid;
    position: relative;
    padding: 25px 40px;
    padding-left: 20px
}

#recepiDetailPage .pickUp .title {
    border: #DFD6C2 2px solid;
    position: absolute;
    right: 10px;
    top: 0;
    transform: translate(0, -50%);
    background: #fff;
    padding: 5px 16px
}

#recepiDetailPage .pickUp .title img {
    width: 6em;
    line-height: 0;
    vertical-align: middle
}

#recepiDetailPage .pickUp .img {
    max-width: 190px;
    height: auto;
    margin-right: 28px
}

#recepiDetailPage .pickUp .img img {
    max-width: 100%;
    height: auto
}

#recepiDetailPage .pickUp .box {
    flex: 1;
    line-height: 1.7
}

#recepiDetailPage .pickUp h2 {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.5;
    color: #63300F;
    margin-bottom: .6em
}

#recepiDetailPage .block {
    margin-top: 80px;
    -webkit-flex: flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

#recepiDetailPage .block .titleBox {
    flex: 1
}

#recepiDetailPage .block h2.title {
    background: url("../img/contents/recepi_bg.svg");
    background-size: 9px 9px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.2;
    padding: 5px .7em;
    color: #fff;
    display: inline-block
}

#recepiDetailPage .block h2.title span {
    font-size: 1.4rem
}

#recepiDetailPage .block .box {
    width: calc(100% - 164px);
    margin-left: auto
}

#recepiDetailPage .block#zairyo .box {
    -webkit-flex: flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

#recepiDetailPage .block#zairyo table {
    flex: 1;
    border-collapse: separate;
    border-spacing: 0;
    border-top: rgba(181,150,117,0.6) 1px solid
}

#recepiDetailPage .block#zairyo table:nth-child(2) {
    margin-left: 30px
}

#recepiDetailPage .block#zairyo th,#recepiDetailPage .block#zairyo td {
    border-bottom: rgba(181,150,117,0.6) 1px solid;
    font-size: 1.3rem;
    font-weight: normal;
    line-height: 1.5;
    padding: .9em 0.5em
}

#recepiDetailPage .block#zairyo td {
    text-align: right
}

#recepiDetailPage .block#howto dl {
    -webkit-flex: flex;
    display: flex;
    padding-bottom: 2.2em;
    margin-bottom: 2.6em;
    background: url("../img/contents/recepi_line_1.png") repeat-x left bottom;
    background-size: 405px 2px
}

#recepiDetailPage .block#howto dt {
    color: #B59675;
    border: rgba(181,150,117,0.6) 1px solid;
    margin-right: 1.4em;
    font-size: 2.1rem;
    line-height: 1.1;
    font-weight: bold;
    width: 2em;
    height: 2em;
    -webkit-flex: flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center
}

#recepiDetailPage .block#howto dd {
    flex: 1;
    padding-top: .6em;
    font-size: 1.5rem;
    line-height: 1.8
}

#recepiDetailPage .block#howto dd img {
    max-width: 100%;
    height: auto;
    width: auto
}

#recepiDetailPage .btnBack {
    margin-top: 80px
}

@media screen and (max-width: 460px) {
    #recepiDetailPage .topBox {
        display:block;
        margin-bottom: 12vw
    }

    #recepiDetailPage .topBox .img {
        width: 100%;
        margin: 0 0 6vw
    }

    #recepiDetailPage .topBox .new {
        width: 50px;
        margin-bottom: 7px
    }

    #recepiDetailPage .topBox h1.name {
        font-size: 2.1rem;
        letter-spacing: .4px;
        margin-bottom: .9em
    }

    #recepiDetailPage .pickUp {
        display: block;
        padding: 7vw 7vw 6vw
    }

    #recepiDetailPage .pickUp .img {
        max-width: 190px;
        margin: 0 auto 10px
    }

    #recepiDetailPage .pickUp h2 {
        font-size: 1.9rem
    }

    #recepiDetailPage .block {
        margin-top: 15vw;
        display: block
    }

    #recepiDetailPage .block .box {
        width: 100%;
        margin: 6vw 0 0
    }

    #recepiDetailPage .block#zairyo .box {
        display: block
    }

    #recepiDetailPage .block#zairyo table {
        width: 90%;
        margin: 0 auto
    }

    #recepiDetailPage .block#zairyo table:nth-child(2) {
        margin-left: auto;
        border-top: none
    }

    #recepiDetailPage .block#howto dl {
        padding-bottom: 1.5em;
        margin-bottom: 1.8em
    }

    #recepiDetailPage .block#howto dt {
        margin-right: 1em;
        font-size: 2rem;
        width: 1.7em;
        height: 1.7em
    }

    #recepiDetailPage .block#howto dd {
        padding-top: .1em;
        font-size: 1.5rem;
        line-height: 1.7
    }

    #recepiDetailPage .btnBack {
        margin-top: 80px
    }
}

#staffblogPage .titleTop {
    max-width: 770px;
    text-align: center;
    padding: 65px;
    margin: 0 auto 65px;
    position: relative;
    background: url("../img/contents/blog_line01.svg") repeat-x left top,url("../img/contents/blog_line02.svg") repeat-x left bottom;
    background-size: 45px 9px, 82px 6px
}

#staffblogPage .titleTop p {
    width: 200px;
    margin: 0 auto;
    line-height: 0
}

#staffblogPage .titleTop .staffimg {
    width: 134px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%)
}

#staffblogPage .list {
    border-top: #ccc 1px solid;
    max-width: 900px;
    margin: 0 auto 90px
}

#staffblogPage .list a {
    text-decoration: none;
    color: inherit;
    display: block;
    font-size: 1.6rem;
    line-height: 1.5;
    padding: 1.2em 1.5em;
    position: relative;
    transition: background 0.2s ease-out
}

#staffblogPage .list a:before {
    content: url("../img/contents/allow_blog.svg");
    display: block;
    width: 1.1em;
    position: absolute;
    right: .5em;
    top: 50%;
    transform: translate(0, -50%) rotate(-90deg)
}

#staffblogPage .list li {
    border-bottom: #ccc 1px solid
}

#staffblogPage .list .date {
    font-size: 1.2rem;
    margin-bottom: .3em
}

#staffblogPage .pager .visit {
    color: #4283DB
}

@media screen and (max-width: 460px) {
    #staffblogPage .titleTop {
        text-align:left;
        padding: 11vw 3vw;
        margin: 0 auto 13vw;
        background-size: 23px 5px, 41px 3px
    }

    #staffblogPage .titleTop p {
        width: 56%;
        margin: 0 0 0 5%
    }

    #staffblogPage .titleTop .staffimg {
        width: 26%;
        right: -2vw
    }

    #staffblogPage .list {
        margin: 0 auto 16vw
    }

    #staffblogPage .list a {
        font-size: 1.5rem;
        padding: 1.2em .7em;
        padding-right: 1.4em
    }

    #staffblogPage .list a:before {
        right: 0
    }
}

.pc #staffblogPage .list a:hover {
    background: rgba(123,171,237,0.08)
}

.pc #staffblogPage .pager a:hover {
    color: #4283DB
}

#staffblogDetailPage .titleTop {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1.5;
    max-width: 956px;
    margin: 0 auto 80px;
    padding: 0.6em 0.8em 1.5em;
    background: url("../img/contents/blog_line02.svg") repeat-x left bottom;
    background-size: 82px 6px;
    position: relative
}

#staffblogDetailPage .titleTop .date {
    font-size: 1.5rem;
    font-weight: normal;
    line-height: 1.0;
    margin-bottom: .7em
}

#staffblogDetailPage .titleTop .img {
    width: 124px;
    height: auto;
    position: absolute;
    right: 2px;
    bottom: -10px;
    transform: translate(0, 100%)
}

#staffblogDetailPage .kijiWrap {
    max-width: 930px;
    margin: 0 auto 90px
}

#staffblogDetailPage .kijiBox {
    font-size: 1.5rem;
    line-height: 1.8
}

#staffblogDetailPage .kijiBox img {
    max-width: 100%;
    height: auto;
    display: inline-block
}

#staffblogDetailPage .kijiBox p {
    margin-bottom: 1.8em
}

@media screen and (max-width: 460px) {
    #staffblogDetailPage .titleTop {
        font-size:2.1rem;
        margin: 0 auto 15vw;
        padding: 0.5em 0.4em 1.3em;
        background-size: 41px 3px
    }

    #staffblogDetailPage .titleTop .date {
        font-size: 1.4rem;
        margin-bottom: .7em
    }

    #staffblogDetailPage .titleTop .img {
        width: 36%;
        bottom: -5px
    }

    #staffblogDetailPage .kijiWrap {
        margin: 0 1vw 15vw
    }
}

/*# sourceMappingURL=lower.css.map */

.cart-button-container{
    height: 100px;
    display: flex;
    align-items: center;
    margin: 20px;
      justify-content: space-around;
  }
  .cart-button-container input{
    margin: 0 auto;
    text-decoration: none;
    color: #fbfbfb;
    text-align: center;
    }
  
    .img2020{
      width: 145px;
    }
    .btn_regi2{
        display: flex;
      margin-top: 80px;
        justify-content: center;
        align-items: center;
      padding: 10px;
      width: 250px;
      height: 40px;
      border: 1px solid black;
      background-color: grey;
      border-radius: 10px;
      font-size:larger;
      color: white;
        text-decoration: none;
      cursor: pointer;
    
    }
    .btn_regi2 p{
        margin: 0 auto;
    }

    .name_w_cu table tbody tr td a{
        text-decoration: none;
        color: #333;
    }


.price{
    text-align: center;
}
.unit input{
    margin: 0 auto;
}
.delete{
    text-align: center;
}
.delete a{
    color: red;
    text-decoration: none;
}
.delete a:hover{
    border-bottom: 1px solid red;
}
.subtotal{
    text-align: center;
}
#products-list{
    width: 100% ;
    background-color: #fff !important;

}
#cart #products-list tr{
    margin-bottom: 150px;
}
#cart{
    width: 800px;
    min-width: 550px;
    margin: 0 auto;
}
.photo{
    margin-bottom: 30px;
}
.table_form tbody tr{
    margin-bottom: 20px !important;

}
.table_form tbody tr input{
    margin-bottom: 10px !important;
    margin-right: 10px;
}
.note{
    margin-bottom: 15px;
}
.btn_next{
    display: flex;
    margin-top: 80px;
      justify-content: center;
      align-items: center;
  text-align: center;
    width: 250px;
    height: 40px;
    border: 1px solid black;
    background-color: grey;
    border-radius: 10px;
    font-size:larger;
    color: white;
      text-decoration: none;
    cursor: pointer;   
}
.btn_back{
    display: flex;
    margin-top: 80px;
      justify-content: center;
      align-items: center;
  text-align: center;
    width: 250px;
    height: 40px;
    border: 1px solid black;
    background-color: grey;
    border-radius: 10px;
    font-size:larger;
    color: white;
      text-decoration: none;
    cursor: pointer;  
}
#btn{
    display: flex;
    flex-direction: row;
    width: 60%;
    justify-content: space-around;
    margin: 0 auto;
}
.table_form{
    width: 100%;
    margin: 0 auto;
    margin-bottom: 50px;
}
#customer_information{
    width: 90%;
    margin: 0 auto;
}
.cell_2_l{
    margin-top: 20px !important;
}
#cart{
    padding: 20px; 
    background-color: #fff;
    border-radius: 10px;
}
.main-content {
    width: 90%;
    padding: 20px;
    margin: 0 auto;
}

.cart-input-quantity{
    display: flex;
    justify-content: center;
}

.cell_1_c{
    text-align: center;
  }