@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap');
html{height:100%;background-color:#fff;}
body{font-family:'Noto Sans JP',"YuGothic","Yu Gothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",verdana,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;font-weight:400;font-size:14px;line-height:2;}
img{width:100%;height:auto;}
a:link,a:visited,a:hover,a:active{color:#333}

br.only-pc{display:none;}
br.only-sp{display:block;}

header{border-top:solid 10px;border-image:linear-gradient(to right, #bed52e, #f8e300) 1;border-image-slice:1;background-color:#fff;padding:10px 0;box-shadow:0px 0px 10px 10px rgb(0 0 0 / 16%);position:relative;z-index:9999;}
header h1 {width:420px;padding-left:38px;line-height:0;}
header h1 a.head img{width:370px;}
header h1 a.dog img,
header h1 a.cat img{width:185px;}

h2.select-item-name{border:unset!important;font-size:24px!important;margin-bottom:0!important;line-height:1.4;}

.l-inner{padding:0 20px;}
body.customize .l-inner{max-width:2000px;width:100%;padding-left:140px;padding-right:0;}

footer{background-color:#a5a5a5;padding:24px 0;color:#fff;z-index:9999;position:relative;}
footer a:link,footer a:visited,footer a:hover,footer a:active{color:#fff;}
.footerlink-box{display:flex;flex-wrap:wrap;justify-content:center;margin-top:24px;}
.footerlink-col {margin:auto 8px;}
.footerlink-col a{font-size:13px;}
.copyright{margin-top:24px;font-size:12px;text-align:center;}

body.customize{background-color:#f7f8f8;}
body.customize main{padding-top:32px;position:relative;}
.view{display:none;}

.confirm-col{font-size:18px;}
.confirm-col.price {font-size:24px;font-weight:bold;line-height:1.8;}
.confirm-col.price span{font-size:16px;}

.item-content a{display:block;border:#333 solid 1px;border-radius:10px;padding:14px;background-color:#fff;margin:8px 8px 16px 8px;}
.item-content a:hover{border:solid 6px #F8E300;padding:9px;}
.radio-inline__input {clip: rect(1px, 1px, 1px, 1px);position: absolute !important;}
.pr-box{display: flex;flex-wrap: wrap;justify-content: space-between;}
.pr-box .radio-inline__label{width:47%;margin-bottom:3.8%;}

.radio-inline__label{border:#333 solid 1px;border-radius:10px;padding:14px;background-color:#fff;margin:0px 4px 0px 4px;width:23.2%;display:block;text-align:center;font-size:18px;font-weight:800;}
.radio-inline__input:checked + .radio-inline__label{border:solid 6px #F8E300;padding:9px;}

.customize-nav{position:absolute;background-color:#a5a5a5;height:100%;color:#fff;font-size:12px;text-align:center;top:0;}
.customize-nav a{cursor:default;}
.customize-nav a:hover{color:#fff;}
.customize-nav li{border-bottom:solid 1px #fff;width:108px;padding:16px 0;}
.customize-nav li.active {background:linear-gradient(to right,#bed52e, #f8e300);}

.pr-c-right{display:none;}
.pr-c-right h2.select-item-name,
.item-content-wrapper h2,
.size-content-wrapper h2{font-size:20px;font-weight:800;border-bottom:solid 3px;border-image:linear-gradient(to right, #bed52e, #f8e300) 1;border-image-slice:1;margin-bottom:24px;}
a .item-content-col {display: flex;flex-wrap: nowrap;justify-content: left;}
.item-content-col_left {width:100%;}

.item-content-color{max-width:100%;width:calc(24px * 7);margin:5px auto;line-height:0;}
.item-content-color span{display:inline-block;max-width:100%;width:20px;height:20px;border:1px solid #333;border-radius:11px;margin:2px;}

.item-content-col_right{width:58%;}

.print-range-content-box .item-content-col h3 {margin-bottom: 0;}
.item-content-img{line-height:0;position:relative;}
.item-content-img img{vertical-align:top!important;}
.item-content-img img.area,
.item-content-img img.mask{display:none;position:relative;z-index:2;}
.item-content-img p.printarea{position:absolute;z-index:1;border:3px solid #fff;background-color:#fff;background-image:linear-gradient(45deg,#bed52e 25%,transparent 25%,transparent 75%,#bed52e 75%),linear-gradient(45deg,#bed52e 25%,transparent 25%,transparent 75%,#bed52e 75%);background-size:40px 40px;background-position:0 0,20px 20px;}

.item-content-img-box {display: flex;flex-wrap: nowrap;}
p.print {color: #fff;width: max-content;padding: 0 4px;font-size: 12px;margin-top: 8px;}
p.price {font-size: 17px;font-weight: 800;}
p.price span {font-size: 12px;}
p#pagetop {text-align: center;padding: 32px 0;}
p#pagetop img {max-width: 40px;}
.size-content table {width: 100%;}
.size-content table th {border: solid 1px #231815;background-color: #dcdddd;text-align: center;}
.size-content table td {border: solid 1px #231815;background-color: #fff;text-align: center;}
.btn_next {width: 100%;height: auto;max-width: 240px;display: block;margin: 24px auto 0;}

.pr-box p.print.size{color:#111;margin:0;padding:0;}
.pr-box p.price{text-align:left;}

.pr-c-left{padding-bottom:64px;padding-right:0px!important;width:40%;min-height:1000px;}
.pr-c-right{width:58%;display:block;background-color:#fff;margin-bottom:0;position:relative;margin-top:-32px;}
.pr-c-right img,
.pr-c-right .imagearea{padding:0 20px;margin:auto;display:block;position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);-webkit-transform:translateY(-50%) translateX(-50%);}
.pr-c-right .r_imbox .imagearea{padding:0;top:0;left:0;transform:none;-webkit-transform:none;}
div.mask{pointer-events:none;}

.pr-c-right.pr-img img{position:relative;padding:0;margin:0;top:0;left:0;transform:none;-webkit-transform:none;}
.pr-c-right.pr-img img.mask{position:absolute;z-index:2;}
.pr-c-right.pr-img p.printarea{position:absolute;padding:0;z-index:1;border:3px solid #fff;background-color:#fff;background-image:linear-gradient(45deg,#bed52e 25%,transparent 25%,transparent 75%,#bed52e 75%),linear-gradient(45deg,#bed52e 25%,transparent 25%,transparent 75%,#bed52e 75%);background-size:40px 40px;background-position:0 0,20px 20px;}

.pr-c-right .r_imbox,
.pr-c-right .r_zmbox{position:relative;}
.r_zmbox .imagearea{padding:0;margin:auto;display:block;position:absolute;top:0;left:0;transform:none;-webkit-transform:none;}
.imagearea .imarzn{position:absolute;overflow:hidden;border:3px dotted #900;}
#v04 .r_imbox .imagearea .imarzn,
#v05 .r_imbox .imagearea .imarzn,
#v06 .r_imbox .imagearea .imarzn{background-color:#fff;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%),linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%);background-size:10px 10px;background-position:0 0,5px 5px;}
#v04 .r_imbox .imagearea .imarzn,
#v05 .r_imbox .imagearea .imarzn,
#v06 .r_imbox .imagearea .imarzn{border:none;}

.item-content-col h3{font-size:18px;font-weight:800;line-height:1.4;margin-bottom:14px;text-align:left;}
.item-content-col h3 span{display:block;width:30em;font-size:14px;font-weight:400;}
.item-content-col h3 span.size_text{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;text-overflow:ellipsis;}

p.print-size {font-size:12px;text-align:left;line-height:1.4;margin-top:5px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;text-overflow:ellipsis;}

.slider{display:block;border-bottom:3px solid #888;height:1px;width:calc(98% - 40px);padding-bottom:40px;margin:0 auto 40px;position:relative;}
.slider span{display:block;width:40px;height:40px;position:absolute;top:22px;left:calc(50% - 20px);background:linear-gradient(to right,#bed52e, #f8e300);border-radius:20px;}

ul.button3{text-align:center;}
ul.button3 li{display:inline-block;vertical-align:top;width:30%;padding:0 1.5%;}

ul.switch_view{position:absolute;top:20px;right:10px;z-index:3;}
ul.switch_view li{padding:5px;margin:3px;text-align:center;cursor:pointer;display:none;font-size:12px;}
ul.switch_view li.active{display:block;}
ul.switch_view li img{display:inline-block;width:30px;height:30px;position:relative;top:0;left:0;padding:0;transform:none;-webkit-transform:none;}

.print-range-content-box{display:flex;justify-content:space-between;flex-wrap:wrap;}

#uploadedimage{position:absolute!important;padding:0!important;margin:0!important;transform:none;}
#uploadedimage img{position:relative!important;padding:0!important;margin:0!important;transform:none;top:0;left:0;}
#usertextimage,
.userstamp{position:absolute!important;padding:0!important;margin:0!important;transform:none!important;-webkit-transform:none!important;}
.userstamp{width:30%;height:auto;}
.userstamp .wrap{border:3px solid transparent;}
.userstamp .wrap .rotate{position:absolute;top:-16px;left:-16px;width:0;height:0;}
.userstamp .wrap .resize{position:absolute;bottom:-16px;right:-16px;width:0;height:0;}
.userstamp.active .wrap{border:3px dotted #900;}
.userstamp.active .wrap .rotate{width:32px;height:32px;background-image:url(/img/rotate.png);cursor:pointer;background-size:cover;}
.userstamp.active .wrap .resize{width:32px;height:32px;background-image:url(/img/resize.png);cursor:pointer;background-size:cover;}

#v03 .pr-box{justify-content:left;margin-bottom:56px;}
#v03 .pr-box .radio-inline__label,
#v06 #fontcolor-list .radio-inline__label{width:40px;height:40px;margin:8px;border-radius:50%;border:4px solid #fff;box-shadow:0 0 4px #888;}
#v03 .pr-box .radio-inline__input:checked + .radio-inline__label,
#v06 #fontcolor-list .radio-inline__input:checked + .radio-inline__label{border:solid 5px #F8E300;padding:8px;}

#v04 .pr-box .item-content-col_left,
#v04 .pr-box .item-content-col_right{width:100%;}
#v04 #photo_op{display:none;}
#v04 .slider span{left:-20px;}

#v05 ul.tab{text-align:center;width:100%;margin:40px auto 10px;border-bottom:solid 3px;border-image:linear-gradient(to right, #bed52e, #f8e300) 1;border-image-slice:1;}
#v05 ul.tab li{display:inline-block;color:#fff;width:calc(45% - 0.8em);margin:0 0.4em;background-color:#333;cursor:pointer;font-size:20px;font-weight:800;}
#v05 ul.tab li.select{background:linear-gradient(to right,#bed52e, #f8e300);}
#v05 .pr-box.stamp{height:320px;overflow:auto;padding:0 8px;margin-bottom:60px;display:block;}
#v05 .pr-box.stamp .radio-inline__label{display:inline-block;width:23.5%;margin-bottom:1.6%;}
#v05 .pr-box.stamp .radio-inline__label.backblack{background-color:#000;}
#v05 .pr-box.stamp::-webkit-scrollbar{width:16px;}
#v05 .pr-box.stamp::-webkit-scrollbar-track{background:#fff;border-radius:10px;}
#v05 .pr-box.stamp::-webkit-scrollbar-thumb{background:#333;border-radius:10px;}

#v05 #uploadedimage img,#v06 #uploadedimage img,#v07 #uploadedimage img,#v07 .userstamp img,#v07 #usertextimage img{pointer-events:none;}
#v05 .userstamp img,#v06 .userstamp img,#v07 .userstamp img{padding:0;margin:auto;display:inline;top:0;left:0;transform:none;-webkit-transform:none;}
#v05 #usertextimage img,#v06 #usertextimage img,#v07 #usertextimage img{padding:0;margin:auto;display:inline;top:0;left:0;transform:none;-webkit-transform:none;}
#v05 #usertextimage{pointer-events:none!important;}
#v05 .wrap,#v06 .wrap,#v07 .wrap{line-height:0;}

#v06 .customize-text{border:solid 1px #231815;width:100%;font-size:24px;padding:8px;line-height:180%;text-align:left;background-color:#fff;border-radius:10px;margin:16px auto;}
#v06 #fontcolor-list{display:block;}
#v06 #fontcolor-list .radio-inline__label{display:inline-block;}
#v06 #usertextimage img{border:none;}
#v06 #usertextimage.active .wrap{border:3px dotted #900;}
#v06 #usertextimage.active .wrap .rotate{position:absolute;top:-16px;left:-16px;width:32px;height:32px;background-image:url(/img/rotate.png);cursor:pointer;background-size:cover;}
#v06 #usertextimage.active .wrap .resize{position:absolute;bottom:-16px;right:-16px;width:32px;height:32px;background-image:url(/img/resize.png);cursor:pointer;background-size:cover;}

#v07 .imagearea .imarzn{border:solid 3px transparent;}
#v07 p.sendingnow{display:none;line-height:160%;padding:20px 1em;}

.nomoveobject{pointer-events:none;}
.text-desc{margin:20px 0;font-size:14px;letter-spacing:-0.5px;}
.text-desc p{margin-bottom:10px;}
.text-desc p.red{color:#f00;font-weight:900;}
label.radio-inline__label img{vertical-align:middle;}

.customize-text-box {display: flex;flex-wrap: wrap;justify-content: space-between;margin-left: -12px;}
.customize-text-col {display: flex;width: 48%;margin: 0;}
.customize-text-col select {margin-left: 16px;border: solid 1px #231815;width: 90%;font-size: 16px;padding: 8px;line-height: 1;text-align: center;background-color: #fff;border-radius: 10px;margin-top: 16px;appearance: auto;background-image: url("../../customize/images/select-arrow.png");background-repeat: no-repeat;background-size: 38px;appearance: none;background-position-x: right;background-position-y: center;}
.customize-text-col p {width: 76px;position: relative;margin: auto;text-align: right;padding-top: 16px;}

.nwgrip, .negrip, #swgrip, .segrip, #ngrip, #egrip, #sgrip, #wgrip {width: 16px;height: 16px;position: absolute;display: none;}
.negrip{left: 8px;top: -8px;background-color: red;}
.segrip{bottom: -8px;right: -8px;background-image: url(/img/resize-btn.png);}
.nav-list{color: white;}
p.submit-wrap.next{text-align:center;padding:15px 0;}
p.submit-wrap.next a{padding:15px 60px;text-align:center;background:linear-gradient(to right,#bed52e, #f8e300);color:#fff;font-size:18px;font-weight:800;}
p.submit-wrap.prev{width:100%;height:auto;display:block;margin:auto;text-align:center;}

.pr-c-right h2.select-item-name{display:none;padding-bottom:10px;}

#work{height:0;font-size:0px;}
#work #tempimagecanvas{display:none;}

@media screen and (max-width:1570px){
  #v05 .pr-box.stamp .radio-inline__label{margin:0 2px 1.6%;}
}
@media screen and (max-width:640px){
  header h1 {width:100%;max-width:370px;margin:0 auto;padding-left:0;line-height:0;}
  header h1 a.head img{width:100%;}
  header h1 a.dog img,
  header h1 a.cat img{width:49.5%;}

  .item-content-col_right{width:99%;padding-left:1%;}
  .item-content-col h3 span.size_text{width:auto;}
  .pr-box .radio-inline__label{width:calc(50% - 6px);margin:0 0 2.8%;}
  .pr-box.stamp .radio-inline__label{margin:0 2px 2.8%;}
  h2.select-item-name{display:block;}

  #v05 ul.tab li{width:calc(45% - 0.8em);}
  #v05 .pr-box.stamp{height:auto;max-height:320px;}
  #v06 .font-image{font-size:14px;}
}

@media screen and (max-width:1160px) {
  .customize-nav{display:none;}
  .l-inner{padding:0 3% 0 2%;}
  body.customize .l-inner{max-width:2000px;width:100%!important;padding:0 3%;}

  .pr-c-left{width:100%;}
  .pr-c-right{width:100%;}
  .pr-c-right h2.select-item-name{display:block;}

  .pr-box.stamp .radio-inline__label{width:18%;margin-bottom:2%;}
  .item-content-col h3 span{width:auto;}
  ul.switch_view{bottom:0;right:0;top:auto;left:auto;}

  #v02 .pr-c-left h2.select-item-name,  #v03 .pr-c-left h2.select-item-name,#v04 .pr-c-left h2.select-item-name,#v05 .pr-c-left h2.select-item-name,#v06 .pr-c-left h2.select-item-name,#v07 .pr-c-left h2.select-item-name{display:none;}
  #v02 .pr-c-left,#v03 .pr-c-left,#v04 .pr-c-left,#v05 .pr-c-left,#v06 .pr-c-left,#v07 .pr-c-left{order:2;}
  #v02 .pr-c-right,#v03 .pr-c-right,#v04 .pr-c-right,#v05 .pr-c-right,#v06 .pr-c-right,#v07 .pr-c-right{order:1;}
}
@media screen and (min-width:641px){
  body{font-size:16px;line-height:2.4;}
  br.only-sp{display:none;}
  br.only-pc{display:block;}
  .l-inner{padding:0 20px;width:100%;max-width:100vw;margin:auto;}
  .item-content{display:flex;flex-wrap:wrap;justify-content:flex-start;}
  .item-content a{display:block;width:24%;margin:0 1.32% 1.32% 0!important;padding:14px;background-color:#fff;}
  .item-content a:nth-child(4n){margin-right:0!important;}

  .item-content-col{margin:0!important;}
  .item-content-col{display:block!important;}
  .item-content-col_left{width:100%;margin-right:4%;border-bottom:solid 1px #231815;padding-bottom:8px;margin-bottom:12px;}
  .item-content-col_right{width:100%;}
  .item-content-wrapper{padding-right:24px;background-color:#f8f8f8;}

  .print-box{display:flex;justify-content:left;flex-wrap:wrap;margin-bottom:10px;}

  p.print{margin-right:8px;line-height:1;height:fit-content;padding:7px;margin-top:0;}
  p.price{font-size:17px;font-weight:800;line-height:1.6;}
  .pr-c-right img{padding:0 20px;margin:auto;display:block;position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);-webkit-transform:translateY(-50%) translateX(-50%);}
}


/* fonts */
.font-image{font-weight:800;font-size:36px;line-height:140%;}

.wait{position:fixed;top:-200vh;left:-200vw;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;z-index:1000;}
.spin{font-size:30px;width:1em;height:1em;border-radius:50%;animation:waitspin 1.2s infinite ease;}
@keyframes waitspin{
0%,100%{box-shadow:0em -2.6em 0em 0em #bed52e,1.8em -1.8em 0 0em rgba(190,213,46,0.2),2.5em 0em 0 0em rgba(190,213,46,0.2),1.75em 1.75em 0 0em rgba(190,213,46,0.2),0em 2.5em 0 0em rgba(190,213,46,0.2),-1.8em 1.8em 0 0em rgba(190,213,46,0.2),-2.6em 0em 0 0em rgba(190,213,46,0.5),-1.8em -1.8em 0 0em rgba(190,213,46,0.7);}
12.5%{box-shadow:0em -2.6em 0em 0em rgba(190,213,46,0.7),1.8em -1.8em 0 0em #bed52e,2.5em 0em 0 0em rgba(190,213,46,0.2),1.75em 1.75em 0 0em rgba(190,213,46,0.2),0em 2.5em 0 0em rgba(190,213,46,0.2),-1.8em 1.8em 0 0em rgba(190,213,46,0.2),-2.6em 0em 0 0em rgba(190,213,46,0.2),-1.8em -1.8em 0 0em rgba(190,213,46,0.5);}
25%{box-shadow:0em -2.6em 0em 0em rgba(190,213,46,0.5),1.8em -1.8em 0 0em rgba(190,213,46,0.7),2.5em 0em 0 0em #bed52e,1.75em 1.75em 0 0em rgba(190,213,46,0.2),0em 2.5em 0 0em rgba(190,213,46,0.2),-1.8em 1.8em 0 0em rgba(190,213,46,0.2),-2.6em 0em 0 0em rgba(190,213,46,0.2),-1.8em -1.8em 0 0em rgba(190,213,46,0.2);}
37.5%{box-shadow:0em -2.6em 0em 0em rgba(190,213,46,0.2),1.8em -1.8em 0 0em rgba(190,213,46,0.5),2.5em 0em 0 0em rgba(190,213,46,0.7),1.75em 1.75em 0 0em #bed52e,0em 2.5em 0 0em rgba(190,213,46,0.2),-1.8em 1.8em 0 0em rgba(190,213,46,0.2),-2.6em 0em 0 0em rgba(190,213,46,0.2),-1.8em -1.8em 0 0em rgba(190,213,46,0.2);}
50%{box-shadow:0em -2.6em 0em 0em rgba(190,213,46,0.2),1.8em -1.8em 0 0em rgba(190,213,46,0.2),2.5em 0em 0 0em rgba(190,213,46,0.5),1.75em 1.75em 0 0em rgba(190,213,46,0.7),0em 2.5em 0 0em #bed52e,-1.8em 1.8em 0 0em rgba(190,213,46,0.2),-2.6em 0em 0 0em rgba(190,213,46,0.2),-1.8em -1.8em 0 0em rgba(190,213,46,0.2);}
62.5%{box-shadow:0em -2.6em 0em 0em rgba(190,213,46,0.2),1.8em -1.8em 0 0em rgba(190,213,46,0.2),2.5em 0em 0 0em rgba(190,213,46,0.2),1.75em 1.75em 0 0em rgba(190,213,46,0.5),0em 2.5em 0 0em rgba(190,213,46,0.7),-1.8em 1.8em 0 0em #bed52e,-2.6em 0em 0 0em rgba(190,213,46,0.2),-1.8em -1.8em 0 0em rgba(190,213,46,0.2);}
75%{box-shadow:0em -2.6em 0em 0em rgba(190,213,46,0.2),1.8em -1.8em 0 0em rgba(190,213,46,0.2),2.5em 0em 0 0em rgba(190,213,46,0.2),1.75em 1.75em 0 0em rgba(190,213,46,0.2),0em 2.5em 0 0em rgba(190,213,46,0.5),-1.8em 1.8em 0 0em rgba(190,213,46,0.7),-2.6em 0em 0 0em #bed52e,-1.8em -1.8em 0 0em rgba(190,213,46,0.2);}
87.5%{box-shadow:0em -2.6em 0em 0em rgba(190,213,46,0.2),1.8em -1.8em 0 0em rgba(190,213,46,0.2),2.5em 0em 0 0em rgba(190,213,46,0.2),1.75em 1.75em 0 0em rgba(190,213,46,0.2),0em 2.5em 0 0em rgba(190,213,46,0.2),-1.8em 1.8em 0 0em rgba(190,213,46,0.5),-2.6em 0em 0 0em rgba(190,213,46,0.7),-1.8em -1.8em 0 0em #bed52e;}
}