@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');



/* ==============================================
setting
============================================== */

#maker * {
margin:0;
padding:0;
}
#maker h1,#maker h2,#maker h3,#maker p,#maker li,#maker input {
font-family: 'Roboto','Noto Sans JP', sans-serif;
font-size: 14px;
line-height: 24px;
font-weight: 500;
margin:0;
color:#333333;
}
#maker h1,#maker h2,#maker h3,#maker div,#maker ul,#maker li,#maker p,#maker a,#maker strong,#maker span,#maker input {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#maker img {
width: 100%;
height: auto;
border:none;
vertical-align:middle;
}
#maker ul {
list-style:none;
}
#maker ul:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html #maker ul { display:inline-block; }
*:first-child+html #maker ul { display:inline-block; }

#maker a {color:#333333; text-decoration:none;}



#maker .pc{
display:none!important;
}



/* ==============================================
anime
============================================== */

.pon {
animation-name: pon;
}
@-webkit-keyframes pon {
0% {
opacity: 0;
transform: scale(.5);
}
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes pon {
0% {
opacity: 0;
transform: scale(.5);
}
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}



/* ==============================================
#maker
============================================== */

section{
position: relative;
}
#maker{
background: #ff868c;
}
#maker p.error{
background: #fff;
padding: 10px 10px 0 10px;
}
#maker p.error span{
display: block;
font-size: 12px;
line-height: 18px;
text-align: center;
background: rgba(220,0,0,0.1);
color: rgba(220,0,0,1.00);
padding: 8px 0 8px 0;
border-radius: 8px;
}



#maker .button{
text-align: center;
}
#maker .button a{
font-size: 14px;
line-height: 20px;
letter-spacing: 1px;
font-weight: 500;
color: #fff;
display: inline-block;
height: 44px;
margin: auto;
border: solid 2px #fff;
border-radius: 22px;
padding: 10px 20px 0 20px;
}
#maker .button a::after{
content: "";
background: url("../images/cmk_cmn_arw-s-r_white.png") no-repeat;
background-size: 6px 10px;
width: 6px;
height: 10px;
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 8px;
}



#maker .button-s{
}
#maker .button-s a{
font-size: 15px;
line-height: 18px;
font-weight: 900;
text-align: center;
display: block;
background: url("../images/cmk_cmn_btn-s_01.png") no-repeat;
background-size: 85px 46px;
width: 85px;
height: 46px;
margin: auto;
padding: 14px 0 0 0;
}
#maker .button-s a::after{
content: "";
background: url("../images/cmk_cmn_arw-l-r_black.png") no-repeat;
background-size: 10px 16px;
width: 10px;
height: 16px;
display: inline-block;
vertical-align: middle;
margin: -3px 0 0 6px;
}
#maker .button-s.high{
}
#maker .button-s.high a{
background: url("../images/cmk_cmn_btn-s_02.png") no-repeat;
background-size: 85px 46px;
}



#maker .button-m{
}
#maker .button-m a{
font-size: 15px;
line-height: 18px;
font-weight: 900;
text-align: center;
display: inline-block;
background: url("../images/cmk_cmn_btn-m_01.png") no-repeat;
background-size: 144px 62px;
width: 144px;
height: 62px;
margin: auto;
padding: 21px 0 0 0;
}
#maker .button-m a::after{
content: "";
background: url("../images/cmk_cmn_arw-l-r_black.png") no-repeat;
background-size: 10px 16px;
width: 10px;
height: 16px;
display: inline-block;
vertical-align: middle;
margin: -3px 0 0 4px;
}
#maker .button-m.high{
}
#maker .button-m.high a{
background: url("../images/cmk_cmn_btn-m_02.png") no-repeat;
background-size: 144px 62px;
}



#maker .button-l{
}
#maker .button-l a{
font-size: 15px;
line-height: 18px;
font-weight: 900;
text-align: center;
display: block;
background: url("../images/cmk_cmn_btn-l_01.png") no-repeat;
background-size: 295px 62px;
width: 295px;
height: 62px;
margin: auto;
padding: 21px 0 0 0;
}
#maker .button-l a::after{
content: "";
background: url("../images/cmk_cmn_arw-l-r_black.png") no-repeat;
background-size: 10px 16px;
width: 10px;
height: 16px;
display: inline-block;
vertical-align: middle;
margin: -3px 0 0 6px;
}
#maker .button-l.high{
}
#maker .button-l.high a{
background: url("../images/cmk_cmn_btn-l_02.png") no-repeat;
background-size: 295px 62px;
}
#maker .button-l.high.off{
opacity: 0.2;
}



#maker .back{
position: absolute;
top:333px;
left: 8px;
z-index: 100;
}
#maker .back a{
font-size: 12px;
line-height: 16px;
font-weight: 900;
text-align: center;
display: block;
background: url("../images/cmk_cmn_btn-s_01.png") no-repeat;
background-size: 60px 32px;
width: 60px;
height: 32px;
margin: auto;
padding: 8px 0 0 0;
}
#maker .back a::before{
content: "";
background: url("../images/cmk_cmn_arw-l-r_black.png") no-repeat;
background-size: 6px 10px;
width: 6px;
height: 10px;
display: inline-block;
vertical-align: middle;
margin: -1px 4px 0 0;
transform: scale(-1, 1);
}



#maker .ownly{
background: #fff;
border-radius: 20px;
margin: 10px 10px 0 10px;
padding: 0 20px 0 20px;
}
#maker .ownly p{
padding: 20px 0 30px 0;
text-align: center;
}
#maker .ownly p img{
max-width: 400px;
}



#maker .link{
background: #fff;
margin: 12px 0 0 0;
padding: 0 30px 20px 30px;
}
#maker .link .banner{
padding: 40px 0 0 0;
}
#maker .link .banner img{
}
#maker .link h2{
padding: 35px 0 0 0;
margin: 0 0 -5px 0;
text-align: center;
}
#maker .link h2 img{
max-width: 480px;
}
#maker .link .button{
padding: 20px 0 0 0;
max-width: 400px;
margin: auto;
}
#maker .link .button a{
display: block;
border: none;
background: linear-gradient(90deg, #ff4172 0%, #f95b4a 100%);
padding: 12px 0 0 0;
}
#maker .link div{
}
#maker .link div h3{
padding: 40px 0 0 0;
}
#maker .link div h3 img{
}
#maker .link div p{
padding: 15px 0 0 0;
text-align: left;
}
#maker .link div .button{
padding: 15px 0 0 0;
}
#maker .link div .button + .button{
padding: 10px 0 0 0;
}
#maker .link div .button a{
text-align: center;
}



/* ==============================================
#maker-top
============================================== */

#maker-top{
}



#maker-top #hero{
background: #fff;
overflow: hidden;
}
#maker-top #hero .logo{
padding: 0 0 16% 0;
text-align: center;
}
#maker-top #hero .logo img{
width: auto;
height: 40px;
}
#maker-top #hero div{
position: relative;
background: #ff868c;
}
#maker-top #hero div .character{
display: inline-block;
margin: -10% 0 0 0;
position: relative;
z-index: 1000;
width: 100%;
}
#maker-top #hero div .character img{
width: 64%;
}
#maker-top #hero div figure{
position: absolute;
top:0;
width: 22.4%;
margin: -13.5% 0 0 0;
}
#maker-top #hero div .character-01{
top:0;
left: 0;
width: 19.2%;
margin: 38% 0 0 10%;
}
#maker-top #hero div .character-02{
top:0;
left: 0;
width: 19.2%;
margin: 38% 0 0 70%;
}
#maker-top #hero div .character-03{
left: 31.6%;
}
#maker-top #hero div .character-04{
right: 28.6%;
}
#maker-top #hero div .character-05{
left: 18.4%;
}
#maker-top #hero div .character-06{
right: 14.6%;
}
#maker-top #hero div .character-07{
left: 4.6%;
}
#maker-top #hero div .character-08{
right: -1%;
}
#maker-top #hero div .character-09{
left: -5%;
}
#maker-top #hero div h1{
padding: 20px 0 0 0;
text-align: center;
}
#maker-top #hero div h1 img{
width: auto;
height: 63px;
display: block;
margin: auto;
}
#maker-top #hero div p{
font-weight: 700;
text-align: center;
padding: 16px 0 0 0;
}



#maker-top #agreement{
margin: -2px 0 0 0;
position: relative;
z-index: 100;
background: #ff868c;
}
#maker-top #agreement .accordion-button{
padding: 20px 0 0 0;
text-align: center;
}
#maker-top #agreement .accordion-button a{
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: #fff;
letter-spacing: 2px;
display: block;
width: 164px;
height: 40px;
margin: auto;
border: solid 2px #fff;
border-radius: 22px;
padding: 8px 0 0 0;
}
#maker-top #agreement .accordion-button a::after{
content: "";
background: url("../images/cmk_cmn_arw-s-b_white.png") no-repeat;
background-size: 12px 8px;
width: 12px;
height: 8px;
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 4px;
}
#maker-top #agreement .accordion{
display:none;
padding: 0 20px 20px 20px;
background: #fff;
border-radius: 20px;
margin: 15px 10px 0 10px;
}
#maker-top #agreement .accordion h2{
font-size: 14px;
padding: 20px 0 0 0;
color:#333333;
}
#maker-top #agreement .accordion p{
font-size: 12px;
line-height: 16px;
font-weight: 400;
padding: 10px 0 0 0;
}
#maker-top #agreement .accordion ul{
}
#maker-top #agreement .accordion ul li{
font-size: 12px;
line-height: 16px;
font-weight: 400;
text-indent: -13px;
margin: 10px 0 0 13px;
}
#maker-top #agreement .accordion .right{
text-align: right;
}



#maker-top .agreement {
padding: 15px 0 0 0;
text-align: center;
}
#maker-top .agreement label {
position: relative;
color: #fff;
font-weight: 500;
letter-spacing: 1px;
padding: 2px 0 0 28px;
cursor: pointer;
}
#maker-top .agreement input[type="checkbox"] {
margin: 0;
display: none;
}
#maker-top .agreement label:before,
#maker-top .agreement label:after {
content: "";
position: absolute;
display: inline-block;
transition: transform .2s ease;
}
#maker-top .agreement label:before {
top: 0;
left: 0;
width: 20px;
height: 20px;
border-radius: 2px;
background: #fff;
}
#maker-top .agreement input[type="checkbox"]:checked + label:before {
background: #ffffc8;
}
#maker-top .agreement label:after {
top: 3px;
left: 7px;
width: 4px;
height: 9px;
border-right: 2px solid transparent;
border-bottom: 2px solid transparent;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
transition: border-bottom-color,border-right-color 0.1s ease;
border-color: #e1e1e1;
}
#maker-top .agreement input[type="checkbox"]:checked + label:after {
border-color: #ff868c;
}



#maker-top h2{
font-size: 16px;
line-height: 24px;
font-weight: 700;
color: #fff;
text-align: center;
padding: 35px 0 0 0;
}
#maker-top .button-l{
padding: 12px 0 0 0;
}
#maker-top .note{
font-size: 12px;
line-height: 20px;
text-align: center;
padding: 4px 0 0 0;
}
#maker-top .note + .button-l{
padding: 30px 0 0 0;
}



#maker-top #news{
background: #fff;
border-radius: 20px;
margin: 30px 10px 0 10px;
padding: 0 20px 20px 20px;
}
#maker-top #news h2{
color: #333;
font-size: 16px;
line-height: 20px;
font-weight: 700;
letter-spacing: 1px;
text-align: left;
padding: 20px 0 0 0;
}
#maker-top #news ul{
padding: 5px 0 0 0;
}
#maker-top #news ul li{
font-size: 14px;
line-height: 20px;
position: relative;
padding: 0 0 0 80px;
margin: 5px 0 0 0;
}
#maker-top #news ul li span{
font-size: 12px;
line-height: 16px;
color: #ff868c;
position: absolute;
top:0;
left: 0;
width: 70px;
height: 17px;
border: solid 1px #ff868c;
text-align: center;
}



/* ==============================================
#maker-make
============================================== */

#maker-make{
}



#maker-make #workbench{
background: url("../images/cmk_mk_bg.png");
background-size: 21px auto;
padding: 30px 0 75px 0;
position: relative;
}
#maker-make #workbench .image{
width: 320px;
margin: auto;
background: #fff;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
position: relative;
}
#maker-make #workbench .image figure{
position: relative;
width: 320px;
height: 320px;
}
#maker-make #workbench .image figure div{
position: absolute;
left:0;
top:0;
width:100%;
}
#canvas_prev_msg_s{
width:100%;
}
#canvas_prev_msg_g{
width:100%;
}
#maker-make #workbench .image figure img{
}

#maker-make #workbench .image figure .preview.vary{
position: absolute;
}

#maker-make.single #workbench .image figure .preview.vary.lay-100 {left:0;top:0;width:100%;}
#maker-make.single #workbench .image figure .preview.vary.lay-btm {left:5%;top:11%;width:90%;}

#maker-make.group #workbench .image figure .preview.vary.lay-1_1 {left:0;top:0;width:100%;}
#maker-make.group #workbench .image figure .preview.vary.lay-b1_1 {left:5%;top:11%;width:90%;}

#maker-make.group #workbench .image figure .preview.vary.lay-2_1 {left:0;top:25%;width:55%;}
#maker-make.group #workbench .image figure .preview.vary.lay-2_2 {left:45%;top:25%;width:55%;}
#maker-make.group #workbench .image figure .preview.vary.lay-b2_1 {left:0;top:26%;width:55%;}
#maker-make.group #workbench .image figure .preview.vary.lay-b2_2 {left:45%;top:26%;width:55%;}

#maker-make.group #workbench .image figure .preview.vary.lay-3_1 {left:25%;top:6%;width:50%;}
#maker-make.group #workbench .image figure .preview.vary.lay-3_2 {left:0;top:32%;width:55%;}
#maker-make.group #workbench .image figure .preview.vary.lay-3_3 {left:45%;top:32%;width:55%;}
#maker-make.group #workbench .image figure .preview.vary.lay-b3_1 {left:26%;top:13%;width:48%;}
#maker-make.group #workbench .image figure .preview.vary.lay-b3_2 {left:0;top:38%;width:55%;}
#maker-make.group #workbench .image figure .preview.vary.lay-b3_3 {left:45%;top:38%;width:55%;}

#maker-make.group #workbench .image figure .preview.vary.lay-4_1 {left:9%;top:8%;width:45%;}
#maker-make.group #workbench .image figure .preview.vary.lay-4_2 {left:46%;top:8%;width:45%;}
#maker-make.group #workbench .image figure .preview.vary.lay-4_3 {left:0;top:37%;width:55%;}
#maker-make.group #workbench .image figure .preview.vary.lay-4_4 {left:45%;top:37%;width:55%;}
#maker-make.group #workbench .image figure .preview.vary.lay-b4_1 {left:11%;top:13%;width:41%;}
#maker-make.group #workbench .image figure .preview.vary.lay-b4_2 {left:48%;top:13%;width:41%;}
#maker-make.group #workbench .image figure .preview.vary.lay-b4_3 {left:0;top:39%;width:54%;}
#maker-make.group #workbench .image figure .preview.vary.lay-b4_4 {left:47%;top:39%;width:54%;}

#maker-make.group #workbench .image figure .preview.vary.lay-5_1 {left:4%;top:6%;width:40%;}
#maker-make.group #workbench .image figure .preview.vary.lay-5_2 {left:56%;top:6%;width:40%;}
#maker-make.group #workbench .image figure .preview.vary.lay-5_3 {left:25%;top:13%;width:50%;}
#maker-make.group #workbench .image figure .preview.vary.lay-5_4 {left:0;top:39%;width:55%;}
#maker-make.group #workbench .image figure .preview.vary.lay-5_5 {left:45%;top:39%;width:55%;}
#maker-make.group #workbench .image figure .preview.vary.lay-b5_1 {left:3%;top:13%;width:38%;}
#maker-make.group #workbench .image figure .preview.vary.lay-b5_2 {left:59%;top:13%;width:38%;}
#maker-make.group #workbench .image figure .preview.vary.lay-b5_3 {left:27%;top:17%;width:46%;}
#maker-make.group #workbench .image figure .preview.vary.lay-b5_4 {left:0;top:39%;width:54%;}
#maker-make.group #workbench .image figure .preview.vary.lay-b5_5 {left:47%;top:39%;width:54%;}


#maker-make #workbench .image::after{
content: "";
width: 320px;
height: 320px;
position: absolute;
top:0;
left: 0;
background: url("../images/cmk_mk_cvr.png") no-repeat;
background-size: 100% auto;
opacity: 0.1;
}
#maker-make #workbench .button-s{
position: absolute;
bottom:54px;
right: 10px;
}



#maker-make #panel{
position: relative;
}



#maker-make #panel #tab{
position: absolute;
top:-44px;
left: 0;
width: 100%;
}
#maker-make #panel #tab::after{
content: "";
width: 100%;
height: 4px;
background: linear-gradient(0deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 100%);
position: absolute;
bottom:0;
left: 0;
}
#maker-make #panel #tab ul{
display: flex;
flex-direction: row;
justify-content: space-between;
width: calc(100% - 10px);
margin: 0 0 0 10px;
}
#maker-make #panel #tab ul li{
width: 100%;
position: relative;
margin: 0 1px 0 0;
}
#maker-make #panel #tab ul li a{
font-size: 14px;
line-height: 20px;
font-weight: 700;
color: #ff868c;
display: block;
background: #fff;
border-radius: 8px 8px 0 0;
height: 44px;
text-align: center;
padding: 13px 0 0 0;
}
#maker-make #panel #tab ul li:first-child a{
font-size: 12px;
letter-spacing: -2px;
}
#maker-make #panel #tab ul li.on{
z-index: 100;
}
#maker-make #panel #tab ul li.on a{
color: #fff;
background: #ff868c;
}



#maker-make #panel .panel{
position: relative;
padding-top: calc(32.5% + 45px);
}
#maker-make #panel .panel.off{
display: none;
}
#maker-make #panel .parts{
}
#maker-make #panel .parts ul{
position: absolute;
top:0;
left: 0;
width: 100%;
padding: 10px 10px 0 10px;
}
#maker-make #panel .parts ul li{
float: left;
width: 15.83%;/* 15.84%; */
margin: 0 1% 1% 0;
position: relative;
}
#maker-make #panel .parts ul li:nth-child(6n){
margin: 0 0 1% 0;
}
#maker-make #panel .parts ul li a{
display: block;
background: #fff;
border-radius: 4px;
position: relative;
}
#maker-make #panel .parts ul li.on a{
background: #ffffc8;
}
#maker-make #panel .parts ul li.on a::after{
content: "";
width: calc(100% - 3px);
height: calc(100% - 3px);
position: absolute;
top:0;
left: 0;
border: solid 2px #333;
border-radius: 4px;
}
#maker-make #panel .parts ul li a img{
border-radius: 4px;
}
#maker-make #panel .parts ul li.new::before{
content: "NEW";
font-family: 'Roboto','Noto Sans JP', sans-serif;
position: absolute;
top:4px;
left: 4px;
font-size: 10px;
line-height: 14px;
z-index: 100;
background: #DB3462;
color: #fff;
width: 30px;
height: 13px;
text-align: center;
border-radius: 20px;
}








#maker-make #panel .parts .page{
font-size: 14px;
line-height: 20px;
letter-spacing: 1px;
color: #fff;
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
padding: 0;
text-align: center;
}
#maker-make #panel .parts .prev{
position: absolute;
bottom: 0;
left: 0;
}
#maker-make #panel .parts .prev a{
display: block;
width: 50px;
height: 40px;
}
#maker-make #panel .parts .prev a::after{
content: "";
display: inline-block;
width: 26px;
height: 26px;
border: solid 2px #fff;
border-radius: 15px;
background: url("../images/cmk_cmn_arw-s-r_white.png") center no-repeat;
background-size: 6px 10px;
transform: scale(-1, 1);
margin: 5px 0 0 10px;
}
#maker-make #panel .parts .next{
position: absolute;
bottom: 0;
right: 0;
}
#maker-make #panel .parts .next a{
display: block;
width: 50px;
height: 40px;
}
#maker-make #panel .parts .next a::after{
content: "";
display: inline-block;
width: 26px;
height: 26px;
border: solid 2px #fff;
border-radius: 15px;
background: url("../images/cmk_cmn_arw-s-r_white.png") center no-repeat;
background-size: 6px 10px;
margin: 5px 0 0 10px;
}



#maker-make #panel .text p{
position: absolute;
top:50px;
left: 30px;
width: calc(100% - 60px);
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
overflow: hidden;
}
#maker-make #panel .text p input{
width: 120%;
height: 60px;
font-size: 20px;
line-height: 20px;
border-radius: 30px;
border: none;
padding: 0 10px 4px 10px;
margin: 0 0 0 -10%;
text-align: center;
transform: scale(0.8);
}



#maker-make #panel .code{
overflow: hidden;
}
#maker-make #panel .code ul{
position: absolute;
top:0;
left: 0;
width: 100%;
padding: 6px 10px 0 10px;
}
#maker-make #panel .code ul li{
position: relative;
margin: 5px 0 0 0;
padding: 0 0 0 30px;
}
#maker-make #panel .code ul li span{
position: absolute;
top:0;
left: 0;
width: 26px;
height: 26px;
border-radius: 13px;
background: #333333;
color: #fff;
text-align: center;
display: block;
font-size: 14px;
line-height: 28px;
}
#maker-make #panel .code ul li.error span{
background: rgba(220,0,0,1.00);
}
#maker-make #panel .code ul li input{
width: 125%;
height: 32px;
font-size: 16px;
line-height: 16px;
border-radius: 22px;
border: none;
padding: 0 10px 2px 10px;
margin: -1% 0 0 -12.5%;
transform: scale(0.8);
transform: scale(0.8,0.8);
}
#maker-make #panel .code ul li.error input{
width: 100%;
height: 26px;
border-radius: 13px;
border: none;
padding: 0 10px;
color: rgba(220,0,0,1.00);
}
#maker-make #panel .layout{
padding: 0 10px 10px 10px;
}



#maker-make #restoration{
background: #f56478;
padding: 10px 10px 10px 10px;
position: relative;
}
#maker-make #restoration input{
display: inline-block;
width: calc(120% - 90px);
height: 44px;
font-size: 16px;
line-height: 16px;
border-radius: 22px;
border: none;
padding: 0 15px 4px 15px;
margin: -1% 0 -1% -10%;
transform: scale(0.8);
vertical-align: middle;
background: rgba(255,255,255,0.7);
}
#maker-make #restoration .button{
position: absolute;
top:10px;
right: 10px;
}
#maker-make #restoration .button a{
width: 80px;
height: 36px;
padding: 6px 0 0 0;
}
#maker-make #restoration .button a::after{
display: none;
}



/* ==============================================
#maker-result
============================================== */

#maker-result{
}
#maker #maker-result .back{
top:376px;
}



#maker-result #character{
padding: 0 30px;
}
#maker-result #character h1{
text-align: center;
padding: 19px 0 0 0;
}
#maker-result #character h1 img{
width: auto;
height: 24px;
}
#maker-result #character figure{
width: 320px;
margin: auto;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
margin: 20px auto 0 auto;
}
#maker-result #character figure img{
}
#maker-result #character .download{
padding: 20px 0 0 0;
text-align: center;
}
#maker-result #character .download img{
width: auto;
height: 57px;
display: block;
margin: 0 auto 10px auto;
}
#maker-result #character .download a{
}
#maker-result #character .download a::after{
content: "";
background: url("../images/cmk_cmn_arw-l-r_black.png") no-repeat;
background-size: 7px 12px;
width: 7px;
height: 12px;
display: inline-block;
vertical-align: middle;
margin: -3px 0 0 4px;
}
#maker-result #character div{
background: #fff;
border-radius: 20px;
margin: 20px 0 0 0;
padding: 0 0 15px 0;
}
#maker-result #character div h2{
font-size: 16px;
line-height: 24px;
font-weight: 700;
text-align: center;
padding: 15px 0 0 0;
}
#maker-result #character div h2 span{
font-size: 24px;
line-height: 24px;
font-weight: 900;
letter-spacing: 0.8px;
color: #ff868c;
display: inline-block;
}
#maker-result #character div p{
font-size: 12px;
line-height: 20px;
letter-spacing: -1px;
padding: 5px 0 0 0;
text-align: center;
}
#maker-result #character div p strong{
color: #ff868c;
}
#maker-result #character div .button-m{
text-align: center;
padding: 5px 0 0 0;
}
#maker-result #character div .button-m a{
margin: 0 2px;
}
#maker-result #character .button{
padding: 30px 0 25px 0;
}



#maker-result #group{
}
#maker-result #group h2{
padding: 40px 0 0 0;
text-align: center;
}
#maker-result #group h2 img{
width: auto;
height: 62px;
}
#maker-result #group figure{
padding: 30px 0 0 0;
}
#maker-result #group figure img{
}
#maker-result #group p{
font-weight: 700;
text-align: center;
padding: 25px 0 0 0;
}
#maker-result #group .button-m{
padding: 20px 0 0 0;
}
#maker-result #group .button-m a{
padding: 13px 0 0 0;
margin: 0 4px;
}
#maker-result #group .button-m a::after{
background: url("../images/cmk_cmn_arw-l-r_black.png") no-repeat;
background-size: auto 12px;
width: 8px;
height: 12px;
}
#maker-result #group .button{
padding: 30px 0 25px 0;
}



/* ==============================================
追加設定 maker.js
============================================== */

main#maker p.error {
display:none;
}
section#maker-top {
display:no ne;
}
section#maker-make.single {
display:none;
}
section#maker-make.group {
display:none;
}
section#maker-result.single {
display:none;
}
section#maker-result.group {
display:none;
}
#maker-make .panel.parts ul li {
display:none;
}
#canvas-comp {
visibility: hidden;
width:100px;
height:auto;
position:absolute;
left:0;
top:0;
}
#copyright-pic {
visibility: hidden;
width:100px;
height:auto;
position:absolute;
left:0;
top:0;
}
#copyright-pic img{
width:100%;
}