@charset "UTF-8";

.clearfix::after,
.hanrei:before,
.yimsa p.lang-list:before {
    content: ""
}

#container,
#container table,
.yimsa h1,
.yimsa h2,
.yimsa h3,
.yimsa h4,
.yimsa h5,
.yimsa h6,
.yimsa label,
.yimsa li,
.yimsa p,
.yimsa td,
.yimsa th {
    font-family: Oswald, 'ヒラギノ角ゴシック', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif
}

input.H_btn,
select.LANG {
    outline: 0;
    appearance: none
}

#container {
    color: #333;
    background-color: #dedede;
    font-size: 18px
}

@media screen and (min-width:768px) and (max-width:932px) {
    #container {
        padding-left: 16px;
        padding-right: 16px;
        margin-left: -32px;
        margin-right: -32px
    }
}

.clearfix::after {
    display: block;
    clear: both
}

.left {
    float: left
}

img.Q {
    vertical-align: middle;
    margin-left: 1em
}

.advise,
.amp-SP,
.step3_right {
    overflow: hidden;
    margin-top: 1em
}

.step3 .advise {
    margin-top: 25px
}

.advise {
    border: 1px solid #969696;
    border-radius: 9px
}

@media screen and (max-width:767px) {
    .open-dialog body {
        overflow: hidden
    }

    .advise {
        border-radius: 4.5px
    }

    .advise table {
        display: block
    }
}

.advise table {
    width: 100%;
    border: none
}

@media screen and (min-width:768px) {
    .advise table .ad_td1 {
        padding-left: 0.8em;
        padding-right: 0.8em;
        width: 32%;
        text-align: center
    }

    .advise table .ad_td2,
    .advise table .ad_td3 {
        width: 15%;
        text-align: center
    }

    .advise table .dev-brief {
        width: 47%;
        padding-right: 0.8em
    }
}

.advise .spk-sel,
.step3 .advise .spkamp-sel,
.step3 .advise .spkamp_exp-sel,
.step3 .advise .sw-sel,
.step3 .advise .swamp-sel {
    border-bottom: 1px solid #969696
}

.advise table tr {
    padding: .5em
}

@media screen and (max-width:767px) {
    .advise table tr {
        display: block;
        text-align: center;
        padding: 14px 0
    }

    .advise table tr.hiddenx {
        display: none
    }
}

.hiddenx {
    display: none !important
}

.advise table td,
.advise table tr {
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 18px;
    border: none
}

@media screen and (max-width:767px) {

    .advise table td,
    .advise table tr {
        display: block;
        text-align: center !important;
        padding: 6px 16px
    }

    .step2 .advise table td {
        font-size: 16px;
        padding: 4px 0
    }

    .step2 .advise table td.dev-type {
        line-height: 1;
        padding-top: 14px
    }
}

.step2 .advise table tr {
    padding-bottom: 14px
}

@media screen and (max-width:767px) {
    .step3 .advise table td {
        font-size: 16px;
        padding: 4px 0
    }

    .step3 .advise table td.dev-type {
        line-height: 1;
        padding-top: 14px
    }

    .step3 .ad_td1 {
        width: 100%
    }
}

.step3 .advise table tr {
    padding-bottom: 14px
}

.T_line {
    border-top: solid 1px #26193A
}

.step3 .ad_td1 {
    text-align: left;
    padding-right: 23px
}

.ad_td2 {
    font-size: 18px
}

.ad_td2 a {
    color: #4B1E78;
    font-weight: 700
}

.aS_td3,
.ad_td3 {
    text-align: right
}

.ui-dialog {
    z-index: 1000 !important
}

#HELP,
#product-image-collection {
    display: none
}

@media screen and (max-width:767px) {

    .aS_td3,
    .ad_td3 {
        width: 100%
    }

    .ui-dialog {
        max-height: 95vh;
        overflow-y: auto
    }

    .spk-sel-sec,
    .spkamp_exp-sel {
        padding-bottom: 15px !important
    }
}

.notesSection p,
.stepSection p:nth-child(odd) {
    margin-bottom: 0
}

.notesSection ul.links {
    margin-top: 1em
}

#d808620 {
    margin-top: 2em
}

.heading-h1 {
    display: none
}

.yimsa {
    background: url(/files/yimsa/bg_yimsa.jpg) 50% 0/100% auto no-repeat
}

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

    .aS_td3,
    .ad_td3 {
        padding-left: 0.8em;
        padding-right: 0.8em
    }

    .ui-dialog {
        max-height: 95vh;
        overflow-y: auto
    }

    .yimsa {
        padding-top: 120px;
        padding-bottom: 35px
    }

    .yimsa_step #step {
        position: relative;
        top: 1px
    }
}

@media screen and (max-width:767px) {
    .yimsa {
        margin-left: -16px;
        margin-right: -16px;
        padding: 30vw 15px 20px
    }
}

.yimsa h2 {
    line-height: 1.3
}

.yimsa_container {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(255, 255, 255, .85);
    border-radius: 10px;
    padding: 40px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    overflow: visible;
    visibility: hidden;
    font-size: 18px
}

@media screen and (min-width:768px) and (max-width:932px) {
    .yimsa_container {
        padding-left: 20px;
        padding-right: 20px
    }
}

.yimsa_container.initialized {
    visibility: visible
}

.yimsa header h1 {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 24px
}

@media screen and (max-width:767px) {
    .yimsa_container {
        overflow: hidden;
        padding: 18px 18px 32px
    }

    .yimsa header h1 {
        font-size: 18px;
        text-align: center;
        line-height: 1.47;
        margin: 0 0 24px
    }
}

.yimsa header p {
    font-size: 18px;
    line-height: 2;
    text-align: left;
    color: #333
}

@media screen and (max-width:767px) {
    .yimsa header p {
        font-size: 16px;
        line-height: 1.66
    }
}

.yimsa header p b {
    font-size: 18px
}

@media screen and (max-width:767px) {
    .yimsa header p b {
        font-size: 16px
    }
}

.yimsa header p.yimsa_subtitle {
    font-size: 18px;
    line-height: 1.5
}

@media screen and (max-width:767px) {
    .yimsa header p.yimsa_subtitle {
        text-align: center;
        margin-bottom: 22px;
        font-size: 16px
    }
}

.yimsa header .yimsa-header-text-01 p {
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: .5em
}

.yimsa header .yimsa-header-text-01 p:nth-child(1),
.yimsa header .yimsa-header-text-01 p:nth-child(3),
.yimsa header .yimsa-header-text-01 p:nth-child(5) {
    margin-bottom: .25em
}

.yimsa header .yimsa-header-text-02 {
    margin-top: 1em;
    margin-bottom: 2em
}

.yimsa header .yimsa-header-text-02 p {
    font-family: sans-serif;
    font-size: 12px;
    line-height: 1.3;
    margin-bottom: .5em;
    padding-left: .6em;
    text-indent: -.6em
}

.yimsa_step2 header p,
.yimsa_step3 header p {
    display: none
}

.yimsa_step {
    display: flex;
    align-items: center;
    margin-top: 24px
}

@media screen and (max-width:767px) {
    .yimsa header .yimsa-header-text-01 p {
        font-size: 12px
    }

    .yimsa header .yimsa-header-text-02 p {
        font-size: 10px
    }

    .yimsa_step {
        margin-top: 20px
    }
}

.yimsa_step #step {
    text-align: right;
    font-size: 18px;
    font-weight: 700;
    color: #aaa;
    margin-left: auto
}

.yimsa_step #step span {
    white-space: nowrap
}

.yimsa_step #step .current {
    color: #333
}

.yimsa p.lang-list {
    position: relative;
    margin-bottom: 0
}

.yimsa p.lang-list:before {
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    border-right: 1px solid #7E7E7E;
    border-bottom: 1px solid #7E7E7E;
    z-index: 1;
    transform: rotate(45deg);
    top: calc(50% - 6px);
    right: 8px
}

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

    .RS_input,
    .select {
        padding-top: 35px
    }
}

.yimsa .RS_input h2,
.yimsa .select h2 {
    margin-top: 0;
    font-size: 18px;
    margin-bottom: 1em;
    line-height: 1;
    font-weight: 700
}

@media screen and (max-width:767px) {

    .RS_input,
    .select {
        padding-top: 20px
    }

    .yimsa .RS_input h2,
    .yimsa .select h2 {
        text-align: center;
        color: #333
    }
}

select.LANG {
    position: relative;
    z-index: 2;
    height: 30px;
    color: #333;
    font-weight: 400;
    border: 2px solid #7B47D2 !important;
    font-size: 18px;
    background-color: transparent;
    display: flex;
    align-items: center;
    padding: 0 24px 0 10px
}

.S1_label,
.S1_label-2,
.S2_label {
    height: 48px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer
}

.RS_input,
.select {
    overflow: hidden;
    margin-top: 1em
}

@media screen and (max-width:767px) {

    .RS_input,
    .select {
        margin-top: 9px
    }
}

@media screen and (min-width:768px) {
    .select form {
        display: flex;
        justify-content: space-between;
        margin-left: -15px;
        margin-right: -15px
    }

    .select form label {
        max-width: calc(50% - 30px);
        min-width: calc(50% - 30px);
        margin: 0 15px
    }
}

#hp,
.ui-dialog-titlebar,
input[type=radio] {
    display: none
}

.S1_label,
.S1_label-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: .5em;
    margin-bottom: 1em;
    color: #aaa;
    border: 1px solid #aaa;
    border-radius: 9px;
    font-weight: 400
}

.RS_input .S1_label,
.RS_input form input {
    margin-top: 0;
    margin-bottom: 0
}

@media screen and (max-width:767px) {

    .S1_label,
    .S1_label-2 {
        font-size: 16px;
        border-radius: 4.5px
    }
}

@media screen and (min-width:768px) {
    .select form.label_3col label {
        max-width: calc(33.3% - 30px);
        min-width: calc(33.3% - 30px)
    }

    .yimsa_lang_ru .S1_label,
    .yimsa_lang_ru .S1_label-2 {
        font-size: 18px
    }

    .S1_label,
    .S1_label-2 {
        width: 296px
    }
}

.yimsa .H_btn {
    width: 14px;
    height: 14px;
    position: relative;
    top: 0;
    margin-left: 5px
}

.yimsa_lang_ru .yimsa .H_btn {
    top: -1px;
    margin-left: 2px
}

.RS_input form {
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

@media screen and (max-width:767px) {
    .yimsa .H_btn {
        width: 10.5px;
        height: 10.5px;
        margin-right: -15.5px
    }

    .RS_input form {
        justify-content: center
    }
}

.RS_input form .ss_block {
    display: flex;
    align-items: center
}

.RS_input p {
    float: left;
    margin-right: 5em
}

.RS_input .S1_label {
    width: 200px;
    height: 43px;
    padding: 0 2px 0 0;
    border-radius: 9px;
    border: 1px solid #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400
}

@media screen and (max-width:767px) {
    .RS_input .S1_label {
        min-width: calc(50% - 10px);
        width: calc(50% - 10px);
        flex-grow: 1;
        border-radius: 4.5px
    }
}

.RS_input .S1_label~.S1_label {
    margin-left: 20px
}

.step1 input[type=radio]:checked+label {
    border: 3px solid #7b46d2;
    color: #333;
    font-weight: 700
}

.RS_input input {
    width: 46px;
    height: 42px;
    margin: 5px 0 0;
    border-radius: 9px;
    border: 1px solid #aaa
}

span.ss_block {
    font-size: 18px;
    display: block;
    line-height: 1
}

@media screen and (min-width:768px) {
    span.ss_block:not(:first-child) {
        margin-left: 30px
    }
}

@media screen and (max-width:767px) {
    .RS_input input {
        border-radius: 4.5px
    }

    span.ss_block:nth-child(3) {
        display: flex;
        min-width: calc(100% + 12px);
        margin-top: 30px;
        margin-left: -6px;
        margin-right: -6px
    }

    span.ss_block:nth-child(3) label {
        margin-left: 6px;
        margin-right: 6px;
        min-width: calc(50% - 12px);
        max-width: calc(50% - 12px)
    }
}

span#cross {
    margin-left: 13px;
    font-size: 18px
}

input#BGM_H,
input#BGM_L,
input#BGM_W {
    margin-left: 7px;
    margin-right: 7px;
    text-align: center
}

.ui-dialog {
    height: auto;
    background-color: #fff;
    font-family: arial, sans-serif;
    border: 1px solid #707070;
    color: #333;
    line-height: 1.55
}

@media screen and (min-width:768px) {
    .ui-dialog {
        width: 770px !important;
        padding: 70px 60px 35px;
        font-size: 18px;
        border-radius: 9px
    }
}

@media screen and (min-width:768px) and (max-width:932px) {
    .ui-dialog {
        width: 96% !important;
        padding: 70px 60px 35px;
        font-size: 18px;
        border-radius: 9px
    }
}

@media screen and (max-width:767px) {
    .ui-dialog {
        padding: 30px 25px;
        width: 318px !important;
        border-radius: 2px;
        font-size: 16px;
        line-height: 1.66
    }
}

.ui-dialog h1 {
    font-size: 18px;
    line-height: 1.55;
    margin-bottom: 0;
    margin-top: 0
}

.ui-dialog img {
    width: 520px;
    height: auto;
    margin-top: 15px
}

.ui-dialog-buttonpane {
    margin-top: 50px;
    text-align: center
}

@media screen and (max-width:767px) {
    .ui-dialog h1 {
        font-size: 16px;
        margin-bottom: 4px
    }

    .ui-dialog-buttonpane {
        margin-top: 40px
    }
}

.ui-dialog-buttonpane button {
    width: 79px;
    height: 38px;
    color: #fff;
    border: none;
    background-color: #7B47D2;
    font-size: 18px;
    border-radius: 5px
}

.step1 #NB_button {
    display: flex;
    justify-content: center
}

@media screen and (min-width:768px) {
    .step1 #NB_button {
        margin-top: 55px
    }
}

@media screen and (max-width:767px) {
    .ui-dialog-buttonpane button {
        width: 103px;
        height: 41px
    }

    .step1 #NB_button {
        margin-top: 30px
    }
}

.step1 .back,
.step1 .next {
    width: 132px;
    height: 41px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 9px;
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

@media screen and (max-width:767px) {

    .step1 .back,
    .step1 .next {
        border-radius: 4.5px
    }
}

#Restore_button .btn-restore,
.step1 .next {
    background-color: #fff;
    border: 1px solid #4B1E78
}

.step1 .next {
    color: #4B1E78;
    border-radius: 42px;
    line-height: 1
}

.step1 .back {
    color: #4B1E78;
    background-color: #fff;
    border: 2px solid #4B1E78;
    line-height: 48px
}

.visible-pendant {
    display: none
}

.selected-pendant .visible-pendant {
    display: inline
}

.selected-pendant .hidden-pendant {
    display: none
}

.room-size-input {
    display: flex;
    flex-wrap: wrap
}

.roomsize-wrap {
    margin-top: 16px
}

.roomsize-wrap .room-size-input .room-height,
.roomsize-wrap .room-size-input .room-size {
    text-align: center;
    padding-bottom: 8px;
    line-height: 1.2
}

.roomsize-wrap .room-size-input .room-height .ss_block,
.roomsize-wrap .room-size-input .room-size .ss_block {
    margin-left: 0
}

.roomsize-wrap .room-size-input .ss_block {
    margin-top: 10px
}

@media screen and (min-width:768px) {
    .roomsize-wrap .room-size-input .room-size {
        width: 200px
    }
}

@media screen and (max-width:767px) {
    .room-size-input {
        justify-content: center
    }

    .roomsize-wrap .room-size-input .room-size {
        width: auto !important;
        margin-bottom: 20px;
        margin-right: 16px;
        margin-left: -16px
    }
}

.roomsize-wrap .room-size-input .room-size .ss_block {
    justify-content: center;
    margin-left: 0
}

.roomsize-wrap .room-size-input .room-size .i18n {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

#Restore_button,
#SP_layout,
.roomsize-wrap .room-size-input .room-height .ss_block {
    justify-content: center
}

.roomsize-wrap .room-size-input .room-height .i18n {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

.S2_label,
.step2 .yimsa_step #step,
.step3 .yimsa_step #step {
    align-items: center;
    display: flex
}

html #contents .room-height .visible-pendant.i18n,
html #contents .room-size .visible-pendant.i18n {
    display: none
}

html.selected-pendant #contents .room-height .visible-pendant.i18n,
html.selected-pendant #contents .room-size .visible-pendant.i18n {
    display: flex
}

html.selected-pendant #contents .room-height .hidden-pendant.i18n,
html.selected-pendant #contents .room-size .hidden-pendant.i18n {
    display: none
}

@media screen and (min-width:768px) {
    .roomsize-wrap .room-size-input .room-height {
        width: 220px;
        padding-left: 20px
    }

    .step2 form {
        display: flex;
        margin-left: -20px;
        margin-right: -20px
    }

    .BEST,
    .GOOD {
        min-width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        padding-left: 20px;
        padding-right: 20px
    }

    .GOOD {
        margin-left: auto
    }

    .step2 .yimsa_step h2,
    .step3 .yimsa_step h2 {
        padding-right: 20px
    }
}

.step2 form {
    display: none;
}

.step2 h2,
.step3 h2 {
    font-size: 18px;
    margin-top: 40px
}

#select-BestSP {
    text-align: center
}

.step2 .advise {
    margin-top: 40px
}

.step2 .propose {
    margin-top: 44px
}

@media screen and (max-width:767px) {
    .roomsize-wrap .room-size-input .room-height {
        width: auto !important;
        margin-bottom: 20px
    }

    .BEST,
    .GOOD,
    .unit-wrap,
    .unit-wrap .ss_block {
        width: 100%
    }

    .BEST {
        margin-bottom: 23px
    }

    .step2 h2,
    .step3 h2 {
        text-align: center
    }

    .step2 h2 input,
    .step3 h2 input {
        margin-right: -14px
    }

    .step2 .propose {
        margin-top: 25px
    }

    .step2 .yimsa_step,
    .step3 .yimsa_step {
        margin-top: 0;
        display: flex;
        flex-direction: column-reverse
    }

    .step2 .yimsa_step #step,
    .step3 .yimsa_step #step {
        margin-bottom: 25px
    }
}

.step2 .yimsa_step h2,
.step3 .yimsa_step h2 {
    margin-top: 0;
    margin-bottom: 0;
    position: relative
}

.step2 h2 .H_btn {
    font-size: 18px
}

.step2 div.BEST,
.step2 div.GOOD {
    display: none
}

.step2 div.BEST:has(input:checked),
.step2 div.GOOD:has(input:checked) {
    display: block
}

.step2 input[type=radio]:checked+.S2_label {
    display: flex;
    border-top: 3px solid #7B47D2;
    border-left: 3px solid #7B47D2;
    border-right: 3px solid #7B47D2;
    color: #4B1E78;
    font-weight: 700;
    background-color: #fff
}

.step2 input[type=radio]:checked~.SP_notice {
    display: flex;
    border: 3px solid #7B47D2;
    background-color: #fff
}

.S2_label {
    display: none;
    justify-content: center;
    width: 160px;
    max-width: none;
    color: #797979;
    font-size: 18px;
    border-radius: 9px 9px 0 0;
    z-index: 10;
    margin: 0;
    border-top: 1px solid #969696;
    border-left: 1px solid #969696;
    border-right: 1px solid #969696;
    border-bottom: none;
    font-weight: 400
}

.SPn_td6 img,
.hanrei,
.step2 .condition table {
    margin-right: auto;
    margin-left: auto
}

@media screen and (max-width:767px) {
    .S2_label {
        width: 155px;
        height: 43px;
        font-size: 16px;
        border-radius: 4.5px 4.5px 0 0
    }
}

.SP_notice {
    display: none;
    align-items: center;
    width: 301px;
    height: 98px;
    padding: 15px 6px;
    font-size: 18px;
    border-radius: 0 9px 9px;
    z-index: 20;
    border: 1px solid #969696
}

@media screen and (max-width:767px) {
    .SP_notice {
        font-size: 16px;
        width: 100%;
        border-radius: 0 4.5px 4.5px
    }
}

.step2 .condition table {
    font-size: 18px
}

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

    .yimsa_lang_ru .step2 .yimsa_step h2,
    .yimsa_lang_ru .step3 .yimsa_step h2 {
        word-break: break-all
    }

    .SP_notice {
        width: 100%
    }

    .step2 .condition table th {
        white-space: nowrap
    }

    .SPn_td4 {
        padding-right: 1em
    }
}

.SP_notice table {
    width: 100%;
    margin-left: 15%;
    margin-right: 15%
}

.SP_notice table a {
    color: #4B1E78
}

.SPn_td1 {
    width: 20px
}

.SPn_td2 {
    width: 100px;
    font-weight: 700
}

.SPn_td3 {
    width: 5px
}

.SPn_td4 {
    width: 15px;
    text-align: right
}

.SPn_td5 {
    width: 80px;
    padding-left: 15px
}

@media screen and (max-width:767px) {
    .step2 .condition table {
        font-size: 16px;
        line-height: 1.2
    }

    .step2 .condition table tr+tr td,
    .step2 .condition table tr+tr th {
        padding-top: .5em
    }

    .SPn_td5 {
        padding-left: 25px
    }
}

.step2 .kit {
    display: none
}

.SPn_td6 {
    width: 80px;
    padding-left: 5px
}

.SPn_td6 img {
    display: block
}

.SPn_td5 img,
.SPn_td6 img {
    width: 58px
}

@media screen and (min-width:768px) and (max-width:932px) {

    .SPn_td5 img,
    .SPn_td6 img {
        width: 58px
    }
}

#SP_layout,
#SP_layout img,
.amp table {
    width: 100%
}

.hanrei {
    max-width: 246px;
    min-width: 246px;
    margin-top: 45px;
    display: flex;
    align-items: center
}

.step3 .conn-type {
    margin-top: 2em
}

.step3 .comment-right {
    display: inline-block;
    width: 10em
}

.step3 .comment {
    display: inline-block;
    width: 70%;
    font-size: 90%;
    vertical-align: top;
    visibility: collapse
}

@media screen and (max-width:767px) {
    .hanrei {
        margin-top: 15px;
        font-size: 16px
    }
}

.hanrei+.hanrei {
    margin-top: 8px
}

.hanrei:before {
    display: block;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 4px
}

#SP_layout,
.step2 #NB_button,
.step3 #NB_button {
    display: flex
}

@media screen and (max-width:767px) {
    .hanrei+.hanrei {
        margin-top: 4px
    }

    .hanrei:before {
        min-width: 9px;
        height: 9px
    }
}

#SP_layout,
#SP_layout svg,
.amp-SP img {
    height: auto
}

.hanrei.speaker:before {
    background-color: #7B47D2
}

.hanrei.cover-area:before {
    border: 2px solid #7B47D2
}

.step2 div.hanrei {
    text-align: center
}

#SP_layout {
    margin-top: 18px
}

.step2 div#SP_layout {
    margin-top: 0
}

.attention {
    font-size: 18px;
    color: #F0F
}

.amp {
    margin-top: 20px;
    padding: 5px 15px;
    border-radius: 9px;
    border: 1px solid #969696
}

@media screen and (max-width:767px) {
    .amp {
        padding-top: 15px;
        padding-bottom: 15px;
        border-radius: 4.5px
    }

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

.amp table th>span.i18n {
    line-height: 1.1;
    display: block;
    margin-top: .5em;
    margin-bottom: .5em;
    text-align: center
}

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

    .amp table td,
    .amp table th {
        width: 25%
    }
}

@media screen and (max-width:767px) {

    .amp tbody,
    .amp tbody tr {
        display: block;
        width: 100%
    }
}

@media screen and (min-width:768px) {
    .amp tbody tr:first-child a {
        display: none
    }
}

@media screen and (max-width:767px) {
    .amp tbody tr:first-child a {
        display: block;
        color: #4B1E78;
        line-height: 1
    }
}

@media screen and (min-width:768px) {
    .amp tbody tr:first-child span:last-child {
        display: none
    }
}

@media screen and (max-width:767px) {
    .amp tbody tr:first-child span:last-child {
        display: block;
        line-height: 1
    }

    .amp tbody tr:last-child {
        display: none;
        width: 100%
    }
}

.amp table th {
    min-width: 25%;
    text-align: left;
    font-weight: 600;
    line-height: 2em
}

.amp table td,
.amp table td a {
    text-align: center;
    font-size: 18px
}

.yimsa_lang_ru .amp table th {
    line-height: 1.2
}

@media screen and (min-width:768px) {
    .amp table th {
        font-size: 18px;
        text-align: center
    }

    .yimsa_lang_ru .amp table th {
        padding-left: .5em;
        padding-right: .5em
    }

    .step2 #NB_button,
    .step3 #NB_button {
        margin-top: 55px
    }
}

.amp table td {
    line-height: 2em;
    color: #333;
    font-weight: 700
}

@media screen and (max-width:767px) {
    .amp table th {
        display: block;
        text-align: center;
        width: 100%;
        padding-top: 15px
    }

    .amp table th:first-child,
    .yimsa_lang_ru .amp table th:first-child {
        padding-top: 0
    }

    .amp table td {
        display: block;
        text-align: center;
        line-height: 1;
        width: 100%
    }
}

.amp table td a {
    line-height: 2em;
    color: #4B1E78;
    font-weight: 700;
    font-family: Oswald, 'ヒラギノ角ゴシック', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif
}

.S3R_td1 {
    font-weight: 700;
    color: #333;
    text-align: left
}

.step2 .back,
.step2 .next,
.step3 .back,
.step3 .next {
    font-size: 18px;
    font-weight: 700;
    background-color: transparent;
    border: none
}

@media screen and (max-width:767px) {

    .step2 #NB_button,
    .step3 #NB_button {
        margin-top: 30px
    }

    .step2 .back,
    .step2 .next,
    .step3 .back,
    .step3 .next {
        font-size: 16px
    }
}

.step2 .next,
.step3 .next {
    color: #4B1E78;
    margin-left: auto
}

.step2 .next:after,
.step3 .next:after {
    position: relative;
    top: 4px;
    content: " >";
    font-size: 20px
}

.step2 .back,
.step3 .back {
    color: #4B1E78
}

.step2 .back:before,
.step3 .back:before {
    position: relative;
    top: 4px;
    content: "< ";
    font-size: 20px
}

.step3 .qty {
    text-align: center;
    line-height: 1
}

@media screen and (min-width:768px) {
    .step3 .qty {
        padding-top: 2px;
        padding-bottom: 4px
    }

    .step3 .aS_td2 {
        padding-left: 0;
        padding-bottom: 15px
    }
}

.step3 .aS_td2 span {
    color: #333;
    font-size: 18px
}

@media screen and (max-width:767px) {
    .step3 .qty {
        padding-top: 4px;
        padding-bottom: 15px
    }

    .step3 .aS_td2 span {
        text-align: center;
        font-size: 16px;
        display: inline-block;
        padding-top: 4px
    }
}

.aS_td2,
.aS_td3,
.amp-SP-wrap>table:first-child td,
.amp-SP-wrap>table:first-child th,
.step3 .aS_td2 .T_line,
.step3 .aS_td2 a,
.step3 .condition h2,
.step3_middle h2 {
    font-size: 18px
}

.step3 .aS_td2 a {
    display: block;
    text-align: center;
    color: #4B1E78;
    font-weight: 700
}

.step3 .aS_td3,
.step3 .ad_td3 {
    text-align: center;
    width: 86px
}

@media screen and (max-width:767px) {

    .step3 .aS_td3,
    .step3 .ad_td3 {
        width: 100%
    }

    .amp-SP-wrap>table:first-child .product-type td,
    .amp-SP-wrap>table:first-child .product-type th {
        padding-top: 20px;
        padding-bottom: 15px
    }
}

.step3 .aS_td3 {
    display: none
}

.amp-SP-wrap {
    position: relative;
    z-index: 10;
    border: 1px solid #969696;
    border-radius: 9px
}

@media screen and (min-width:768px) {
    .amp-SP {
        min-width: 307px;
        width: 50%;
        max-width: 50%
    }

    .amp-SP-wrap>table:first-child {
        width: 100%
    }
}

@media screen and (max-width:767px) {

    .amp-SP-wrap>table:first-child .b_line.grp-sw_entire td,
    .amp-SP-wrap>table:first-child .b_line.grp-sw_entire th {
        padding-top: 20px;
        padding-bottom: 10px
    }
}

.amp-SP img {
    max-width: 132px;
    max-height: 70px;
    width: auto;
    margin-bottom: 20px
}

.amp-SP table {
    padding: 5px 15px
}

.amp-SP tr {
    height: 3em
}

.amp-SP td {
    text-align: center
}

.aS_td1 {
    width: 180px
}

.aS_td2 {
    text-align: left !important;
    padding-left: 20px
}

.aS_td3 {
    width: 40px;
    padding-right: 10px
}

@media screen and (min-width:768px) {
    .step3_right {
        min-width: 246px;
        width: 50%;
        max-width: 50%
    }

    .step3_right .condition {
        display: none
    }
}

.step3_right table {
    width: 100%
}

@media screen and (max-width:767px) {
    .amp-SP tr {
        height: auto
    }

    .aS_td2 {
        padding-left: 0
    }

    .step3_right .condition table,
    .step3_right .condition table tr {
        display: block
    }

    .step3_right .condition table td,
    .step3_right .condition table th {
        padding-top: .3em;
        padding-bottom: .3em;
        line-height: 1.2;
        display: block
    }

    .step3_right .condition table td {
        padding-bottom: 1em
    }
}

.step3_right .condition h2 {
    padding-top: 0
}

.step3_right svg {
    margin-top: -9px
}

.step3_right img {
    width: 246px
}

.condition {
    margin-top: 80px
}

.step2 .condition {
    margin-top: 5px
}

@media screen and (max-width:767px) {
    .step2 .condition {
        margin-top: 0
    }
}

.step3 .condition {
    margin-top: 30px
}

.step3_middle {
    display: flex;
    justify-content: space-between
}

.step3_middle h2 {
    margin: 0 0 20px;
    padding-top: 40px
}

.step3_middle .layout {
    position: relative
}

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

    .step3_middle h2 {
        margin-bottom: 25px
    }

    .step3_middle .step3_right h2 {
        margin-bottom: 15px
    }

    .step3_middle .layout {
        margin-left: auto;
        margin-right: auto
    }

    .step3>.condition {
        display: none
    }
}

.step3_middle .layout~.hanrei {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0
}

.step3 .condition h2 {
    margin-bottom: 1em
}

.step3 .condition th {
    text-align: left;
    font-weight: 700;
    color: #333
}

.step3 .condition td {
    text-align: left;
    color: #333;
    font-weight: 400 !important
}

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

    .step3 .condition th,
    .step3 .condition th+td {
        padding-right: 1em
    }

    .step3_middle .step3_right {
        padding-left: 50px
    }

    .step3_middle .layout {
        left: -10px
    }

    .step3 .condition th,
    .step3 .condition tr {
        display: block
    }

    .step3 .condition td {
        display: block;
        padding-bottom: 26px
    }
}

@media screen and (max-width:767px) {
    .step3 .condition h2 {
        text-align: left;
        font-size: 16px;
        margin-bottom: 4px
    }

    .step3 .condition th {
        font-size: 16px
    }

    .step3 .condition td {
        font-size: 16px;
        padding-bottom: 26px
    }
}

#Restore_button .btn-contact,
#Restore_button .btn-restore {
    font-size: 18px;
    line-height: 1.2;
    min-width: 200px;
    display: flex
}

div.step1,
div.step2,
div.step3 {
    display: none
}

div.step1.current,
div.step2.current,
div.step3.current {
    display: block
}

.step3 div.sat-swf,
.step3 div.spk-sel-pri,
.step3 div.spk-sel-sec,
.step3 div.spk-sel-sec div,
.step3 div.spkamp-sel,
.step3 div.spkamp_exp-sel,
.step3 div.sw-sel-sec {
    text-align: center !important
}

.step2 .spkamp_exp-sel {
    text-align: center
}

.step3 div.sat-swf {
    line-height: 1
}

tr.grp-spk.hiddenx,
tr.grp-spk_exp.hiddenx,
tr.grp-sw.hiddenx,
tr.grp-sw_entire.hiddenx,
tr.grp-sw_exp.hiddenx,
tr.spk-sel.hiddenx,
tr.spkamp-sel.hiddenx,
tr.spkamp_exp-sel.hiddenx,
tr.sw-sel.hiddenx,
tr.swamp-sel.hiddenx,
tr.swamp_exp-sel.hiddenx {
    visibility: collapse
}

td.hiddenx {
    visibility: hidden
}

input.H_btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0
}

.installation-sample .sample-item,
.layout-sample .sample-item {
    text-align: center;
    margin-top: 15px
}

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

    .step2 .spkamp_exp-sel.hiddenx,
    .step2 .swamp-sel.hiddenx,
    .step2 .swamp_exp-sel.hiddenx {
        display: table-cell !important
    }

    .installation-sample,
    .layout-sample {
        display: flex;
        justify-content: center;
        margin-left: -15px;
        margin-right: -15px
    }

    .installation-sample .sample-item,
    .layout-sample .sample-item {
        padding-left: 15px;
        padding-right: 15px;
        min-width: 33.3%;
        max-width: 33.3%
    }
}

.installation-sample div img,
.layout-sample div img {
    width: 100%;
    height: auto;
    display: block;
    margin-top: .2em
}

.sat-swf.hiddenx,
.step3 #NB_button .btn-top:after {
    display: none
}

div.sat-swf {
    margin-top: .3em
}

.step3 #NB_button {
    margin-top: 10px
}

#Restore_button {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 45px
}

@media screen and (max-width:767px) {
    #Restore_button {
        margin-top: 30px;
        margin-bottom: 30px
    }
}

#Restore_button .btn-restore {
    padding: .5em 1em;
    color: #4B1E78;
    align-items: center;
    justify-content: center;
    border-radius: 21px
}

#Restore_button .btn-contact {
    padding: .5em 1em;
    background-color: #4B1E78;
    border: 1px solid #4B1E78;
    color: #fff;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    border-radius: 21px;
    text-decoration: none
}

@media screen and (max-width:767px) {
    #Restore_button .btn-contact {
        margin-top: 9px
    }
}

#toast {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none
}

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

#toast>div {
    position: relative;
    pointer-events: auto;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 15px;
    width: 300px;
    min-width: 300px;
    height: 52px;
    border-radius: 40px;
    text-align: center;
    -moz-box-shadow: 0 0 3px #999;
    -webkit-box-shadow: 0 0 3px #999;
    box-shadow: 0 0 3px #999;
    color: #fff;
    background: #4B1E78
}

@media screen and (max-width:767px) {
    #toast>div {
        width: 100%
    }
}