@charset "utf-8";

body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-image: url("img/mainbg.webp");
    background-repeat: repeat-y;
    background-size: contain;
}

.wrapper {
    background-color: #fff;
    margin: 0 auto;
    padding: 0;
    max-width: 80%;
}

.wrapper-in01, .wrapper-in02 {
    margin: 0 40px;
}

.titlelogo {
    max-width: 90%;
    margin: 0 auto;
    padding: 3vw 0;
}
.titlelogo img {
    max-width: 100%;
}

.titlelogo-w {
    max-width: 90%;
    margin: 0 auto;
    padding: 1.5vw 0;
}
.titlelogo-w img {
    max-width: 100%;
}


/* --------- ステージ部分 --------------------------- */
.stageout {
    max-width: 950px;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    padding: 0;
}

.stage {
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    padding: 0;
    display: flex;
    border: 5px solid #0000f0;
}

.stageleft {
    width: 40%;
    margin-right: auto;
    position: relative;
    background-color: #0000f0;
}

.tableleft {
    color: #fff;
    font-size: .9vw;
    font-weight: bold;
}
.tableleft tr ,.tableleft td {
    margin: 0;
    padding: .2vw 1.2vw;
}
.tableleft .line {
    width: 1px;
    background-color: #fff;
    padding: 0;
}

.stageright {
    width: 60%;
    position: relative;
}

.titlelogo2 {
    display: none;
}

.titlelogo2.show {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    z-index: 6000;
    width: 90%;
}
.titlelogo2 img {
    max-width: 100%;
    display: inline-block;
    text-align: center;
}

.stageright .omote, .stageright .logo, .stageright .disc_s, .stageright .disc_m,
.stageright .disc_l, .stageright .centerparts, .stageright .ura, .stageright .metal {
    position: absolute;
    bottom: 1.5vw;
} 
.stageright .yago {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    color: #0000f0;
    font-weight: bold;
    font-size: 1vw;
}

.tableleft .stageOmote,
.tableleft .stageCenterparts,
.tableleft .stageLogo,
.tableleft .stageDiscmidium,
.tableleft .stageDiscsmall,
.tableleft .stageDisclarge,
.tableleft .stageUra,
.tableleft .stageMetal {
    display: none;
}
.tableleft .stageOmote.show,
.tableleft .stageCenterparts.show,
.tableleft .stageLogo.show,
.tableleft .stageDiscmidium.show,
.tableleft .stageDiscsmall.show,
.tableleft .stageDisclarge.show,
.tableleft .stageUra.show,
.tableleft .stageMetal.show {
    display: block;
}

.stageright .stageOmote,
.stageright .stageCenterparts,
.stageright .stageLogo,
.stageright .stageDiscmidium,
.stageright .stageDiscsmall,
.stageright .stageDisclarge,
.stageright .stageUra,
.stageright .stageMetal {
    display: none;
}
.stageright .stageOmote.show,
.stageright .stageCenterparts.show,
.stageright .stageLogo.show,
.stageright .stageDiscmidium.show,
.stageright .stageDiscsmall.show,
.stageright .stageDisclarge.show,
.stageright .stageUra.show,
.stageright .stageMetal.show {
    display: block;
    text-align: center;
}
.stageright .stageOmote img,
.stageright .stageCenterparts img,
.stageright .stageLogo img,
.stageright .stageDiscmidium img,
.stageright .stageDiscsmall img,
.stageright .stageDisclarge img,
.stageright .stageUra img,
.stageright .stageMetal img {
    max-width: 88%; 
}

/* 乗算モードの画像 */
.b-centerparts02,.b-centerparts03,.b-centerparts05,.b-centerparts06,.b-centerparts09,
.b-centerparts10,.b-centerparts12,.b-centerparts14,.b-centerparts15,.b-centerparts18,
.b-centerparts20,.b-centerparts22,.b-centerparts24,.b-centerparts27,.b-centerparts29,
.b-centerparts30,.b-centerparts31,.b-centerparts34,.b-centerparts35,.b-centerparts39,
.b-disc_l02,.b-disc_l03,.b-disc_l05,.b-disc_l06,.b-disc_l09,.b-disc_l10,.b-disc_l12,
.b-disc_l14,.b-disc_l15,.b-disc_l18,.b-disc_l20,.b-disc_l22,.b-disc_l24,.b-disc_l27,
.b-disc_l29,.b-disc_l30,.b-disc_l31,.b-disc_l34,.b-disc_l35,.b-disc_l39
.b-disc_s02,.b-disc_s03,.b-disc_s05,.b-disc_s06,.b-disc_s10,.b-disc_s11,.b-disc_s13,
.b-disc_s16,.b-disc_s17,.b-disc_s20,.b-disc_s22,.b-disc_s24,.b-disc_s26,.b-disc_s29,
.b-disc_s31,.b-disc_s32,.b-disc_s33,.b-disc_s36,.b-disc_s37,.b-disc_s41
.b-disc_m02,.b-disc_m03,.b-disc_m05,.b-disc_m06,.b-disc_m10,.b-disc_m11,.b-disc_m13,
.b-disc_m16,.b-disc_m17,.b-disc_m20,.b-disc_m22,.b-disc_m24,.b-disc_m26,.b-disc_m29,
.b-disc_m31,.b-disc_m32,.b-disc_m33,.b-disc_m36,.b-disc_m37,.b-disc_m41
.b-logo02,.b-logo03,.b-logo05,.b-logo06,.b-logo10,.b-logo11,.b-logo13,.b-logo16,
.b-logo17,.b-logo20,.b-logo22,.b-logo24,.b-logo26,.b-logo29,.b-logo31,.b-logo32,
.b-logo33,.b-logo36,.b-logo37,.b-logo41 {
    mix-blend-mode: multiply;
}

.ordernum {
    text-align: center;
    margin-top: 1.5vw;
}

.ordernum-sp {
    display: none;
}

.outputBox {
    background-color: #fff;
    padding: 4px 4px;
    font-size: 3.0vh;
    color: #0000f0;
    font-weight: bold;
}

.ordertxt {
    font-size: 1.9vh;
    font-weight: bold;
    color: #fff;
}





/* メニュー部分のCSSだよ */
.select {
    max-width: 850px;
    width: 100%;
    margin: 0 auto;
}

.menu {
    margin: 30px 0 30px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: left;
}

.menu-comment {
    display: none;
}

.a,.b,.c,.d,.e,.f,.g,.h {
    font-size: .9rem;
    font-weight: bold;
    width: calc(760px / 5);
    height: 30px;
    line-height: 30px;
    display: inline-block;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    letter-spacing: 0.1em;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 30px;
    background-color: #0000f0;
}

.a:hover,.b:hover,.c:hover,.d:hover,
.e:hover,.f:hover,.g:hover,.h:hover {
    background-color: #fff;
    border: 1px solid #0000f0;
    color: #0000f0;
}

.i {
    position: relative;
    font-size: .9rem;
    font-weight: bold;
    width: calc(760px / 5);
    height: 30px;
    line-height: 30px;
    display: inline-block;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    letter-spacing: 0.1em;
    color: #0000f0;
    border: 1px solid #0000f0;
    border-radius: 30px;
    background-color: #fff;
}

.i:hover {
    background-color: #0000f0;
    border: 1px solid #fff;
    color: #fff;
}

.menu-omote,
.menu-centerparts,
.menu-logo,
.menu-disc_s,
.menu-disc_m,
.menu-disc_l,
.menu-ura,
.menu-metal {
    margin-right: auto;
    display: none;
}

.menu-omote.show,
.menu-centerparts.show,
.menu-logo.show,
.menu-disc_s.show,
.menu-disc_m.show,
.menu-disc_l.show,
.menu-ura.show,
.menu-metal.show {
    margin-right: auto;
    display: flex;
    padding: 0 10px;
}

.colorBox {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;   
    align-items: end;
    margin-bottom: 8px;
    margin-left: 20px;
}

.colorBox2 {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    align-items: end;
    margin-bottom: 8px;
}

.colorBox3 {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    align-items: end;
    margin-bottom: 8px;
}

.menu-omote img,
.menu-centerparts img,
.menu-logo img,
.menu-disc_s img,
.menu-disc_m img,
.menu-disc_l img,
.menu-ura img,
.menu-metal img {
    max-height: 150px;
    height: 100%;
}

.imgOmote,
.imgCenterparts,
.imgDisclarge,
.imgDiscmidium,
.imgDiscsmall,
.imgLogo,
.imgUra,
.imgMetal {
    margin-right: 10px;
}

.color {
    position: relative; /* ツールチップの位置の基準に */
}

.color:hover {
    box-shadow: 1px 2px 1px 0 #333;
}

/* メニューの閉じるボタン */
.closeb {
    display: none;
}

/* メニューのオモテとウラ */
.c-omote,.c-ura {
    cursor: pointer;
    width: 80px;
    height: 134px;
}
.omote01,.ura01 {
    background-color: #e6f6f5;
    border: 2px solid #0000f0;
    box-sizing: border-box;
    border-radius: 4px;
}
.omote02,.ura02 {
    background-color: #e6eef0;
    border: 2px solid #0000f0;
    box-sizing: border-box;
    border-radius: 4px;
}
.omote03,.ura03 {
    background-color: #fbfbfd;
    border: 2px solid #0000f0;
    box-sizing: border-box;
    position: relative;
    border-radius: 4px;
}
.omote03::before,.ura03::before {
    content: "●";
    color: #f28124;
    position: absolute;
    top: 26px;
    left: 14px;
    opacity: .3;
}
.omote03::after,.ura03::after {
    content: "●";
    color: #2cfde1;
    position: absolute;
    bottom: 52px;
    right: 14px;
    opacity: .3;
}
.omote03out::before,.ura03out::before {
    content: "●";
    color: #fc2020;
    position: absolute;
    bottom: 16px;
    left: 20px;
    opacity: .3;
}
.omote04,.ura04 {
    background-color: #e6eef0;
    border: 2px solid #0000f0;
    box-sizing: border-box;
    position: relative;
    border-radius: 4px;
}
.omote04::before,.ura04::before {
    content: "★";
    color: #c3c3c3;
    position: absolute;
    top: 26px;
    left: 14px;
}
.omote04::after,.ura04::after {
    content: "★";
    color: #c3c3c3;
    position: absolute;
    bottom: 52px;
    right: 14px;
}
.omote04out::before,.ura04out::before {
    content: "★";
    color: #c3c3c3;
    position: absolute;
    bottom: 16px;
    left: 20px;
}
.omote05,.ura05 {
    background-color: #e6eef0;
    border: 2px solid #0000f0;
    box-sizing: border-box;
    position: relative;
    border-radius: 4px;
}
.omote05::before,.ura05::before {
    content: "★";
    color: #ff4aea;
    position: absolute;
    top: 26px;
    left: 14px;
}
.omote05::after,.ura05::after {
    content: "★";
    color: #1073ff;
    position: absolute;
    bottom: 52px;
    right: 14px;
}
.omote05out::before,.ura05out::before {
    content: "★";
    color: #fff311;
    position: absolute;
    bottom: 16px;
    left: 20px;
}
.omote06,.ura06 {
    background-image: linear-gradient(-45deg, rgb(164, 238, 246), rgba(131, 205, 235, 1));
    border: 2px solid #0000f0;
    box-sizing: border-box;
    border-radius: 4px;
}

/* メニューの中パーツ */
.c-centerparts {
    cursor: pointer;
    width: 35px;
    height: 35px;
}
.centerparts01 { background-color: #db5357; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts02 { background-color: #c66f81; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts03 { background-color: #ff788c; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts04 { background-color: #f480ac; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts05 { background-color: #ffb7d8; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts06 { background-color: #ff7ebf; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts06::before {
    content: "■";
    font-size: .3rem;
    color: #ffffff;
    position: absolute;
    top: 8px;
    left: 8px;
    transform: rotate(45deg);
}
.centerparts06::after {
    content: "■";
    font-size: .5rem;
    color: #ffffff;
    position: absolute;
    bottom: 6px;
    right: 8px;
    transform: rotate(45deg);
}
.centerparts07 { background-color: #f2e4e8; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts07::before {
    content: "●";
    font-size: .3rem;
    color: #ffffff;
    position: absolute;
    top: 8px;
    left: 8px;
    transform: rotate(45deg);
}
.centerparts07::after {
    content: "●";
    font-size: .5rem;
    color: #ffffff;
    position: absolute;
    bottom: 6px;
    right: 8px;
    transform: rotate(45deg);
}
.centerparts08 { background-color: #ffbb7a; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts09 { background-color: #ffc26e; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts10 { background-color: #ffeb24; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts11 { background-color: #ffa08e; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts12 { background-color: #ffcb7e; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts13 { background-color: #ffeb91; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts14 { background-color: #e5e81d; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts15 { background-color: #ffff87; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts15::before {
    content: "■";
    font-size: .3rem;
    color: #ffffff;
    position: absolute;
    top: 8px;
    left: 8px;
    transform: rotate(45deg);
}
.centerparts15::after {
    content: "■";
    font-size: .5rem;
    color: #ffffff;
    position: absolute;
    bottom: 6px;
    right: 8px;
    transform: rotate(45deg);
}
.centerparts16 { background-color: #fff5bd; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts17 { background-color: #7fdf3d; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts18 { background-color: #deff3e; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts19 { background-color: #71c695; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts20 { background-color: #00de75; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts20::before {
    content: "■";
    font-size: .3rem;
    color: #ffffff;
    position: absolute;
    top: 8px;
    left: 8px;
    transform: rotate(45deg);
}
.centerparts20::after {
    content: "■";
    font-size: .5rem;
    color: #ffffff;
    position: absolute;
    bottom: 6px;
    right: 8px;
    transform: rotate(45deg);
}
.centerparts21 { background-color: #006b41; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts22 { background-color: #007f01; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts23 { background-color: #8fdfff; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}


.centerparts24 { background-color: #b1d2ff; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts25 { background-color: #6de2f0; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts26 { background-color: #83c0ff; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts27 { background-color: #0098ff; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts27::before {
    content: "■";
    font-size: .3rem;
    color: #ffffff;
    position: absolute;
    top: 8px;
    left: 8px;
    transform: rotate(45deg);
}
.centerparts27::after {
    content: "■";
    font-size: .5rem;
    color: #ffffff;
    position: absolute;
    bottom: 6px;
    right: 8px;
    transform: rotate(45deg);
}
.centerparts28 { background-color: #0000b7; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts29 { background-color: #0047df; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts30 { background-color: #00398d; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts31 { background-color: #00398d; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts31::before {
    content: "■";
    font-size: .3rem;
    color: #ffffff;
    position: absolute;
    top: 8px;
    left: 8px;
    transform: rotate(45deg);
}
.centerparts31::after {
    content: "■";
    font-size: .5rem;
    color: #ffffff;
    position: absolute;
    bottom: 6px;
    right: 8px;
    transform: rotate(45deg);
}
.centerparts32 { background-color: #cabff3; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts33 { background-color: #9673d7; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts34 { background-color: #805dc4; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts35 { background-color: #7a0070; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts36 { background-color: #b7ac75; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts37 { background-color: #a2a59c; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts38 { background-color: #000000; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts39 { background-color: #b1d3dd; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts40 { background-color: #e6eef0; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts41 { background-color: #ffffff; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts42 { background-color: #e6eef0; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts42::before {
    content: "★";
    font-size: .5rem;
    color: #f54848;
    position: absolute;
    top: 8px;
    left: 8px;
    transform: rotate(45deg);
}
.centerparts42::after {
    content: "★";
    font-size: .5rem;
    color: #bbbb3e;
    position: absolute;
    bottom: 6px;
    right: 8px;
    transform: rotate(45deg);
}
.centerparts43 { background-image: linear-gradient(-45deg, rgb(164, 238, 246), rgba(131, 205, 235, 1)); border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.centerparts44 { background-image: linear-gradient(-45deg, rgb(250, 237, 208), rgba(239, 216, 228, 1)); border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}

  
/* メニューの円盤（大） */
.c-disc_l {
    cursor: pointer;
    width: 35px;
    height: 35px;
}
.disc_l01 { background-color: #db5357; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l02 { background-color: #c66f81; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l03 { background-color: #ff788c; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l04 { background-color: #f480ac; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l05 { background-color: #ffb7d8; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l06 { background-color: #ff7ebf; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l06::before {
    content: "■";
    font-size: .3rem;
    color: #ffffff;
    position: absolute;
    top: 8px;
    left: 8px;
    transform: rotate(45deg);
}
.disc_l06::after {
    content: "■";
    font-size: .5rem;
    color: #ffffff;
    position: absolute;
    bottom: 6px;
    right: 8px;
    transform: rotate(45deg);
}
.disc_l07 { background-color: #f2e4e8; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l07::before {
    content: "●";
    font-size: .4rem;
    color: #d48abd;
    position: absolute;
    top: 8px;
    left: 8px;
    transform: rotate(45deg);
}
.disc_l07::after {
    content: "●";
    font-size: .5rem;
    color: #e34dc3;
    position: absolute;
    bottom: 6px;
    right: 8px;
    transform: rotate(45deg);
}
.disc_l08 { background-color: #ffbb7a; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l09 { background-color: #ffc26e; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l10 { background-color: #ffeb24; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l11 { background-color: #ffa08e; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l12 { background-color: #ffcb7e; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l12::before {
    content: "■";
    font-size: .4rem;
    color: #ffffff;
    position: absolute;
    top: 8px;
    left: 8px;
    transform: rotate(45deg);
}
.disc_l12::after {
    content: "■";
    font-size: .5rem;
    color: #ffffff;
    position: absolute;
    bottom: 6px;
    right: 8px;
    transform: rotate(45deg);
}
.disc_l13 { background-color: #ffeb91; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l14 { background-color: #e5e81d; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l15 { background-color: #ffff87; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l15::before {
    content: "■";
    font-size: .3rem;
    color: #727272;
    position: absolute;
    top: 8px;
    left: 8px;
    transform: rotate(45deg);
}
.disc_l15::after {
    content: "■";
    font-size: .5rem;
    color: #646464;
    position: absolute;
    bottom: 6px;
    right: 8px;
    transform: rotate(45deg);
}
.disc_l16 { background-color: #fff5bd; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l17 { background-color: #7fdf3d; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}

.disc_l18 { background-color: #deff3e; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l19 { background-color: #71c695; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l20 { background-color: #00ed7b; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l20::before {
    content: "■";
    font-size: .3rem;
    color: #ffffff;
    position: absolute;
    top: 8px;
    left: 8px;
    transform: rotate(45deg);
}
.disc_l20::after {
    content: "■";
    font-size: .5rem;
    color: #ffffff;
    position: absolute;
    bottom: 6px;
    right: 8px;
    transform: rotate(45deg);
}
.disc_l21 { background-color: #006b41; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l22 { background-color: #8ba687; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l23 { background-color: #8fdfff; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l24 { background-color: #b1d2ff; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l25 { background-color: #6de2f0; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l26 { background-color: #83c0ff; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l27 { background-color: #0098ff; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l27::before {
    content: "■";
    font-size: .3rem;
    color: #ffffff;
    position: absolute;
    top: 8px;
    left: 8px;
    transform: rotate(45deg);
}
.disc_l27::after {
    content: "■";
    font-size: .5rem;
    color: #ffffff;
    position: absolute;
    bottom: 6px;
    right: 8px;
    transform: rotate(45deg);
}
.disc_l28 { background-color: #0000b7; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l29 { background-color: #0047df; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l30 { background-color: #00398d; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l31 { background-color: #00398d; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l31::before {
    content: "■";
    font-size: .3rem;
    color: #ffffff;
    position: absolute;
    top: 8px;
    left: 8px;
    transform: rotate(45deg);
}
.disc_l31::after {
    content: "■";
    font-size: .5rem;
    color: #ffffff;
    position: absolute;
    bottom: 6px;
    right: 8px;
    transform: rotate(45deg);
}
.disc_l32 { background-color: #cabff3; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l33 { background-color: #9673d7; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l34 { background-color: #805dc4; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l35 { background-color: #7a0070; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l36 { background-color: #b7ac75; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l37 { background-color: #a2a59c; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l38 { background-color: #000000; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l39 { background-color: #b1d3dd; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l40 { background-color: #e6eef0; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l41 { background-color: #ffffff; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l42 { background-color: #e6eef0; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l42::before {
    content: "■";
    font-size: .3rem;
    color: #ffffff;
    position: absolute;
    top: 7px;
    left: 7px;
    transform: rotate(45deg);
}
.disc_l42::after{
    content: "■";
    font-size: .5rem;
    color: #ffffff;
    position: absolute;
    bottom: 6px;
    right: 8px;
    transform: rotate(45deg);
}
.disc_l43 { background-image: linear-gradient(-45deg, rgb(164, 238, 246), rgba(131, 205, 235, 1)); border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_l44 { background-image: linear-gradient(-45deg, rgb(250, 237, 208), rgba(239, 216, 228, 1)); border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}

/* メニューの円盤（中）（小）、MDロゴ */
.c-disc_s, .c-disc_m, .c-logo {
    cursor: pointer;
    width: 35px;
    height: 35px;
}
.disc_s01,.disc_m01,.logo01 { background-color: #db5357; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s02,.disc_m02,.logo02 { background-color: #c66f81; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s03,.disc_m03,.logo03 { background-color: #ff788c; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s04, .disc_m04, .logo04 { background-color: #f480ac; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s05, .disc_m05, .logo05 { background-color: #ffb7d8; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s06, .disc_m06, .logo06 { background-color: #ff7ebf; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s06::before, .disc_m06::before, .logo06::before {
    content: "■";
    font-size: .3rem;
    color: #ffffff;
    position: absolute;
    top: 8px;
    left: 8px;
    transform: rotate(45deg);
}
.disc_s06::after, .disc_m06::after, .logo06::after {
    content: "■";
    font-size: .5rem;
    color: #ffffff;
    position: absolute;
    bottom: 6px;
    right: 8px;
    transform: rotate(45deg);
}
.disc_s07, .disc_m07, .logo07 { background-color: #f2e4e8; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s07::before, .disc_m07::before, .logo07::before {
    content: "●";
    font-size: .4rem;
    color: #d48abd;
    position: absolute;
    top: 8px;
    left: 8px;
    transform: rotate(45deg);
}
.disc_s07::after, .disc_m07::after, .logo07::after {
    content: "●";
    font-size: .5rem;
    color: #e34dc3;
    position: absolute;
    bottom: 6px;
    right: 8px;
    transform: rotate(45deg);
}
.disc_s08, .disc_m08, .logo08 { background-color: #ff5983; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s09, .disc_m09, .logo09 { background-color: #ffbb7a; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s10, .disc_m10, .logo10 { background-color: #ffc26e; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s11, .disc_m11, .logo11 { background-color: #ffeb24; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s12, .disc_m12, .logo12 { background-color: #ffa08e; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s13, .disc_m13, .logo13 { background-color: #ffcb7c; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s13::before, .disc_m13::before, .logo13::before {
    content: "■";
    font-size: .4rem;
    color: #ffffff;
    position: absolute;
    top: 8px;
    left: 8px;
    transform: rotate(45deg);
}
.disc_s13::after, .disc_m13::after, .logo13::after {
    content: "■";
    font-size: .5rem;
    color: #ffffff;
    position: absolute;
    bottom: 6px;
    right: 8px;
    transform: rotate(45deg);
}
.disc_s14, .disc_m14, .logo14 { background-color: #ffd0bf; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s15, .disc_m15, .logo15 { background-color: #ffeb91; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s16, .disc_m16, .logo16 { background-color: #e5e81d; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s17, .disc_m17, .logo17 { background-color: #ffff87; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s17::before, .disc_m17::before, .logo17::before {
    content: "■";
    font-size: .3rem;
    color: #727272;
    position: absolute;
    top: 8px;
    left: 8px;
    transform: rotate(45deg);
}
.disc_s17::after, .disc_m17::after, .logo17::after {
    content: "■";
    font-size: .5rem;
    color: #646464;
    position: absolute;
    bottom: 6px;
    right: 8px;
    transform: rotate(45deg);
}
.disc_s18, .disc_m18, .logo18 { background-color: #fff5bd; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s19, .disc_m19, .logo19 { background-color: #7fdf3d; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s20, .disc_m20, .logo20 { background-color: #deff3e; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s21, .disc_m21, .logo21 { background-color: #71c695; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s22, .disc_m22, .logo22 { background-color: #00ed7b; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s22::before, .disc_m22::before, .logo22::before {
    content: "■";
    font-size: .3rem;
    color: #ffffff;
    position: absolute;
    top: 8px;
    left: 8px;
    transform: rotate(45deg);
}
.disc_s22::after, .disc_m22::after, .logo22::after {
    content: "■";
    font-size: .5rem;
    color: #ffffff;
    position: absolute;
    bottom: 6px;
    right: 8px;
    transform: rotate(45deg);
}
.disc_s23, .disc_m23, .logo23 { background-color: #006b41; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s24, .disc_m24, .logo24 { background-color: #8ba687; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s25, .disc_m25, .logo25 { background-color: #8fdfff; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s26, .disc_m26, .logo26 { background-color: #addfff; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s27, .disc_m27, .logo27 { background-color: #6de1ef; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s28, .disc_m28, .logo28 { background-color: #0089ff; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s29, .disc_m29, .logo29 { background-color: #0097ff; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s29::before, .disc_m29::before, .logo29::before {
    content: "■";
    font-size: .3rem;
    color: #ffffff;
    position: absolute;
    top: 8px;
    left: 8px;
    transform: rotate(45deg);
}
.disc_s29::after, .disc_m29::after, .logo29::after {
    content: "■";
    font-size: .5rem;
    color: #ffffff;
    position: absolute;
    bottom: 6px;
    right: 8px;
    transform: rotate(45deg);
}
.disc_s30, .disc_m30, .logo30 { background-color: #0000b7; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s31, .disc_m31, .logo31 { background-color: #0047df; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s32, .disc_m32, .logo32 { background-color: #00398d; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s33, .disc_m33, .logo33 { background-color: #00398d; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s33::before, .disc_m33::before, .logo33::before {
    content: "■";
    font-size: .3rem;
    color: #ffffff;
    position: absolute;
    top: 8px;
    left: 8px;
    transform: rotate(45deg);
}
.disc_s33::after, .disc_m33::after, .logo33::after {
    content: "■";
    font-size: .5rem;
    color: #ffffff;
    position: absolute;
    bottom: 6px;
    right: 8px;
    transform: rotate(45deg);
}
.disc_s34, .disc_m34, .logo34 { background-color: #cabff3; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s35, .disc_m35, .logo35 { background-color: #9673d7; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s36, .disc_m36, .logo36 { background-color: #805dc4; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s37, .disc_m37, .logo37 { background-color: #7a0070; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s38, .disc_m38, .logo38 { background-color: #b7ac75; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s39, .disc_m39, .logo39 { background-color: #a2a59c; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s40, .disc_m40, .logo40 { background-color: #000000; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s41, .disc_m41, .logo41 { background-color: #b1d3dd; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s42, .disc_m42, .logo42 { background-color: #e6eef0; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s43, .disc_m43, .logo43 { background-color: #ffffff; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s44, .disc_m44, .logo44 { background-color: #e6eef0; border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s44::before, .disc_m44::before, .logo44::before {
    content: "■";
    font-size: .3rem;
    color: #ffffff;
    position: absolute;
    top: 7px;
    left: 7px;
    transform: rotate(45deg);
}
.disc_s44::after, .disc_m44::after, .logo44::after {
    content: "■";
    font-size: .5rem;
    color: #ffffff;
    position: absolute;
    bottom: 6px;
    right: 8px;
    transform: rotate(45deg);
}
.disc_s45, .disc_m45, .logo45 { background-image: linear-gradient(-45deg, rgb(164, 238, 246), rgba(131, 205, 235, 1)); border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}
.disc_s46, .disc_m46, .logo46 { background-image: linear-gradient(-45deg, rgb(250, 237, 208), rgba(239, 216, 228, 1)); border-radius: 4px; border: 2px solid #0000f0; box-sizing: border-box;}

/* 金具 */
.c-metal {
    cursor: pointer;
    width: 35px;
    height: 35px;
}
.metal01 { background-color: #e60000; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal01::before { content: ""; background-color: #fbda00; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal02 { background-color: #ff55c3; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal02::before { content: ""; background-color: #fbda00; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal03 { background-color: #ffb9e6; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal03::before { content: ""; background-color: #fbda00; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal04 { background-color: #ffa000; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal04::before { content: ""; background-color: #fbda00; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal05 { background-color: #ffe600; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal05::before { content: ""; background-color: #fbda00; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal06 { background-color: #82e600; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal06::before { content: ""; background-color: #fbda00; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal07 { background-color: #00aa00; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal07::before { content: ""; background-color: #fbda00; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal08 { background-color: #7de1ff; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal08::before { content: ""; background-color: #fbda00; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal09 { background-color: #0050e1; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal09::before { content: ""; background-color: #fbda00; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal10 { background-color: #b9afeb; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal10::before { content: ""; background-color: #fbda00; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal11 { background-color: #9655e1; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal11::before { content: ""; background-color: #fbda00; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal12 { background-color: #b98c7d; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal12::before { content: ""; background-color: #fbda00; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal13 { background-color: #000000; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal13::before { content: ""; background-color: #fbda00; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal14 { background-color: #b3b3b3; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal14::before { content: ""; background-color: #fbda00; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal15 { background-color: #ffffff; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal15::before { content: ""; background-color: #fbda00; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}

.metal16 { background-color: #e60000; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal16::before { content: ""; background-color: #9f9f9f; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal17 { background-color: #ff55c3; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal17::before { content: ""; background-color: #9f9f9f; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal18 { background-color: #ffb9e6; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal18::before { content: ""; background-color: #9f9f9f; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal19 { background-color: #ffa000; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal19::before { content: ""; background-color: #9f9f9f; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal20 { background-color: #ffe600; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal20::before { content: ""; background-color: #9f9f9f; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal21 { background-color: #82e600; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal21::before { content: ""; background-color: #9f9f9f; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal22 { background-color: #00aa00; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal22::before { content: ""; background-color: #9f9f9f; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal23 { background-color: #7de1ff; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal23::before { content: ""; background-color: #9f9f9f; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal24 { background-color: #0050e1; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal24::before { content: ""; background-color: #9f9f9f; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal25 { background-color: #b9afeb; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal25::before { content: ""; background-color: #9f9f9f; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal26 { background-color: #9655e1; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal26::before { content: ""; background-color: #9f9f9f; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal27 { background-color: #b98c7d; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal27::before { content: ""; background-color: #9f9f9f; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal28 { background-color: #000000; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal28::before { content: ""; background-color: #9f9f9f; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal29 { background-color: #b3b3b3; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal29::before { content: ""; background-color: #9f9f9f; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}
.metal30 { background-color: #ffffff; border-radius: 4px; position: relative; border: 2px solid #0000f0; box-sizing: border-box;}
.metal30::before { content: ""; background-color: #9f9f9f; position: absolute; width: 15px; height: 15px; top: 4px; left: 4px; border-radius: 2px;}

/* ツールチップのテキスト */
.color .colortext {
opacity: 0; /* はじめは隠しておく */
visibility: hidden; 
position: absolute; /* 絶対配置 */
left: 50%; /* 親に対して中央配置 */
transform: translateX(-50%); /* 親に対して中央配置 */
top: -12px; /* 親要素下からの位置 */
display: inline-block;
padding: 2px; /* 余白 */
white-space: nowrap; /* テキストを折り返さない */
font-size: 0.8rem; /* フォントサイズ */
line-height: 1.3; /* 行間 */
background: #0000f0; /* 背景色 */
color: #fff; /* 文字色 */
border-radius: 0; /* 角丸 */
transition: 0.3s ease-in; /* アニメーション */
z-index: 0;
}

/* ホバー時にツールチップの非表示を解除 */
.color:hover .colortext {
opacity: 1;
visibility: visible;
z-index: 9999;
}

/* ボタン部分　-------------------- */
.order {
    margin-top: 20px;
    font-size: 1.4rem;
    color: #0000f0;
    font-weight: bold;
}

.order span {
    vertical-align: middle;
}

.order input {
    height: 20px;
    border: 4px solid #0000f0;
    color: #0000f0;
    font-weight: bold;
    font-size: 1.4rem;
    letter-spacing: .2em;
}

.copyzone {
    display: none;
}

.result {
    max-width: 400px;
}

.result img{
    max-width: 100%;
}

.button {
    max-width: 640px;
    margin: 40px auto 60px;
    text-align: center;
}

.button button {
    height: 60px;
    box-shadow: 2px 2px 2px 0 #333;
    border-radius: 30px;
    max-width: 100%;
    width: 400px;
    background-color: #ffe700;
    color: #0000f0;
    font-weight: bold;
    font-size: 1.4rem;
}

.button button:hover {
    background-color: #0000f0;
    color: #ffe700;
}

#copy {
    position: relative;
}

#copy::before {
    content: "";
    width: 340px;
    height: 40px;
    border-radius: 4px;
    background-color: rgb(39, 153, 39);
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 8px;
    display: none;
}
#copy::after {
    content: "5秒お待ちください";
    color: #fff;
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    top: 12px;
    display: none;
}

#copy.show::before, #copy.show::after {
    display: block;
} 

#post {
    display: none;
}

#post.show {
    display: block;  
    animation: opa 1.0s;
}
@keyframes opa {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.b02text-pc {
    font-size: .8rem;
    font-weight: bold;
    color: #0000f0;
    margin: 10px auto 0;
    padding: 0;
    text-align: left;
    max-width: 460px;
    width: 100%;
    display: inline-block;
}
.b02text-sp {
    display: none;
}

#hash-pc {
    position: relative;
    margin-bottom: 26px;
}
#hash-pc::before {
    content: "";
    width: 340px;
    height: 40px;
    border-radius: 4px;
    background-color: rgb(39, 153, 39);
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 8px;
    display: none;
}
#hash-pc::after {
    content: "コピーしました！";
    color: #fff;
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    top: 12px;
    display: none;
}
#hash-pc.show::before, #hash-pc.show::after {
    display: block;
}

#hash {
    position: relative;
    margin-bottom: 26px;
    display: none;
}
#hash::before {
    content: "";
    width: 340px;
    height: 40px;
    border-radius: 4px;
    background-color: rgb(39, 153, 39);
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 8px;
    display: none;
}
#hash::after {
    content: "5秒お待ちください";
    color: #fff;
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    top: 12px;
    display: none;
}
#hash.show::before, #hash.show::after {
    display: block;
}

.capyTarget {
    opacity: 0;
    /* display: none; */
}

.border {
    background-color: #0000f0;
    max-width: 400px;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    margin: 20px auto 0;
    display: none;
}

/* WEBSHOPオーダーについて */
.webshoporder {
    padding-bottom: 100px;
}

.webshoporder img {
    max-width: 100%;
}

.webshoporder-title {
    background-color: #0000f0;
    width: 100%;
    padding: 12px 0;
    margin: 100px 0 20px 0;
    text-align: center;
}

.webshoporder-title h3 {
    font-size: 2.0rem;
    margin: 0;
    padding: 0;
    color: #fff;
}

.webshoporder .title01 {
    margin-top: 40px;
    margin-left: 40px;
}
.webshoporder .title01 p {
    position: relative;
    color: #0000f0;
    font-weight: bold;
    font-size: 1.4rem;
}
.webshoporder .title01 p::after {
    position: absolute;
    top: 33px;
    left: 0;
    content: "";
    width: 700px;
    height: 3px;
    border-radius: 4px;
    background-color: #0000f0;
}

.webshoporder-up {
    display: flex;
}

.webshoporder-down {
    display: flex;
}

.webshoporder-up .left {
    position: relative;
}
.webshoporder-up .left::after {
    position: absolute;
    content: "";
    right: -34px;
    top: 50%;
    transform: translateY(-50%);
	box-sizing: border-box;
	width: 30px;
	height: 10px;
	border: 10px solid transparent;
	border-left: 30px solid #0000f0;
    z-index: 400;
}

.webshoporder-up .left img {
    display: block;
}
.webshoporder-up .left p {
    box-shadow: 2px 2px 2px 0 #333;
    border-radius: 30px;
    width: 100%;
    max-width: 250px;
    background-color: #ffe700;
    color: #0000f0;
    font-weight: bold;
    font-size: .8rem;
    text-decoration: none;
    text-align: center;
    margin: 10px auto;
    padding: 4px 0;
}
.webshoporder-up .left a {
    text-decoration: none;
}
.webshoporder-up .left p:hover {
    background-color: #0000f0;
    color: #ffe700;
}


.webshoporder-up .right {
    position: relative;
}
.webshoporder-up .right::after {
    position: absolute;
    content: "";
    left: -20px;
    transform: rotate(135deg);
    bottom: 0;
	box-sizing: border-box;
	width: 30px;
	height: 10px;
	border: 10px solid transparent;
	border-left: 30px solid #0000f0;
}

.webshoporder-down .left {
    position: relative;
}
.webshoporder-down .left::after {
    position: absolute;
    content: "";
    right: -34px;
    top: 50%;
    transform: translateY(-50%);
	box-sizing: border-box;
	width: 30px;
	height: 10px;
	border: 10px solid transparent;
	border-left: 30px solid #0000f0;
}

.webshoporder-cau {
    margin: 0 auto;
    max-width: 90%;
}

.cau-title {
    color: #0000f0;
    font-weight: bold;
    font-size: 1.2rem;
    margin: 0;
    padding: 0;
}

.cau01 {
    color: #0000f0;
    font-size: 1.0rem;
    margin: 0 0 24px;
    padding: 0;
}

footer {
    text-align: center;
    font-size: .8rem;
    font-weight: bold;
    padding-bottom: 20px;
    color: #0000f0;
}






/* ---------- ブレイクポイントスタート ---------------------------------------------------------------------- */
/* ---------- ブレイクポイント ------------------------------------------------------------------------- */
@media screen and (max-width:1130px){
    /* WEBSHOPオーダーについて */
    .webshoporder .title01 {
        margin-top: 40px;
        margin-left: 40px;
    }
    .webshoporder .title01 p {
        position: relative;
        color: #0000f0;
        font-weight: bold;
        font-size: 1.2rem;
    }
    .webshoporder .title01 p::after {
        position: absolute;
        top: 27px;
        left: 0;
        content: "";
        width: 550px;
        height: 3px;
        border-radius: 4px;
        background-color: #0000f0;
    }
}    





/* ---------- ブレイクポイント ------------------------------------------------------------------------- */
@media screen and (max-width:1127px){
    
    /* メニュー部分 */
    .select {
        max-width: 640px;
        width: 100%;
        margin: 0 auto;
    }

    .menu {
    margin: 20px 0 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    }

    .menu span {
    margin-left: 5px;
    margin-right: 5px;
    cursor: pointer;
    }

    .a,.b,.c,.d,.e,.f,.g,.h,.i {
        width: calc(375px / 3);
    }
    .a { order: 1;}
    .b { order: 2;}
    .c { order: 5;}
    .d { order: 6;}
    .e { order: 7;}
    .f { order: 3;}
    .g { order: 4;}
    .h { order: 8;}
    .i { order: 9;}

    /* メニューのオモテとウラ */
    .c-omote,.c-ura {
        cursor: pointer;
        width: 50px;
        height: 111px;
    }
    .omote03::before,.ura03::before {
        content: "●";
        color: #f28124;
        position: absolute;
        top: 20px;
        left: 8px;
        opacity: .3;
    }
    .omote03::after,.ura03::after {
        content: "●";
        color: #2cfde1;
        position: absolute;
        bottom: 40px;
        right: 6px;
        opacity: .3;
    }
    .omote03out::before,.ura03out::before {
        content: "●";
        color: #fc2020;
        position: absolute;
        bottom: 12px;
        left: 16px;
        opacity: .3;
    }
    .omote04::before,.ura04::before {
        content: "★";
        color: #c3c3c3;
        position: absolute;
        top: 20px;
        left: 8px;
    }
    .omote04::after,.ura04::after {
        content: "★";
        color: #c3c3c3;
        position: absolute;
        bottom: 40px;
        right: 6px;
    }
    .omote04out::before,.ura04out::before {
        content: "★";
        color: #c3c3c3;
        position: absolute;
        bottom: 12px;
        left: 16px;
    }
    .omote05::before,.ura05::before {
        content: "★";
        color: #ff4aea;
        position: absolute;
        top: 20px;
        left: 8px;
    }
    .omote05::after,.ura05::after {
        content: "★";
        color: #1073ff;
        position: absolute;
        bottom: 40px;
        right: 6px;
    }
    .omote05out::before,.ura05out::before {
        content: "★";
        color: #fff311;
        position: absolute;
        bottom: 12px;
        left: 16px;
    }
}





/* ---------- ブレイクポイント ------------------------------------------------------------------------- */
@media screen and (max-width:1000px) {
    .tableleft {
        color: #fff;
        font-size: 1.1vw;
        font-weight: bold;
    }
    .tableleft tr ,.tableleft td {
        margin: 0;
        padding: .2vw 1.5vw;
    }
    .ordernum {
        text-align: center;
        margin-top: 1.2vw;
    }
    
    .outputBox {
        background-color: #fff;
        padding: 4px 4px;
        font-size: 1.8vw;
        color: #0000f0;
        font-weight: bold;
    }
    
    .ordertxt {
        font-size: 1.2vw;
        font-weight: bold;
        color: #fff;
    }
}




/* ---------- ブレイクポイント ------------------------------------------------------------------------- */
@media screen and (max-width:925px) {

    /* menu部分 */
    .select {
        max-width: 640px;
        width: 100%;
        margin: 0 auto;
    }

    .menu {
    margin: 20px 0 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    }

    .menu span {
    margin-left: 5px;
    margin-right: 5px;
    cursor: pointer;
    }
}





/* ---------- ブレイクポイント ------------------------------------------------------------------------- */
@media screen and (max-width:787px){
    .wrapper {
        background-color: #fff;
        margin: 0 auto;
        padding: 0;
        max-width: 90%;
    }

    /* メニュー部分 */
    .ordernum {
        text-align: center;
        margin-top: 1.0vw;
    }
    
    .outputBox {
        background-color: #fff;
        padding: 4px 4px;
        font-size: 1.5vw;
        color: #0000f0;
        font-weight: bold;
    }
    
    .ordertxt {
        font-size: .9vw;
        font-weight: bold;
        color: #fff;
    }
}





/* ---------- ブレイクポイント ------------------------------------------------------------------------- */
@media screen and (max-width:707px) {
    .wrapper {
        background-color: #fff;
        margin: 0 auto;
        padding: 0;
    }

    /* メニューのオモテとウラ */
    .c-omote,.c-ura {
    cursor: pointer;
    width: 45px;
    height: 75px;
    }
    .omote03::before,.ura03::before {
        content: "●";
        color: #f28124;
        position: absolute;
        top: 26px;
        left: 6px;
        opacity: .3;
        font-size: .8rem;
    }
    .omote03::after,.ura03::after {
        content: "●";
        color: #2cfde1;
        position: absolute;
        bottom: 40px;
        right: 8px;
        opacity: .3;
        font-size: .8rem;
    }
    .omote03out::before,.ura03out::before {
        content: "●";
        color: #fc2020;
        position: absolute;
        bottom: 5px;
        left: 20px;
        opacity: .3;
        font-size: .8rem;
    }
    .omote04::before,.ura04::before {
        content: "★";
        color: #c3c3c3;
        position: absolute;
        top: 26px;
        left: 6px;
        font-size: .8rem;
    }
    .omote04::after,.ura04::after {
        content: "★";
        color: #c3c3c3;
        position: absolute;
        bottom: 40px;
        right: 8px;
        font-size: .8rem;
    }
    .omote04out::before,.ura04out::before {
        content: "★";
        color: #c3c3c3;
        position: absolute;
        bottom: 5px;
        left: 20px;
        font-size: .8rem;
    }
    .omote05::before,.ura05::before {
        content: "★";
        color: #ff4aea;
        position: absolute;
        top: 26px;
        left: 6px;
        font-size: .8rem;
    }
    .omote05::after,.ura05::after {
        content: "★";
        color: #1073ff;
        position: absolute;
        bottom: 40px;
        right: 8px;
        font-size: .8rem;
    }
    .omote05out::before,.ura05out::before {
        content: "★";
        color: #fff311;
        position: absolute;
        bottom: 5px;
        left: 20px;
        font-size: .8rem;
    }

    .order {
        margin-top: 20px;
        font-size: 3vw;
        color: #0000f0;
        font-weight: bold;
    }
    
    .order span {
        vertical-align: middle;
    }
    
    .order input {
        height: 20px;
        border: 4px solid #0000f0;
        color: #0000f0;
        font-weight: bold;
        font-size: 3vw;
        letter-spacing: .2em;
    }

    /* WEBSHOPオーダーについて */
    .webshoporder .title01 {
        margin-top: 40px;
        margin-left: 20px;
    }
    .webshoporder .title01 p {
        position: relative;
        color: #0000f0;
        font-weight: bold;
        font-size: 1.0rem;
    }
    .webshoporder .title01 p::after {
        position: absolute;
        top: 23px;
        left: 0;
        content: "";
        width: 460px;
        height: 3px;
        border-radius: 4px;
        background-color: #0000f0;
    }

    .cau-title {
        color: #0000f0;
        font-weight: bold;
        font-size: .9rem;
        margin: 0;
        padding: 0;
    }
    
    .cau01 {
        color: #0000f0;
        font-size: .8rem;
        margin: 0 0 24px;
        padding: 0;
    }
}





/* ---------- ブレイクポイント ------------------------------------------------------------------------- */
@media screen and (max-width:701px){
    /* メニュー部分 */
    .a { order: 1;}
    .b { order: 2;}
    .c { order: 4;}
    .d { order: 5;}
    .e { order: 6;}
    .f { order: 7;}
    .g { order: 3;}
    .h { order: 8;}
    .i { order: 9;}
}






/* ---------- ここからSPレスポンシブ ------------------------------------------------------------------------------------------- */
/* ---------- ブレイクポイント ------------------------------------------------------------------------- */
@media screen and (max-width:600px){
    .wrapper {
        padding: 20px 0 0;
    }

    .wrapper-in01, .wrapper-in02 {
        margin: 0 20px;
    }

    .titlelogo {
        display: none;
    }

    /* --------- ステージ部分 ------------ */
    .stageout {
        aspect-ratio: 1 / 2;
    }

    .stage {
        aspect-ratio: 1 / 2;
        display: flex;
        flex-direction: column-reverse;
    }

    .stageleft {
        width: 100%;
        height: 50%;
        margin-right: auto;
        position: relative;
        background-color: #0000f0;
    }

    .tableleft {
        color: #fff;
        font-size: 2.6vw;
        font-weight: bold;
    }

    .stageright {
        width: 100%;
        height: 50%;
        position: relative;
    }

    .stageright .omote, .stageright .logo, .stageright .disc_s, .stageright .disc_m,
    .stageright .disc_l, .stageright .centerparts, .stageright .ura, .stageright .metal {
        position: absolute;
        bottom: 5.0vw;
    } 
    .stageright .yago {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        color: #0000f0;
        font-weight: bold;
        font-size: 3vw;
    }

    .ordernum {
        text-align: center;
        margin-top: 4.5vw;
    }
    
    .outputBox {
        background-color: #fff;
        padding: 4px 4px;
        font-size: 4.5vw;
        color: #0000f0;
        font-weight: bold;
    }
    
    .ordertxt {
        font-size: 2.9vw;
        font-weight: bold;
        color: #fff;
    }

    /* メニュー部分 */
    .spmenu {
        position: relative;
    }

    .menu-comment {
        display: block;
        color: #0000f0;
        font-weight: bold;
        font-size: 2vw;
        text-align: center;
        margin-top: 10px;
    }

    .closeb {
        position: absolute;
        top: 4px;
        left: 4px;
        cursor: pointer;
        display: block;
        background-color: #000;
        padding: 2px;
        color: #fff;
        border-radius: 4px;
        font-size: 3.0vw;
    }

    .colorBox {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;   
        align-items: end;
        margin-bottom: 8px;
        margin: 0 auto;
    }

    .menu-omote.show, .menu-ura.show {
        z-index: 3000;
        position: absolute;
        background-color: #fff;
        max-width: 90%;
        max-height: 600px;
        border-radius: 10px;
        padding: 9vw 1vw 1vw;
        top: -560px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .menu-centerparts.show,
    .menu-metal.show {
        z-index: 3000;
        position: absolute;
        background-color: #fff;
        max-width: 90%;
        max-height: 600px;
        border-radius: 10px;
        padding: 9vw 1vw 1vw;
        top: -560px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .menu-logo.show,
    .menu-disc_s.show,
    .menu-disc_m.show,
    .menu-disc_l.show {
        z-index: 3000;
        position: absolute;
        background-color: #fff;
        max-width: 90%;
        max-height: 600px;
        border-radius: 10px;
        padding: 9vw 1vw 1vw;
        top: -560px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .menu-omote img,
    .menu-centerparts img,
    .menu-logo img,
    .menu-disc_s img,
    .menu-disc_m img,
    .menu-disc_l img,
    .menu-ura img,
    .menu-metal img {
        max-height: 80px;
        height: 100%;
        border-radius: 4px;
    }

    .imgOmote,
    .imgCenterparts,
    .imgDisclarge,
    .imgDiscmidium,
    .imgDiscsmall,
    .imgLogo,
    .imgUra,
    .imgMetal {
        position: absolute;
        top: -40px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    
    /* メニューのオモテとウラ */
    .c-omote,.c-ura {
        cursor: pointer;
        width: 50px;
        height: 80px;
    }
    .omote03::before,.ura03::before {
        content: "●";
        color: #f28124;
        position: absolute;
        top: 16px;
        left: 10px;
        font-size: .6rem;
        opacity: .3;
    }
    .omote03::after,.ura03::after {
        content: "●";
        color: #2cfde1;
        position: absolute;
        bottom: 30px;
        right: 8px;
        font-size: .6rem;
        opacity: .3;
    }
    .omote03out::before,.ura03out::before {
        content: "●";
        color: #fc2020;
        position: absolute;
        bottom: 10px;
        left: 14px;
        font-size: .6rem;
        opacity: .3;
    }
    .omote04::before,.ura04::before {
        content: "★";
        color: #c3c3c3;
        position: absolute;
        top: 16px;
        left: 10px;
        font-size: .6rem;
    }
    .omote04::after,.ura04::after {
        content: "★";
        color: #c3c3c3;
        position: absolute;
        bottom: 30px;
        right: 8px;
        font-size: .6rem;
    }
    .omote04out::before,.ura04out::before {
        content: "★";
        color: #c3c3c3;
        position: absolute;
        bottom: 10px;
        left: 14px;
        font-size: .6rem;
    }
    .omote05::before,.ura05::before {
        content: "★";
        color: #ff4aea;
        position: absolute;
        top: 16px;
        left: 10px;
        font-size: .6rem;
    }
    .omote05::after,.ura05::after {
        content: "★";
        color: #1073ff;
        position: absolute;
        bottom: 30px;
        right: 8px;
        font-size: .6rem;
    }
    .omote05out::before,.ura05out::before {
        content: "★";
        color: #fff311;
        position: absolute;
        bottom: 10px;
        left: 14px;
        font-size: .6rem;
    }

    /* ボタン部分 ------------------------- */
    .button button {
        font-size: 1.2rem;
    }

    .b02text-pc {
        display: none;
    }
    .b02text-sp {
        font-size: .8rem;
        font-weight: bold;
        color: #0000f0;
        margin: 10px auto 0;
        padding: 0;
        text-align: left;
        max-width: 460px;
        width: 100%;
        display: inline-block;
    }
    
    #copy::before {
        width: 260px;
    }
    #copy::after {
        top: 14px;
    }

    #hash-pc {
        display: none;
    }

    #hash {
        display: block;
        margin: 0 auto;
    }
    
    #hash::before {
        width: 260px;
    }
    #hash::after {
        top: 14px;
    }

    #post {

        margin: 10px auto 0;
    }

    /* WEBSHOPオーダーについて */
    .webshoporder {
        max-width: 100%;
    }

    .webshoporder img:nth-of-type(2) {
        border-bottom: 3px dotted #0000f0;
    }
    .webshoporder .webshoporder-up .right img,
    .webshoporder .webshoporder-down .left img,
    .webshoporder .webshoporder-down .right img {
        border-bottom: 3px dotted #0000f0;
    }


    .webshoporder-title h3 {
        font-size: 4.5vw;
    }

    .webshoporder .title01 {
        margin-top: 40px;
        margin-left: 10px;
    }
    .webshoporder .title01 p {
        font-size: 3vw;
    }
    .webshoporder .title01 p::after {
        max-width: 450px;
        width: 100%;
    }

    .webshoporder-up {
        display: block;
    }

    .webshoporder-down {
        display: block;
    }

    .webshoporder-up .left {
        position: relative;
    }
    .webshoporder-up .left::after {
        display: none;
    }

    .webshoporder-up .right {
        position: relative;
    }
    .webshoporder-up .right::after {
        display: none;
    }

    .webshoporder-down .left {
        position: relative;
    }
    .webshoporder-down .left::after {
        display: none;
    }

    .webshoporder-cau {
        margin: 0 auto;
        max-width: 90%;
    }

    .cau-title {
        color: #0000f0;
        font-weight: bold;
        font-size: .9rem;
        margin: 0;
        padding: 0;
    }
    
    .cau01 {
        color: #0000f0;
        font-size: .8rem;
        margin: 0 0 24px;
        padding: 0;
    } 
}





/* ---------- ブレイクポイント ------------------------------------------------------------------------- */
@media screen and (max-width:521px){
    /* メニュー部分 */
    .menu-omote.show, .menu-ura.show {
        top: -630px;
        padding: 12vw 1vw 1vw;
    }
    .menu-centerparts.show,
    .menu-metal.show {
        top: -630px;
        padding: 12vw 1vw 1vw;
    }
    .menu-logo.show,
    .menu-disc_s.show,
    .menu-disc_m.show,
    .menu-disc_l.show {
        top: -630px;
        padding: 12vw 1vw 1vw;
    }
    
    /* メニューのオモテとウラ */
    .c-omote,.c-ura {
        cursor: pointer;
        width: 30px;
        height: 50px;
    }
    .omote03::before,.ura03::before {
        content: "●";
        color: #f28124;
        position: absolute;
        top: 16px;
        left: 4px;
        font-size: .4rem;
        opacity: .3;
    }
    .omote03::after,.ura03::after {
        content: "●";
        color: #2cfde1;
        position: absolute;
        bottom: 30px;
        right: 4px;
        font-size: .4rem;
        opacity: .3;
    }
    .omote03out::before,.ura03out::before {
        content: "●";
        color: #fc2020;
        position: absolute;
        bottom: 10px;
        left: 14px;
        font-size: .4rem;
        opacity: .3;
    }
    .omote04::before,.ura04::before {
        content: "★";
        color: #c3c3c3;
        position: absolute;
        top: 16px;
        left: 4px;
        font-size: .4rem;
    }
    .omote04::after,.ura04::after {
        content: "★";
        color: #c3c3c3;
        position: absolute;
        bottom: 30px;
        right: 4px;
        font-size: .4rem;
    }
    .omote04out::before,.ura04out::before {
        content: "★";
        color: #c3c3c3;
        position: absolute;
        bottom: 10px;
        left: 14px;
        font-size: .4rem;
    }
    .omote05::before,.ura05::before {
        content: "★";
        color: #ff4aea;
        position: absolute;
        top: 16px;
        left: 4px;
        font-size: .4rem;
    }
    .omote05::after,.ura05::after {
        content: "★";
        color: #1073ff;
        position: absolute;
        bottom: 30px;
        right: 4px;
        font-size: .4rem;
    }
    .omote05out::before,.ura05out::before {
        content: "★";
        color: #fff311;
        position: absolute;
        bottom: 10px;
        left: 14px;
        font-size: .4rem;
    }

    .order {
        text-align: center;
    }
}





/* ---------- ブレイクポイント ------------------------------------------------------------------------- */
@media screen and (max-width:504px){
    /* メニュー部分 */
    .a { order: 1;}
    .b { order: 2;}
    .c { order: 3;}
    .d { order: 4;}
    .e { order: 5;}
    .f { order: 6;}
    .g { order: 7;}
    .h { order: 8;}
    .i { order: 9;}
}





/* ---------- ブレイクポイント ------------------------------------------------------------------------- */
@media screen and (max-width:480px){
    .menu-omote.show, .menu-ura.show {
        top: -580px;
        padding: 12vw 1vw 1vw;
    }
    .menu-centerparts.show,
    .menu-metal.show {
        top: -580px;
        padding: 12vw 1vw 1vw;
    }
    .menu-logo.show,
    .menu-disc_s.show,
    .menu-disc_m.show,
    .menu-disc_l.show {
        top: -580px;
        padding: 12vw 1vw 1vw;
    }

    /* メニューの円盤（大）（中）（小）、MDロゴ */
    .c-disc_l, .c-disc_s, .c-disc_m, .c-logo {
        cursor: pointer;
        width: 33px;
        height: 33px;
    }

    .ordernum {
        display: none;
    }

    .ordernum-sp {
        display: inline-block;
        text-align: center;
        margin-top: 3.5vw;
        margin: 3.0vw 0 0 4.0vw;
    }

    .ordertxtsp {
        display: inline-block;
        font-size: 2.3vw;
        font-weight: bold;
        color: #fff;
        margin-right: 10px;
    }

    .outputBoxsp {
        background-color: #fff;
        padding: 4px 4px;
        font-size: 3.5vw;
        color: #0000f0;
        font-weight: bold;
    }

    /* ボタン部分 ------------------------- */
    .button button {
        font-size: 1.0rem;
    }
    
    #copy::before {
        width: 260px;
    }
    #copy::after {
        top: 14px;
    }
    
    #hash::before {
        width: 260px;
    }
    #hash::after {
        top: 14px;
    }
}





/* ---------- ブレイクポイント ------------------------------------------------------------------------- */
@media screen and (max-width:430px){
    .menu-omote.show, .menu-ura.show {
        top: -560px;
        padding: 12vw 1vw 1vw;
    }
    .menu-centerparts.show,
    .menu-metal.show {
        top: -560px;
        padding: 12vw 1vw 1vw;
    }
    .menu-logo.show,
    .menu-disc_s.show,
    .menu-disc_m.show,
    .menu-disc_l.show {
        top: -560px;
        padding: 12vw 1vw 1vw;
    }

    /* メニューの円盤（大） */
    .c-disc_l {
        cursor: pointer;
        width: 32px;
        height: 32px;
    }

    .disc_l06::before {
        top: 6px;
        left: 6px;
    }
    .disc_l06::after {
        bottom: 4px;
        right: 8px;
    }
    .disc_l07::before {
        top: 6px;
        left: 6px;
    }
    .disc_l07::after {
        bottom: 4px;
        right: 8px;
    }
    .disc_l12::before {
        top: 6px;
        left: 6px;
    }
    .disc_l12::after {
        bottom: 4px;
        right: 8px;
    }
    .disc_l15::before {
        top: 6px;
        left: 6px;
    }
    .disc_l15::after {
        bottom: 4px;
        right: 8px;
    }
    .disc_l20::before {
        top: 6px;
        left: 6px;
    }
    .disc_l20::after {
        bottom: 4px;
        right: 8px;
    }
    .disc_l27::before {
        top: 6px;
        left: 6px;
    }
    .disc_l27::after {
        bottom: 4px;
        right: 8px;
    }
    .disc_l31::before {
        top: 6px;
        left: 6px;
    }
    .disc_l31::after {
        bottom: 4px;
        right: 8px;
    }
    .disc_l42::before {
        top: 6px;
        left: 6px;
    }
    .disc_l42::after{
        bottom: 4px;
        right: 8px;
    }



    /* メニューの中枠 */
    .c-centerparts {
        cursor: pointer;
        width: 32px;
        height: 32px;
    }
   
    .centerparts06::before {
        top: 6px;
        left: 6px;
    }
    .centerparts06::after {
        bottom: 4px;
        right: 8px;
    }
    .centerparts07::before {
        top: 6px;
        left: 6px;
    }
    .centerparts07::after {
        bottom: 4px;
        right: 8px;
    }
    .centerparts15::before {
        top: 6px;
        left: 6px;
    }
    .centerparts15::after {
        bottom: 4px;
        right: 8px;
    }
    .centerparts20::before {
        top: 6px;
        left: 6px;
    }
    .centerparts20::after {
        bottom: 4px;
        right: 8px;
    }
    .centerparts27::before {
        top: 6px;
        left: 6px;
    }
    .centerparts27::after {
        bottom: 4px;
        right: 8px;
    }
    .centerparts31::before {
        top: 6px;
        left: 6px;
    }
    .centerparts31::after {
        bottom: 4px;
        right: 8px;
    }
    .centerparts42::before {
        top: 6px;
        left: 6px;
    }
    .centerparts42::after {
        bottom: 4px;
        right: 8px;
    }

    /* メニューの円盤（中）（小）、MDロゴ */
    .c-centerparts, .c-disc_s, .c-disc_m, .c-logo {
        cursor: pointer;
        width: 32px;
        height: 32px;
    }

    .disc_s06::before, .disc_m06::before, .logo06::before {
        top: 6px;
        left: 6px;
    }
    .disc_s06::after, .disc_m06::after, .logo06::after {
        bottom: 4px;
        right: 8px;
    }
    .disc_s07::before, .disc_m07::before, .logo07::before {
        top: 6px;
        left: 6px;
    }
    .disc_s07::after, .disc_m07::after, .logo07::after {
        bottom: 4px;
        right: 8px;
    }
    .disc_s13::before, .disc_m13::before, .logo13::before {
        top: 6px;
        left: 6px;
    }
    .disc_s13::after, .disc_m13::after, .logo13::after {
        bottom: 4px;
        right: 8px;
    }
    .disc_s17::before, .disc_m17::before, .logo17::before {
        top: 6px;
        left: 6px;
    }
    .disc_s17::after, .disc_m17::after, .logo17::after {
        bottom: 4px;
        right: 8px;
    }
    .disc_s22::before, .disc_m22::before, .logo22::before {
        top: 6px;
        left: 6px;
    }
    .disc_s22::after, .disc_m22::after, .logo22::after {
        bottom: 4px;
        right: 8px;
    }
    .disc_s29::before, .disc_m29::before, .logo29::before {
        top: 6px;
        left: 6px;
    }
    .disc_s29::after, .disc_m29::after, .logo29::after {
        bottom: 4px;
        right: 8px;
    }
    .disc_s33::before, .disc_m33::before, .logo33::before {
        top: 6px;
        left: 6px;
    }
    .disc_s33::after, .disc_m33::after, .logo33::after {
        bottom: 4px;
        right: 8px;
    }
    .disc_s44::before, .disc_m44::before, .logo44::before {
        top: 6px;
        left: 6px;
    }
    .disc_s44::after, .disc_m44::after, .logo44::after {
        bottom: 4px;
        right: 8px;
    }
}





/* ---------- ブレイクポイント ------------------------------------------------------------------------- */
@media screen and (max-width:377px){
    .a,.b,.c,.d,.e,.f,.g,.h,.i {
        width: calc(230px / 2);
    }

    .menu-omote.show, .menu-ura.show {
        top: -510px;
        padding: 12vw 1vw 1vw;
    }
    .menu-centerparts.show,
    .menu-metal.show {
        top: -540px;
        padding: 12vw 1vw 1vw;
    }
    .menu-logo.show,
    .menu-disc_s.show,
    .menu-disc_m.show,
    .menu-disc_l.show {
        top: -540px;
        padding: 12vw 1vw 1vw;
    }

    /* メニューの円盤（大）（中）（小）、MDロゴ、中枠 */
    .c-centerparts, .c-disc_l, .c-disc_s, .c-disc_m, .c-logo {
        cursor: pointer;
        width: 31px;
        height: 31px;
    }
}