@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');



.l-container .inner{
width: 100%;
border-top: 1px solid #ddd;
}



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

#maker * {
margin:0;
padding:0;
}
#maker h1,#maker h2,#maker h3,#maker h4,#maker h5,#maker p,#maker li,#maker th,#maker td,#maker input {
font-family: 'Roboto','Noto Sans JP', sans-serif;
font-size: 13px;
line-height: 17px;
font-weight: 400;
margin:0;
color:#3a4452;
}
@media screen and (min-width:750px) {
#maker h1,#maker h2,#maker h3,#maker h4,#maker h5,#maker p,#maker li,#maker th,#maker td,#maker input {
font-size: 16px;
line-height: 28px;
}
}
#maker h1,#maker h2,#maker h3,#maker div,#maker ul,#maker li,#maker p,#maker a,#maker strong,#maker span,#maker input,#maker label {
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:#3a4452; text-decoration:none;}



#maker .pc{
display:none!important;
}
@media screen and (min-width:750px) {
#maker .sp{
display:none!important;
}
}



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

#maker{
margin: -16px 0 -20px 0;
}
@media screen and (min-width:750px) {
#maker{
overflow: hidden;
position: relative;
margin: 0;
}
#maker::before{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url("../images/mkr_bg.png") center top;
z-index: -1;
}
#maker .maker-inner{
max-width: 750px;
margin: auto;
background: #fff;
overflow: hidden;
filter: drop-shadow(0 0 8px rgba(0,0,0,0.16));
}
}
#maker section{
}



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

#maker-top{
background: url("../images/mkr_tp_bg.jpg") no-repeat;
background-size: 100% auto;
padding: 0 0 32px 0;
}
@media screen and (min-width:750px) {
#maker-top{
padding: 0 0 64px 0;
}
}



#maker-top #hero{
}
#maker-top #hero h1{
padding: 24px 0 0 0;
text-align: center;
}
#maker-top #hero h1 img{
}
@media screen and (min-width:750px) {
#maker-top #hero h1 img{
width: 600px;
}
}



#maker-top #hero .slider{
margin: 8px 0 0 0;
}
@media screen and (min-width:750px) {
#maker-top #hero .slider{
margin: 24px 0 0 0;
}
}
#maker-top #hero .slider .slick-prev,
#maker-top #hero .slider .slick-next{
display: none!important;
}
#maker-top #hero figure{
margin: 8px;
}
#maker-top #hero figure img{
border-radius: 8px;
filter: drop-shadow(1px 1px 4px rgba(0,55,131,0.6));
}
#maker-top #hero p{
font-size: 13px;
line-height: 17px;
letter-spacing: 0.8px;
font-weight: 500;
color: #fff;
text-align: center;
position: relative;
margin: 4px 0 0 0;
}
@media screen and (min-width:750px) {
#maker-top #hero p{
font-size: 17px;
line-height: 25px;
margin: 16px 0 0 0;
}
}
#maker-top #hero p span{
display: block;
position: absolute;
top: -100px;
left: 20px;
}
#maker-top #hero p span img{
width: 100px;
filter: drop-shadow(1px 1px 4px rgba(0,55,131,0.3));
}



#maker-top #agreement{
padding: 0 16px;
}
@media screen and (min-width:750px) {
#maker-top #agreement{
padding: 0 32px;
}
}
#maker-top #agreement .accordion-button{
margin: 12px 0 0 0;
}
@media screen and (min-width:750px) {
#maker-top #agreement .accordion-button{
margin: 16px 0 0 0;
}
}
#maker-top #agreement .accordion-button a{
font-size: 15px;
line-height: 23px;
letter-spacing: 0.8px;
font-weight: 500;
color: #fff;
text-align: center;
display: block;
width: 160px;
height: 32px;
border-radius: 16px;
background: rgba(0,40,255,0.4);
margin: auto;
padding: 5px 0 0 0;
transition: 0.2s ease-out;
}
#maker-top #agreement .accordion-button.open a{
border-radius: 16px 16px 0 0;
}
#maker-top #agreement .accordion-button a img{
display: inline-block;
vertical-align: middle;
margin: -4px 0 0 4px;
width: 11px;
transition: 0.2s ease-out;
}
#maker-top #agreement .accordion-button.open a img{
transform: scale(1, -1);
}
#maker-top #agreement .accordion{
background: rgba(0,40,255,0.4);
border-radius: 16px;
padding: 0 16px 20px 16px;
}
@media screen and (min-width:750px) {
#maker-top #agreement .accordion{
padding: 0 32px 36px 32px;
}
}
#maker-top #agreement .accordion h2{
line-height: 20px;
font-weight: 700;
color: #fff;
text-align: center;
padding: 16px 0 4px 0;
}
@media screen and (min-width:750px) {
#maker-top #agreement .accordion h2{
line-height: 23px;
padding: 24px 0 8px 0;
}
}
#maker-top #agreement .accordion p{
font-size: 13px;
line-height: 21px;
letter-spacing: 0;
color: #fff;
margin: 8px 0 0 0;
}
#maker-top #agreement .accordion p.right{
text-align: right;
}
#maker-top #agreement .accordion ul{
margin: 8px 0 0 0;
}
#maker-top #agreement .accordion ul li{
font-size: 13px;
line-height: 21px;
letter-spacing: 0;
color: #fff;
text-indent: -13px;
margin: 4px 0 0 13px;
text-align: justify;
}



#maker-top #agreement .agreement {
text-align: center;
padding: 5px 0 0 0;
}
#maker-top #agreement .agreement label {
font-size: 15px;
line-height: 23px;
letter-spacing: 0.8px;
font-weight: 500;
color: #fff;
display: inline-block;
position: relative;
height: 44px;
padding: 8px 0 0 20px;
cursor: pointer;
}
#maker-top #agreement .agreement input[type="checkbox"] {
margin: 0;
display: none;
}
#maker-top #agreement .agreement label:before,
#maker-top #agreement .agreement label:after {
content: "";
position: absolute;
display: inline-block;
transition: transform .2s ease;
}
#maker-top #agreement .agreement label:before {
top: 12px;
left: 0;
width: 14px;
height: 14px;
border-radius: 2px;
background: #ffffff;
}
#maker-top #agreement .agreement input[type="checkbox"]:checked + label:before {
background: #ff629e;
}
#maker-top #agreement .agreement label:after {
top: 14px;
left: 5px;
width: 3px;
height: 7px;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
transform: rotate(45deg);
transition: border-bottom-color,border-right-color 0.1s ease;
border-color: #fff;
}



#maker-top #agreement .button {
margin: 0 32px;
}
@media screen and (min-width:750px) {
#maker-top #agreement .button {
width: 400px;
margin: 8px auto 0 auto;
}
}
#maker-top #agreement .button a {
display: block;
}
#maker-top #agreement .button a img {
filter: drop-shadow(1px 1px 4px rgba(0,55,131,0.6));
}



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

#maker-make {
background: #f0f7fa url("../images/mkr_mk_bg.jpg") center top no-repeat;
background-size: 100% auto;
padding: 0 0 32px 0;
}
@media screen and (min-width:750px) {
#maker-make {
padding: 0 0 36px 0;
}
}
#maker-make #workbench {
position: relative;
}
#maker-make #workbench h2 {
line-height: 20px;
text-align: center;
padding: 8px 0 0 0;
}
@media screen and (min-width:750px) {
#maker-make #workbench h2 {
display: none;
}
}



#maker-make #workbench .image {
padding: 8px 0 16px 0;
}
@media screen and (min-width:750px) {
#maker-make #workbench .image {
padding: 35px 0 35px 0;
}
}
#maker-make #workbench .image figure {
position: relative;
filter: drop-shadow(1px 1px 4px rgba(0,55,131,0.3));
}
#maker-make #workbench .image figure .userprev-image {
position: relative;
top:0;
left:0;
text-align: center;
visibility: hidden;
}
#maker-make #workbench .image figure .userprev-image img{
width: auto;
height: 428px;
}
@media screen and (max-width:374px) {
#maker-make #workbench .image figure .userprev-image img{
height: 358px;
}
}
#maker-make #workbench .image figure .userprev-cover {
width:100%;
position: absolute;
top:0;
left:0;
text-align: center;
}
#maker-make #workbench .image figure .userprev-cover img{
width: auto;
height: 428px;
}
@media screen and (max-width:374px) {
#maker-make #workbench .image figure .userprev-cover img{
height: 358px;
}
}
#maker-make #workbench .image figure .userprev-text1 {
font-family: 'Roboto','Noto Sans JP', sans-serif;
font-size: 15px;
line-height: 23px;
letter-spacing: 0.4px;
font-weight: 900;
color: #3a4452;
text-align: center;
position: absolute;
top: 27%;
bottom: 0;
left: 7%;
right: 0;
margin: auto;
width: 73%;
height: 20px;
}
#maker-make #workbench .image figure span {
display: block;
position: absolute;
top:97px;
left: 0;
right: 0;
margin: auto;
width: 308px;
height: 146px;
background: #ffffff;
z-index: -1;
}



#maker-make #workbench .position {
position: absolute;
top:0;
left: 0;
}
@media screen and (max-width:750px) {
#maker-make #workbench .position {
display: none;
}
}
#maker-make #workbench .position h3 {
font-size: 12px;
line-height: 16px;
letter-spacing: 0.5px;
color: #666;
padding: 7px 0 0 8px;
}
#maker-make #workbench .position ul {
}
#maker-make #workbench .position ul li {
padding: 12px 0 0 16px;
}
#maker-make #workbench .position ul li a {
}
#maker-make #workbench .position ul li a img {
width: auto;
height: 31px;
border-radius: 16px;
}



#maker-make #workbench .zoom {
position: absolute;
top:0;
right: 0;
}
@media screen and (max-width:750px) {
#maker-make #workbench .zoom {
display: none;
}
}
#maker-make #workbench .zoom h3 {
font-size: 12px;
line-height: 16px;
letter-spacing: 0.5px;
color: #666;
padding: 7px 8px 0 0;
}
#maker-make #workbench .zoom ul {
}
#maker-make #workbench .zoom ul li {
padding: 12px 16px 0 0;
text-align: right;
}
#maker-make #workbench .zoom ul li a {
}
#maker-make #workbench .zoom ul li a img {
width: auto;
height: 31px;
border-radius: 16px;
}



#maker-make #panel{
background: linear-gradient(135deg, #00ebff 0%, #3c87ff 100%);
filter: drop-shadow(1px 1px 4px rgba(0,55,131,0.3));
border-radius: 16px;
margin: 0 16px;
padding: 2px;
}
@media screen and (min-width:750px) {
#maker-make #panel{
margin: 0 32px;
}
}
#maker-make #panel div{
background: #f0f7fa;
border: solid 6px #fff;
border-radius: 14px;
padding: 0 8px 14px 8px;
}
@media screen and (min-width:750px) {
#maker-make #panel div{
padding: 0 24px 32px 24px;
}
}
#maker-make #panel div h2{
text-align: center;
margin: 8px 0 0 0;
}
@media screen and (min-width:750px) {
#maker-make #panel div h2{
margin: 12px 0 0 0;
}
}
#maker-make #panel div h2 img{
width: 167px;
}
@media screen and (min-width:750px) {
#maker-make #panel div h2 img{
width: 200px;
}
}
#maker-make #panel div ul{
margin: 12px 0 0 0;
}
@media screen and (min-width:750px) {
#maker-make #panel div ul{
margin: 16px 0 0 0;
}
}
#maker-make #panel div ul li{
float: left;
width: calc(16.66666% - 6.66666px);
margin: 0 8px 0 0;
}
#maker-make #panel div ul li:nth-child(6){
margin: 0;
}
#maker-make #panel div ul li a{
display: block;
position: relative;
filter: drop-shadow(1px 1px 2px rgba(0,55,131,0.3));
}
#maker-make #panel div ul li.on a::before{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: solid 2px #ff629e;
box-sizing: border-box;
}
#maker-make #panel div ul li.on a::after{
content: "";
background: url("../images/mkr_mk_arw.png");
background-size: 6px 4px;
width: 6px;
height: 4px;
position: absolute;
top: -4px;
left: 0;
right: 0;
margin: auto;
}
#maker-make #panel div ul li a img{
}
#maker-make #panel div input{
font-family: 'Roboto','Noto Sans JP', sans-serif;
font-size: 16px;
line-height: 20px;
letter-spacing: 0.8px;
font-weight: 400;
text-align: center;
color: #3a4452;
width: 100%;
height: 44px;
border-radius: 22px;
background: #f0f7fa;
box-shadow: inset 2px 2px 8px rgba(0,55,131,0.3);
margin: 16px 0 0 0;
padding: 0 0 2px 0;
-webkit-appearance: none;
appearance: none;
outline: none;
border: 0;
}
@media screen and (min-width:750px) {
#maker-make #panel div input{
display: block;
width: 400px;
margin: 24px auto 0 auto;
}
}
#maker-make #panel div .back{
position: absolute;
bottom: 28px;
left: 16px;
}
@media screen and (min-width:750px) {
#maker-make #panel div .back{
bottom: 44px;
left: 32px;
}
}
#maker-make #panel div .back a{
}
#maker-make #panel div .back a img{
width: 64px;
filter: drop-shadow(1px 1px 4px rgba(0,55,131,0.3));
}
#maker-make #panel div .button{
text-align: center;
margin: 16px 0 0 0;
}
@media screen and (min-width:750px) {
#maker-make #panel div .button{
margin: 24px 0 0 0;
}
}
#maker-make #panel div .button a{
}
#maker-make #panel div .button a img{
width: 160px;
filter: drop-shadow(1px 1px 4px rgba(0,55,131,0.3));
}



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

#maker-result {
background: #f0f7fa;
}



#maker-result #cover{
position: relative;
padding: 0 16px;
}
#maker-result #cover h2{
padding: 16px 0 0 0;
text-align: center;
}
@media screen and (min-width:750px) {
#maker-result #cover h2{
padding: 32px 0 0 0;
}
}
#maker-result #cover h2 img{
}
@media screen and (min-width:750px) {
#maker-result #cover h2 img{
width: 400px;
}
}
#maker-result #cover figure{
margin: 16px 0 0 0;
text-align: center;
}
@media screen and (min-width:750px) {
#maker-result #cover figure{
margin: 32px 0 0 0;
}
}
#maker-result #cover figure img{
filter: drop-shadow(1px 1px 4px rgba(0,55,131,0.3));
}
@media screen and (min-width:750px) {
#maker-result #cover figure img{
width: 400px;
}
}
#maker-result #cover h3{
text-align: center;
margin: 24px 0 0 0;
}
@media screen and (min-width:750px) {
#maker-result #cover h3{
margin: 32px 0 0 0;
}
}
#maker-result #cover h3 img{
}
@media screen and (min-width:750px) {
#maker-result #cover h3 img{
width: 400px;
}
}
#maker-result #cover .link{
font-size: 11px;
line-height: 17px;
text-align: center;
margin: 12px 0 0 0;
}
@media screen and (min-width:750px) {
#maker-result #cover .link{
font-size: 12px;
line-height: 20px;
margin: 16px 0 0 0;
}
}
#maker-result #cover .link a{
border-bottom: dotted 1px #3a4452;
}
#maker-result #cover .back{
position: absolute;
bottom: 6px;
left: 16px;
}
@media screen and (min-width:750px) {
#maker-result #cover .back{
left: 32px;
}
}
#maker-result #cover .back a{
}
#maker-result #cover .back a img{
width: 64px;
filter: drop-shadow(1px 1px 4px rgba(0,55,131,0.3));
}
#maker-result #cover .button{
text-align: center;
margin: 24px 0 0 0;
}
@media screen and (min-width:750px) {
#maker-result #cover .button{
margin: 32px 0 0 0;
}
}
#maker-result #cover .button a{
}
#maker-result #cover .button a img{
width: 160px;
filter: drop-shadow(1px 1px 4px rgba(0,55,131,0.3));
}



#maker-result #sns{
background: url("../images/mkr_rsl_bg.jpg") top center no-repeat;
background-size: 100% auto;
padding: 0 0 32px 0;
}
@media screen and (min-width:750px) {
#maker-result #sns{
padding: 0 0 36px 0;
}
}
#maker-result #sns h2{
font-size: 20px;
line-height: 28px;
letter-spacing: 0.8px;
font-weight: 700;
color: #fff;
text-align: center;
padding: 88px 0 0 0;
}
@media screen and (min-width:750px) {
#maker-result #sns h2{
font-size: 25px;
line-height: 33px;
padding: 144px 0 0 0;
}
}
#maker-result #sns h2 span{
font-size: 15px;
line-height: 23px;
letter-spacing: 0.8px;
font-weight: 700;
color: #fff;
text-align: center;
display: block;
margin: 4px 0 0 0;
}
#maker-result #sns figure{
}
@media screen and (min-width:750px) {
#maker-result #sns figure{
margin: 8px 0 0 0;
}
}
#maker-result #sns figure img{
}
#maker-result #sns figure + p{
}
#maker-result #sns figure + p strong{
font-size: 21px;
line-height: 25px;
letter-spacing: 0.8px;
font-weight: 700;
color: #fff;
text-align: center;
display: block;
background: rgba(0,40,255,0.4);
margin: 0 16px 0 16px;
padding: 14px 0 16px 0;
}
@media screen and (min-width:750px) {
#maker-result #sns figure + p strong{
font-size: 25px;
line-height: 29px;
margin: 0 32px 0 32px;
padding: 15px 0 16px 0;
}
}



#maker-result #sns #sample{
background: linear-gradient(135deg, #00ebff 0%, #3c87ff 100%);
filter: drop-shadow(1px 1px 4px rgba(0,55,131,0.3));
border-radius: 16px;
margin: 32px 16px 0 16px;
padding: 2px;
}
@media screen and (min-width:750px) {
#maker-result #sns #sample{
margin: 32px 32px 0 32px;
}
}
#maker-result #sns #sample .sample-inner{
background: #f0f7fa;
border: solid 6px #fff;
border-radius: 14px;
padding: 0 16px 18px 16px;
}
@media screen and (min-width:750px) {
#maker-result #sns #sample .sample-inner{
padding: 0 32px 36px 32px;
}
}
#maker-result #sns #sample .sample-inner h3{
font-size: 17px;
line-height: 21px;
letter-spacing: 0.8px;
font-weight: 700;
color: #3a4452;
text-align: center;
padding: 12px 0 0 0;
}
@media screen and (min-width:750px) {
#maker-result #sns #sample .sample-inner h3{
font-size: 21px;
line-height: 25px;
padding: 24px 0 0 0;
}
}
#maker-result #sns #sample .sample-inner figure{
text-align: center;
margin: 12px 0 0 0;
}
@media screen and (min-width:750px) {
#maker-result #sns #sample .sample-inner figure{
margin: 28px 0 0 0;
}
}
#maker-result #sns #sample .sample-inner figure img{
}
@media screen and (min-width:750px) {
#maker-result #sns #sample .sample-inner figure img{
width: 400px;
}
}
#maker-result #sns #sample .sample-inner h4{
font-size: 15px;
line-height: 19px;
letter-spacing: 0.8px;
font-weight: 700;
color: #3a4452;
margin: 16px 0 0 0;
}
@media screen and (min-width:750px) {
#maker-result #sns #sample .sample-inner h4{
font-size: 17px;
line-height: 21px;
margin: 24px 0 0 0;
}
}
#maker-result #sns #sample .sample-inner div{
background: #fff;
margin: 8px 0 0 0;
padding: 0 12px 12px 12px;
}
@media screen and (min-width:750px) {
#maker-result #sns #sample .sample-inner div{
margin: 16px 0 0 0;
padding: 0 16px 16px 16px;
}
}
#maker-result #sns #sample .sample-inner div p{
font-size: 13px;
line-height: 17px;
letter-spacing: 0.4px;
font-weight: 400;
color: #3a4452;
padding: 10px 0 0 0;
}
@media screen and (min-width:750px) {
#maker-result #sns #sample .sample-inner div p{
font-size: 15px;
line-height: 23px;
padding: 16px 0 0 0;
}
}
#maker-result #sns #sample .sample-inner div p strong{
font-size: 13px;
line-height: 17px;
letter-spacing: 0.4px;
font-weight: 400;
color: #ff629e;
}
@media screen and (min-width:750px) {
#maker-result #sns #sample .sample-inner div p strong{
font-size: 15px;
line-height: 23px;
}
}
#maker-result #sns #sample .sample-inner div + p{
font-size: 13px;
line-height: 17px;
letter-spacing: 0.4px;
font-weight: 400;
color: #3a4452;
margin: 16px 0 0 0;
}
@media screen and (min-width:750px) {
#maker-result #sns #sample .sample-inner div + p{
font-size: 15px;
line-height: 23px;
}
}
#maker-result #sns #sample .sample-inner ul{
margin: 16px 0 0 0;
}
#maker-result #sns #sample .sample-inner ul li{
font-size: 11px;
line-height: 15px;
letter-spacing: 0.4px;
font-weight: 400;
text-indent: -11px;
margin: 4px 0 0 11px;
}
@media screen and (min-width:750px) {
#maker-result #sns #sample .sample-inner ul li{
font-size: 12px;
line-height: 16px;
text-indent: -12px;
margin: 4px 0 0 12px;
}
}
#maker-result #sns #sample .sample-inner ul li a{
font-size: 11px;
line-height: 15px;
letter-spacing: 0.4px;
font-weight: 400;
text-decoration: underline;
}
@media screen and (min-width:750px) {
#maker-result #sns #sample .sample-inner ul li a{
font-size: 12px;
line-height: 16px;
}
}



/* ==============================================
#script addition
============================================== */

#canvas_makeimage, 
#canvas_userimage,
#canvas_compimage {
visibility: hidden;
position:absolute;
left:0px;
top:0px;
width:150px;
height:auto;
}
#btn-maker-start.off {
opacity: 0.5;
pointer-events: none;
}
#maker-top #maker-file_choice{
display: none;
}
.btn-adjust-maker.off {
opacity: 0.5;
pointer-events: none;
}

#maker-make #workbench .image figure .userprev-canvas {
width:100%;
position: absolute;
top:0;
left:0;
text-align: center;
}
#maker-make #workbench .image figure .userprev-text {
width:100%;
position: absolute;
top:0;
left:0;
text-align: center;
}


#maker-make #workbench .image figure .userprev-canvas canvas{
width: auto;
height: 428px;
}
#maker-make #workbench .image figure .userprev-text canvas{
width: auto;
height: 428px;
}

@media screen and (max-width:374px) {
#maker-make #workbench .image figure .userprev-canvas canvas{
height: 358px;
}
#maker-make #workbench .image figure .userprev-text canvas{
height: 358px;
}
}

#userprev-touch {
position: absolute;
top:0;
left:0;
width:100px;
height: 428px;
}
@media screen and (max-width:374px) {
#userprev-touch {
height: 358px;
}
}

#text_temp {
	position:absolute;
	left:0;
	top:0;
	overflow:hidden;
	visibility: hidden;
}
#text_temp span{
	font-family: 'Roboto','Noto Sans JP', sans-serif;
	font-size:10px;
	font-weight: bold;
	letter-spacing: 0px;
}