.ur_cs_container {
    container-type: inline-size;
}
#ur_cs {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0;
    background-color: #f4f3f1;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    height: 832px;
    background-size: auto auto;
    background-color: rgba(240, 239, 236, 1);
    background-image: repeating-linear-gradient(154deg, transparent, transparent 24px, #f4f3f1 24px, rgba(244, 243, 241, 1) 48px );
}
#ur_cs .fukidashi {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    max-width: 560px;
    filter: drop-shadow(0 4px 30px rgba(0, 0, 0, 0.1));
    background: #009f82;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    line-height: 1.6em;
    padding: 16px;
    border-radius: 32px;
    opacity: .95;
    position: absolute;
    bottom: 224px;
    left: 50%;
    z-index: 8;
    animation: floating-y 1.2s ease-in-out infinite alternate-reverse;
    transition: 1s ease-in;
  }
  .ur_cs_single .fukidashi {
    bottom: 154px !important;
  }
  #ur_cs .fukidashi::after {
    content: '';
    display: block;
    width: 16px;
    height:16px;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    background: #009f82;
    position: absolute;
    bottom: -15px;
    right: 54px;
  }
  @keyframes floating-y {
    0% {
      transform: translateY(-5%) translateX(-50%);
    }
    100% {
      transform: translateY(5%) translateX(-50%);
    }
  }
  #ur_cs.info_off .fukidashi {
    animation: fade_off .3s ease-out forwards normal;
  }
  @keyframes fade_off {
    0% {
      opacity: 1;
      transform: translateY(-5%) translateX(-50%) scale(1);
    }
    100% {
      opacity: 0;
      transform: translateY(5%) translateX(-50%) scale(.6);
    }
  }
#ur_cs * {
    box-sizing: border-box;
}
.ur_cs_container + p {
    font-size: 14px;
    line-height: 1.4em;
    width: calc(100% - 32px);
    max-width: 714px;
    margin: 16px auto 40px;
    padding: 0;
}
#ur_cs img {
    width:100%;
    margin: 0;
}
.cs_logo {
    width: 220px;
    position: absolute;
    top: 20px;
    left: 32px;
    z-index: 2;
    filter: drop-shadow(10px 10px 10px #fff);
}
.ur_cs_content {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    top: 16px;
    z-index: 2;
    transition: .2s ease-out;
}
.cs_cp {
    margin: 0 16px;
    padding: 24px;
    background: #fff;
    border-radius: 16px;
    height: 650px;
    overflow: auto;
    background: rgba(255, 255, 255, .76);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 832px;
    z-index: 10;
    transition: .3s cubic-bezier(0.6, 0.2, 0.1, 1);
}
.cs_result {
    height: 832px;
    padding: 0;
    position: relative;
    z-index: 1;
}
.cs_cp.cs_cp_single {
    height: 460px !important;
}
input[type="checkbox"]:checked ~ .ur_cs_content .cs_cp.cs_cp_single{
    top: 216px !important;
}
input[type="checkbox"]:checked ~ .fukidashi{
   display: none !important;
}
.ur_cs_single,
.cs_result.cs_result_single {
    height: 766px !important;
}
.cs_button_cp {
    width: 100%;
    position: absolute;
    bottom:84px;
    left: 50%;
    z-index: 3;
    transform: translateX(-50%);
    transition: .3s cubic-bezier(0.6, 0.2, 0.1, 1);
}
.cs_size_control {
    height: 100%;
    transform: scale(1);
    margin-bottom: 80px;
    position: relative;
}
.cs_result .frame,
.cs_result .seat,
.cs_result .seat::before,
.cs_result .frame_wn,
.cs_result .frame_oil {
    width: 480px;
    height: 665px;
    margin: 0 auto;
    background-image: url(https://teiza.jp/apps/note/common/ur_colorsimulator/frame_color.png);
    background-size: 3840px 665px;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: relative;
    z-index: 0;
}
.cs_result .frame_wn {
    background-image: url(https://teiza.jp/apps/note/common/ur_colorsimulator/frame_wn.png);
    background-size: 480px 665px;
}
.cs_result .frame_oil {
    background-image: url(https://teiza.jp/apps/note/common/ur_colorsimulator/frame_oil.png);
    background-size: 480px 665px;
}
.cs_result.frame_color_full .frame {
    background-image: url(https://teiza.jp/apps/note/common/ur_colorsimulator/frame_color_full.png) !important;
    background-size: 4800px 665px;
}
.cs_result .seat {
    background-image: url(https://teiza.jp/apps/note/common/ur_colorsimulator/seat_f.png);
    background-size: 5280px 1330px;
}
.cs_result.frame_color_full .frame.f-ol .seat {
    top: 4px;
}
.cs_result.frame_color_full .frame.f-wn .seat {
    top: 2px;
}
.cs_result .seat::before {
    content: '';
    display: block;
    background-image: url(https://teiza.jp/apps/note/common/ur_colorsimulator/frame_p_color.png);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.cs_result.frame_color_full .frame .seat::before {
    content: '';
    display: block;
    background-image: url(https://teiza.jp/apps/note/common/ur_colorsimulator/frame_p_color_full.png?01) !important;
    background-size: 4800px 665px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.cs_result.frame_color_full .frame.f-ol .seat::before {
    top: -2px;
}
.cs_result .frame_wn .seat::before {
    background-image: url(https://teiza.jp/apps/note/common/ur_colorsimulator/frame_p_wn.png);
    background-size: 480px 665px;
}
.cs_result .frame_oil .seat::before {
    background-image: url(https://teiza.jp/apps/note/common/ur_colorsimulator/frame_p_oil.png);
    background-size: 480px 665px;
}
.cs_result .frame {
    margin-bottom: -56px!important;
    z-index: 1;
}
.cs_result .frame.f-fs,
.cs_result .frame.f-fs .seat::before,
.cs_result .seat.s-f-db {
    background-position: -480px 0;
}
.cs_result .frame.f-wh,
.cs_result .frame.f-wh .seat::before,
.cs_result .seat.s-f-og {
    background-position: -960px 0;
}
.cs_result .frame.f-pb,
.cs_result .frame.f-pb .seat::before,
.cs_result .seat.s-f-bg {
    background-position: -1440px 0;
}
.cs_result .frame.f-ab,
.cs_result .frame.f-ab .seat::before,
.cs_result .seat.s-f-ms {
    background-position: -1920px 0;
}
.cs_result .frame.f-ib,
.cs_result .frame.f-ib .seat::before,
.cs_result .seat.s-f-lb {
    background-position: -2400px 0;
}
.cs_result .frame.f-cm,
.cs_result .frame.f-cm .seat::before,
.cs_result .seat.s-f-gr {
    background-position: -2880px 0;
}
.cs_result .frame.f-cl,
.cs_result .frame.f-cl .seat::before,
.cs_result .seat.s-f-id {
    background-position: -3360px 0;
}
.cs_result .frame.f-ol,
.cs_result .frame.f-ol .seat::before,
.cs_result .seat.s-f-cg {
    background-position: -3840px 0;
}
.cs_result .frame.f-wn,
.cs_result .frame.f-wn .seat::before,
.cs_result .seat.s-f-pb {
    background-position: -4320px 0;
}
.cs_result .seat.s-g-og {
    background-position: 0 -665px;
}
.cs_result .seat.s-g-wh {
    background-position: -480px -665px;
}
.cs_result .seat.s-g-gr {
    background-position: -960px -665px;
}
.cs_result .seat.s-g-yl {
    background-position: -1440px -665px;
}
.cs_result .seat.s-g-bk {
    background-position: -1920px -665px;
}
.cs_result .seat.s-g-cl {
    background-position: -2400px -665px;
}
.cs_result .seat.s-g-pb {
    background-position: -2880px -665px;
}
.cs_result .seat.s-g-ab {
    background-position: -3360px -665px;
}
.cs_result .seat.s-g-rb {
    background-position: -3840px -665px;
}
.cs_result .seat.s-g-cp {
    background-position: -4320px -665px;
}
.cs_result .seat.s-bonbon {
    background-position: -4800px -665px;
}
.cs_result .seat.s-tsumiki {
    background-position: -4800px 0;
}
.cs_result .frame.changeA {
    transform: translateY(2px);
}
.cs_result .frame.changeB .seat {
    transform: translateY(2px);
    transition: .2s;
}
.cs_result .frame.changeB .seat::before {
    transform: translateY(-2px);
    transition: .2s;
}
.color_changer {
    display: flex;
    align-items: center;
    gap: 0px;
    width: 90%;
    max-width: 560px;
    margin: 0 auto 6px;
    padding: 4px;
    border-radius: 32px;
    position: relative;
    z-index: 2;
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.57);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.color_changer button {
    border: 2px solid #fff;
    background: #ea731e;
    color: #fff;
    height: 56px;
    width: 56px;
    border-radius: 28px;
    overflow: hidden;
    text-indent: 10em;
    position: relative;
    transition: .2s;
}
.color_changer button:hover{
    filter: brightness(1.1);
}
.color_changer button::before {
    content:'';
    display: block;
    width: 8px;
    height: 8px;
    transform-origin:center;
    border-top: 4px solid #fff;
    border-left: 4px solid #fff;
    transform: rotate(135deg);
    position: absolute;
    top: 20px;
    left: 18px;
}
.color_changer #prevA::before,
.color_changer #prevB::before {
    transform: rotate(-45deg);
    left: 20px;
}
.color_changer .select_color {
    display: flex;
    align-items: center;
    gap: 16px;
    width: calc(100% - 114px);
    padding-left: 16px;
}
.select_color span,
.cs_select_cp span {
    background-color: #231816;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 16px;
    white-space: nowrap;
}
.cs_select_cp span {
    display: block;
    margin-bottom: 24px;
    border-radius: 8px;
}
#selectedALabel,
#selectedBLabel {
    font-size: 16px;
    font-weight: 600;
}
#updown {
    display: none;
}
.cs_list {
    display: inline-block;
    position: absolute;
    bottom: 17px;
    left: 50%;
    z-index: 10;
    transform: translateX(-50%);
    width: 200px;
    height: 40px;
    padding: 6px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 32px;
    background-color: #271b19;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    color: #fff;
    overflow: hidden;
    transition: .2s;
}
.cs_list:hover {
    background: #ea731e;
}
.cs_list:active {
    bottom: 13px;
}
.color_changer button:active {
    transform: scale(1.05);
}
.cs_list span {
    display: block;
    width: 100%;
    height: 24px;
    text-align: center;
    margin-bottom: 20px;
    transition: .2s ease-out;
    position: relative;
}
/*.cs_list::before {
    content:'';
    display: block;
    width: 6px;
    height: 6px;
    transform-origin:center;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    transform: rotate(45deg);
    position: absolute;
    top: 17px;
    left: 18px;
    border-radius: 1px;
    transition: .2s;
}*/
.cs_list span:first-child::before {
    content: '';
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%23ffffff"> <circle class="cls-1" cx="64" cy="64" r="64"/><circle class="cls-1" cx="256" cy="64" r="64"/><circle class="cls-1" cx="448" cy="64" r="64"/><circle class="cls-1" cx="64" cy="256" r="64"/><circle class="cls-1" cx="256" cy="256" r="64"/><circle class="cls-1" cx="448" cy="256" r="64"/><circle class="cls-1" cx="64" cy="448" r="64"/><circle class="cls-1" cx="256" cy="448" r="64"/><circle class="cls-1" cx="448" cy="448" r="64"/></svg>');
    display: block;
    position: absolute;
    top: 6px;
    left: -16px;
    content: '';
    z-index: 9;
    width: 16px;
    height: 16px;
    background-size: cover;
}
.cs_list span:last-child::before {
    content: '';
    display: block;
    position: absolute;
    top: 2px;
    left: -24px;
    content: '';
    z-index: 9;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    border: 4px solid #fff;
}
input[type="checkbox"]:checked ~ .ur_cs_content .cs_cp{
    top: 90px;
}
input[type="checkbox"]:checked ~ label span:first-child{
    margin-top: -44px;
}
input[type="checkbox"]:checked ~ .cs_list::before {
    transform: rotate(225deg);
    top: 13px;
}
input[type="checkbox"]:checked ~ .ur_cs_content .cs_result .cs_button_cp {
    bottom:-140px;
}
#AContainer,
#BContainer{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
}
#AContainer {
    margin-bottom: 32px;
}
#AContainer div,
#BContainer div{
    display: flex;
}
.cs_list input,
.cs_select_cp div input{
    display: none;
}
.cs_select_cp div div label{
    display: flex;
    align-items: center;
    gap: 8px;
    transition: .2s;
    border-radius: 24px;
    width: 100%;
}
.cs_select_cp div div label:hover{
    background-color: #ffb977;
    transform: translateY(1px);
}
.cs_select_cp div div {
    width: calc((100% - 32px) / 3);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2em;
    display: flex;
    gap: 8px;
    align-items: center;
    position: relative;
}
.cs_select_cp div div label::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 16px;
    background: #231816;
    border:2px solid #231816;
}
.cs_select_cp_seat div div:nth-child(n+1):nth-child(-n+10) label::before {
    background-image: url(https://teiza.jp/apps/note/common/ur_colorsimulator/fab.png);
    background-size: 24px;
}
.cs_select_cp_seat div div:nth-child(n+13):nth-child(-n+23) label::before {
    background-image: url(https://teiza.jp/apps/note/common/ur_colorsimulator/gh.png);
    background-size: cover;
}
.cs_select_cp div div input:checked ~ label:after {
    content: '';
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 441.02" fill="%23231816"><path d="M469.4,0C334.09,75.17,197.11,289.01,197.11,289.01l-123.6-140.32L0,218.84l178.73,222.17,65.15-2.5C327.41,187.92,512,20.05,512,20.05L469.4,0Z"/></svg>');
    display: block;
    position: absolute;
    top: -2px;
    left: 4px;
    content: '';
    z-index: 9;
    width: 24px;
    height: 24px;
    background-size: cover;
}
.cs_select_cp_frame div div:first-child label::before {
    background-color: #f0d9c3;/*ナチュラル*/
}
.cs_select_cp_frame div div:nth-child(2) label::before {
    background-color: #f4ca99;/*フロスト*/
}
.cs_select_cp_frame div div:nth-child(3) label::before,
.cs_select_cp_seat div div:nth-child(14) label::before {
    background-color: #f4f4f4;/*ホワイト*/
}
.cs_select_cp_frame div div:nth-child(4) label::before,
.cs_select_cp_seat div div:nth-child(19) label::before,
.cs_select_cp_seat div div:nth-child(10) label::before {
    background-color: #b59b81;/*ペブル*/
}
.cs_select_cp_frame div:nth-child(5) label::before,
.cs_select_cp_seat div div:nth-child(20) label::before,
.cs_select_cp_seat div div:nth-child(6) label::before{
    background-color: #80bac2;/*アクアブルー*/
}
.cs_select_cp_frame div div:nth-child(6) label::before,
.cs_select_cp_seat div div:nth-child(17) label::before {
    background-color: #1f1f1f;/*アイアンブラック*/
}
.cs_select_cp_frame div div:nth-child(7) label::before {
    background-color: #b56d1a;/*キャメル*/
}
.cs_select_cp_frame div div:nth-child(8) label::before,
.cs_select_cp_seat div div:nth-child(18) label::before {
    background-color: #4c1e09;/*チョコレート*/
}
.cs_select_cp_seat div div:first-child label::before {
    background-color: #d87585;/*ピンク*/
}
.cs_select_cp_seat div div:nth-child(2) label::before {
    background-color: #51320e;/*ダークブラウン*/
}
.cs_select_cp_seat div div:nth-child(3) label::before,
.cs_select_cp_seat div div:nth-child(13) label::before {
    background-color: #e88121;/*オレンジ*/
}
.cs_select_cp_seat div div:nth-child(4) label::before {
    background-color: #b59b81;/*ベージュ*/
}
.cs_select_cp_seat div div:nth-child(5) label::before,
.cs_select_cp_seat div div:nth-child(16) label::before {
    background-color: #f5e01f;/*ミモザ*/
}
.cs_select_cp_seat div div:nth-child(7) label::before,
.cs_select_cp_seat div div:nth-child(15) label::before {
    background-color: #389041;/*グリーン*/
}
.cs_select_cp_seat div div:nth-child(8) label::before {
    background-color: #030644;/*インディゴ*/
}
.cs_select_cp_seat div div:nth-child(9) label::before {
    background-color: #363131;/*チャコールグレー*/
}
.cs_select_cp_seat div div:nth-child(21) label::before {
    background-color: #d84d6d;/*ラズベリー*/
}
.cs_select_cp_seat div div:nth-child(22) label::before {
    background-color: #d09abe;/*コーラルピンク*/
}
.cs_select_cp_seat div div:nth-child(11) label::before {
    background-image: url(https://teiza.jp/apps/note/common/ur_colorsimulator/i_bonbon.jpg);
    background-image: 20px;
    background-color: #f09b7f;
}
.cs_select_cp_seat div div:nth-child(12) label::before {
    background-image: url(https://teiza.jp/apps/note/common/ur_colorsimulator/i_tsumiki.jpg);
    background-size: 40px;
    background-color: #93c6e5;
}
.cs_select_cp_frame div:nth-child(9) label::before {
    background-image: url(https://teiza.jp/apps/note/common/ur_colorsimulator/frame_color_full.png);
    background-size: 4800px 665px;
    background-position: 420px -460px;
    background-color: #4c0808;
}
.cs_select_cp_frame div:nth-child(10) label::before {
    background-image: url(https://teiza.jp/apps/note/common/ur_colorsimulator/frame_color_full.png);
    background-size: 4800px 665px;
    background-position: 4040px 500px;
    background-color: #e5bc90;
}
.cs_select_cp_seat div div:nth-child(2) input:checked ~ label::after,
.cs_select_cp_seat div div:nth-child(9) input:checked ~ label::after,
.cs_select_cp_frame div div:nth-child(8) input:checked ~ label::after,
.cs_select_cp_seat div div:nth-child(18) input:checked ~ label::after,
.cs_select_cp_seat div div:nth-child(8) input:checked ~ label::after,
.cs_select_cp_frame div div:nth-child(6) input:checked ~ label::after,
.cs_select_cp_seat div div:nth-child(17) input:checked ~ label::after,
.cs_select_cp_seat div div:nth-child(18) input:checked ~ label::after,
.cs_select_cp_seat div div:nth-child(19) input:checked ~ label::after{
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 441.02" fill="%23ffffff"><path d="M469.4,0C334.09,75.17,197.11,289.01,197.11,289.01l-123.6-140.32L0,218.84l178.73,222.17,65.15-2.5C327.41,187.92,512,20.05,512,20.05L469.4,0Z"/></svg>');
}


@container (max-width: 680px) {/*--------------------------------*/
.cs_select_cp div div {
        font-size: 12px;
}
.cs_logo {
    width: 180px;
}
}@container (max-width: 480px) {/*--------------------------------*/
#ur_cs,
.cs_result {
    max-height: 720px;
}
.ur_cs_single,
.cs_result.cs_result_single {
    max-height: 660px !important;
}
.cs_result .frame,
.cs_result .seat,
.cs_result .seat::before {
    width: 400px;
    height: 544px;
}
.cs_result,
.seat::before {
    background-size: 400px 554px;
}
.cs_result .frame,
.cs_result .seat::before {
    background-size: 3200px 554px;
}
.cs_result.frame_color_full .frame,
.cs_result.frame_color_full .frame .seat::before {
    background-size: 3999px 554px;
}
.cs_result .frame_wn,
.cs_result .frame_oil,
.cs_result.cs_result_single .seat::before {
    background-size: 400px 554px;
}
.cs_result .seat {
    background-size: 4400px 1108px;
}
.cs_button_cp {
    bottom: 84px;
}
.cs_logo {
    width: 120px;
    top: 16px;
    left: 24px;
}
.select_color span,
.cs_select_cp span {
    top: 16px;
    font-size: 12px;
}
#selectedALabel, #selectedBLabel {
    font-size: 14px;
    line-height: 1.2em;
}
.color_changer .select_color {
    gap: 8px;
    padding-left: 6px;
}
.cs_result .frame.f-fs,
.cs_result .frame.f-fs .seat::before,
.cs_result .seat.s-f-db {
    background-position: -400px 0;
}
.cs_result .frame.f-wh,
.cs_result .frame.f-wh .seat::before,
.cs_result .seat.s-f-og {
    background-position: -800px 0;
}
.cs_result .frame.f-pb,
.cs_result .frame.f-pb .seat::before,
.cs_result .seat.s-f-bg {
    background-position: -1200px 0;
}
.cs_result .frame.f-ab,
.cs_result .frame.f-ab .seat::before,
.cs_result .seat.s-f-ms {
    background-position: -1600px 0;
}
.cs_result .frame.f-ib,
.cs_result .frame.f-ib .seat::before,
.cs_result .seat.s-f-lb {
    background-position: -2000px 0;
}
.cs_result .frame.f-cm,
.cs_result .frame.f-cm .seat::before,
.cs_result .seat.s-f-gr {
    background-position: -2400px 0;
}
.cs_result .frame.f-cl,
.cs_result .frame.f-cl .seat::before,
.cs_result .seat.s-f-id {
    background-position: -2800px 0;
}
.cs_result .seat.s-f-cg,
.cs_result .frame.f-ol,
.cs_result .frame.f-ol .seat::before {
    background-position: -3200px 0;
}
.cs_result .frame.f-wn,
.cs_result .frame.f-wn .seat::before,
.cs_result .seat.s-f-pb {
    background-position: -3600px 0;
}
.cs_result .seat.s-g-og {
    background-position: 0 -554px;
}
.cs_result .seat.s-g-wh {
    background-position: -400px -554px;
}
.cs_result .seat.s-g-gr {
    background-position: -800px -554px;
}
.cs_result .seat.s-g-yl {
    background-position: -1200px -554px;
}
.cs_result .seat.s-g-bk {
    background-position: -1600px -554px;
}
.cs_result .seat.s-g-cl {
    background-position: -2000px -554px;
}
.cs_result .seat.s-g-pb {
    background-position: -2400px -554px;
}
.cs_result .seat.s-g-ab {
    background-position: -2800px -554px;
}
.cs_result .seat.s-g-rb {
    background-position: -3200px -554px;
}
.cs_result .seat.s-g-cp {
    background-position: -3600px -554px;
}
.cs_result .seat.s-bonbon {
    background-position: -4000px -554px;
}
.cs_result .seat.s-tsumiki {
    background-position: -4000px 0;
}
.cs_select_cp div div {
    width: calc((100% - 12px) / 2);
}
#AContainer {
    margin-bottom: 24px;
}
.cs_select_cp span {
    margin-bottom: 16px;
}
.cs_cp {
    margin: 0 8px;
    padding: 16px;
    height: 580px;
}
input[type="checkbox"]:checked ~ .ur_cs_content .cs_cp {
    top: 50px;
}
input[type="checkbox"]:checked ~ .ur_cs_content .cs_cp.cs_cp_single {
    top: 112px !important;
}
.ur_cs_container + p {
    font-size: 12px;
    margin: 8px auto 40px;
}
#AContainer, #BContainer {
    gap: 12px;
}
.cs_list {
    font-size: 14px;
    height: 38px;
}
.cs_list span:first-child::before {
    top: 5px;
}
.cs_list span:last-child::before {
    top: 1px;
}
#ur_cs .fukidashi {
    font-size: 16px;
}
}@container (max-width: 400px) {/*--------------------------------*/
.cs_result .frame,
.cs_result .seat,
.cs_result .seat::before {
    width: 300px;
    height: 416px;
}
.cs_result .frame,
.cs_result .seat::before {
    background-size: 2400px 416px;
}
.cs_result.frame_color_full .frame,
.cs_result.frame_color_full .frame .seat::before  {
    background-size: 3003px 416px;
}
.cs_result .seat {
    background-size: 3300px 831px;
}
#ur_cs,
.cs_result {
    max-height: 600px;
}
.cs_result .frame_wn,
.cs_result .frame_oil,
.cs_result.cs_result.cs_result_single .seat::before {
    background-size: 300px 416px;
}
.ur_cs_single,
.cs_result.cs_result_single {
    max-height: 530px !important;
}
.cs_cp {
    height: 460px;
}
input[type="checkbox"]:checked ~ .ur_cs_content .cs_cp.cs_cp_single {
    top: 52px !important;
}
.cs_cp.cs_cp_single {
    height: 390px !important;
}
.cs_result .frame.f-fs,
.cs_result .frame.f-fs .seat::before,
.cs_result .seat.s-f-db {
    background-position: -300px 0;
}
.cs_result .frame.f-wh,
.cs_result .frame.f-wh .seat::before,
.cs_result .seat.s-f-og {
    background-position: -600px 0;
}
.cs_result .frame.f-pb,
.cs_result .frame.f-pb .seat::before,
.cs_result .seat.s-f-bg {
    background-position: -900px 0;
}
.cs_result .frame.f-ab,
.cs_result .frame.f-ab .seat::before,
.cs_result .seat.s-f-ms {
    background-position: -1200px 0;
}
.cs_result .frame.f-ib,
.cs_result .frame.f-ib .seat::before,
.cs_result .seat.s-f-lb {
    background-position: -1500px 0;
}
.cs_result .frame.f-cm,
.cs_result .frame.f-cm .seat::before,
.cs_result .seat.s-f-gr {
    background-position: -1800px 0;
}
.cs_result .frame.f-cl,
.cs_result .frame.f-cl .seat::before,
.cs_result .seat.s-f-id {
    background-position: -2100px 0;
}
.cs_result .frame.f-ol,
.cs_result .frame.f-ol .seat::before,
.cs_result .seat.s-f-cg {
    background-position: -2400px 0;
}
.cs_result .frame.f-wn,
.cs_result .frame.f-wn .seat::before,
.cs_result .seat.s-f-pb {
    background-position: -2700px 0;
}
.cs_result .seat.s-g-og {
    background-position: 0 -416px;
}
.cs_result .seat.s-g-wh {
    background-position: -300px -416px;
}
.cs_result .seat.s-g-gr {
    background-position: -600px -416px;
}
.cs_result .seat.s-g-yl {
    background-position: -900px -416px;
}
.cs_result .seat.s-g-bk {
    background-position: -1200px -416px;
}
.cs_result .seat.s-g-cl {
    background-position: -1500px -416px;
}
.cs_result .seat.s-g-pb {
    background-position: -1800px -416px;
}
.cs_result .seat.s-g-ab {
    background-position: -2100px -416px;
}
.cs_result .seat.s-g-rb {
    background-position: -2400px -416px;
}
.cs_result .seat.s-g-cp {
    background-position: -2700px -416px;
}
.cs_result .seat.s-bonbon {
    background-position: -3000px -416px;
}
.cs_result .seat.s-tsumiki {
    background-position: -3000px 0;
}
.cs_cp {
    height: 460px;
}
#ur_cs .fukidashi {
    font-size: 14px;
}
}