@charset "UTF-8";

/** ========================================================
 * ページ全体の定義
 * @ PAGE
 * ====================================================== */
*{
  box-sizing:border-box;
}
html {font-size: 100%;}
/* html,body,.wrapper{height:100%;} */
body {
  -webkit-text-size-adjust: 100%;
  position: relative;
  color: #8e8e8e;
  background: #ffdef2;
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','MS P Gothic','Osaka';
  font-size: 16px;
  line-height: 1.5;
}
[v-cloak]{display:none;}
img{
  max-width: 100%;
  vertical-align: bottom;
}
.bg_blue{
  background: url(/assets/img/bg_ble.png);
  background-size: 15px;
}
.bg_pink{
  background: url(/assets/img/bg_pnk.png);
  background-size: 15px;
}
.bg_yellow{
  background: url(/assets/img/bg_yew.png);
  background-size: 15px;
}

.marquee{
  width:100%;
  overflow:hidden;
  position:relative;
}
.marquee p {
  margin:0;
  padding-left:400px;
  display:inline-block;
  white-space:nowrap;
  animation-name:marquee; animation-timing-function:linear;
  animation-duration:15s; animation-iteration-count:infinite;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
}
@keyframes marquee {
  from   { transform: translate(0%);} 
  99%,to { transform: translate(-100%);}
}
header{
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 768px;
  padding: 10px;
  border-bottom: 5px solid #836f7b;
  background: #e581be;
  zoom: 1;
  z-index: 20;
}

header .logo{
  text-align: center;
  min-height: 26px;
}
header .logo img{
  height: 26px;
}

.menu-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  height: 30px;
  width: 30px;
  justify-content: center;
  align-items: center;
  z-index: 90;
}
.menu-btn span {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background-color: #ffffff;
  position: absolute;
  transition: all .4s;
}
.menu-btn span:nth-child(1) {
  top: 6px;
}
.menu-btn span:nth-child(3) {
  bottom: 6px;
}

.menu-btn.is-open span:nth-child(1){
  -webkit-transform: translateY(8px) rotate(-45deg);
  transform: translateY(8px) rotate(-45deg);
}
.menu-btn.is-open span:nth-child(2){
  opacity: 0;
}
.menu-btn.is-open span:nth-child(3){
  -webkit-transform: translateY(-8px) rotate(45deg);
  transform: translateY(-8px) rotate(45deg);
}

.slide_menu_wrap{
  position: fixed;
  top: 0;
  right: 0;
  width: 71%;
  max-width: 768px;
  margin: 0 auto;
  overflow: hidden;
}

.slide_menu{
  position:absolute;
  z-index: 20;
  top:0;
  right: -120%;
  width: 100%;
  height: 100vh;
  background:#e581be;
  padding: 40px 30px;
  transition: all 0.6s;
  border-left: 1px solid #ccc;
}

.slide_menu_wrap.is-active .slide_menu{
  right: 0;
}
.slide_menu .menu-title a{
  color: #fff;
  font-size: 24px;
}
.slide_menu .menu-list{
  padding: 20px 0 0 15px;
}
.slide_menu .menu-list .list_item:not(:first-of-type){
  margin-top: 10px;
}
.slide_menu .menu-list .list_item a{
  color: #fff;
  font-size: 18px;
  line-height: 1.5;
}

.mv_area{
  background: url(/assets/img/bg_ble.png);
  background-size: 15px;
}

.dl_area .marquee{
  background: #e582bc;
  padding: 5px 0;
}
.qr_create{
  padding: 15px 25px 25px;
}
.qr_create .qr_form{
  display: flex;
  justify-content: space-between;
}
.qr_create .qr_form .txt_form{
  box-shadow: none;
  appearance: none;
  border-radius: 100vh;
  border: 1px solid #b8b4b6;
  width: 84%;
}
.qr_create .qr_form .btn_form{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  border: 1px solid #b8b4b6;
  border-radius: 100vh;
  background: #e582bc;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}
.qr_create .txt_form:focus {
  outline: 0;
  box-shadow: 0 0 0 2px rgb(33, 150, 243) inset;
}
.qr_create .txt_form::placeholder {
  color: #c4c4c4;
  font-size: 80%;
}
.qr_create .qr_area{
  display: flex;
  justify-content: center;
  margin: 25px 0;
}
.qr_create .qr_area .qr_btns .btn_ttl{
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}
.qr_create .qr_area .qr_btns .btn{
  display: block;
  width: 87px;
}
.qr_create .qr_area .qr_btns-right{
  display: flex;
  align-items: flex-end;
}
.qr_create .qr_area .qr_img{
  display: flex;
  align-items: center;
  width: calc(100% - 174px);
  max-width: 180px;
  margin: 0 7px;
}
.qr_create .qr_area .qr_img img{
  background: #fff;
  border-radius: 10px;
  padding: 10px;
}

.color_select{
  border-radius: 100vh;
  border: 1px solid #b8b4b6;
  background: #fff;
  padding: 0 20px 0 10px;
  position: relative;
}
.color_select:after{
  content: '';
  width: 8px;
  height: 8px;
  border: 0px;
  border-top: solid 2px #a2a2a2;
  border-right: solid 2px #a2a2a2;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -6px;
}
.color_select .scroll{
  overflow-x:scroll;
  padding: 13px 0 13px 5px;
}
.color_select ul{
  display: flex;
  width: 120%;
  justify-content: space-between;
}
.color_select a{
  position: relative;
  display: inline-block;
}
.color_select a.is-select::before{
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background: transparent;
  border-radius: 50%;
  border: 2px solid #ec82bb;
  position: absolute;
  z-index: 10;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
.color_select li{
  height: 18px;
  margin: 0 8px;
}
.color_select li span{
  display: block;
  width:18px;
  height: 18px;
  border-radius: 50%;
}
.color_select .pumpkin span{
  background: #e5a323;
}
.color_select .orange span{
  background: #ee7800;
}
.color_select .red span{
  background: #ea5549;
}
.color_select .cafe span{
  background: #946c45;
}
.color_select .green span{
  background: #65ab31;
}
.color_select .blue span{
  background: #0068b7;
}
.color_select .turquoise span{
  background: #009b9f;
}
.color_select .ruby span{
  background: #c70067;
}
.color_select .pink span{
  background: #eb6ea0;
}
.color_select .purple span{
  background: #cc7eb1;
}
.color_select .gray span{
  background: #4e454a;
}
.color_select .black span{
  background: #000;
}
.sns_select{
  border-radius: 100vh;
  border: 1px solid #b8b4b6;
  background: #fff;
  padding: 0 20px 0 10px;
  position: relative;
  margin-top: 25px;
}
.sns_select:after{
  content: '';
  width: 8px;
  height: 8px;
  border: 0px;
  border-top: solid 2px #a2a2a2;
  border-right: solid 2px #a2a2a2;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -4px;
}
.sns_select .scroll{
  overflow-x:scroll;
  padding: 13px 0 13px 5px;
}
.sns_select ul{
  display: flex;
  width: 99%;
  justify-content: space-between;
}
.sns_select ul li{
  height: 18px;
  margin: 0 8px;
}
.sns_select a{
  position: relative;
  display: flex;
  align-items: center;
  width: 18px;
  height: 18px;
}
.sns_select a img{
  vertical-align: middle;
}
.sns_select a.is-select::before{
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background: transparent;
  border-radius: 50%;
  border: 2px solid #ec82bb;
  position: absolute;
  z-index: 10;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

.sticker_area{
  border-bottom: 5px solid #e4c53a;
}
.sticker_area .marquee{
  background: #e4c53a;
  padding: 5px 0;
}
.sticker_create{
  padding: 15px 25px 25px;
}
.sticker_create .size_select,
.sticker_create .quantity_select,
.sticker_create .type_select,
.sticker_create .name-text-input{
  border-radius: 20px;
  border: 1px solid #b8b4b6;
  background: #fff;
  padding: 10px ;
}
.sticker_create .size_select ul{
  display: flex;
  justify-content: space-between;
}
.sticker_create .size_select a,
.sticker_create .quantity_select a,
.sticker_create .type_select a{
  border: 1px solid #00c2d9;
  color: #00c2d9;
  font-weight: bold;
  text-align: center;
  padding:5px;
  border-radius: 100vh;
  font-size: 13px;
  display: block;
}
.sticker_create .size_select a.active,
.sticker_create .quantity_select a.active,
.sticker_create .type_select a.active{
  background: #00c2d9;
  color: #fff;
}
/* タイプ選択 */
.sticker_create .type_select{
  border-radius: 20px;
}
.sticker_create .type_select ul{
  display: flex;
  justify-content: center;
}
.sticker_create .type_select li{
  width: 35%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sticker_create .type_select li p{
  width: 50%;
  margin: 0 auto 10px;
  height: 100%;
  display: flex;
  align-items: center;
}
.sticker_create .type_select li + li{
  margin-left: 5%;
}
/* サイズ選択 */
.sticker_create .size_select{
  margin-top: 8px;
  padding-top: 0;
}
.sticker_create .size_select ul{
  flex-wrap: wrap;
  justify-content: center;
}
.pop .size_select li{
  width: 27%;
  margin: 10px 2.5% 0;
}
.pop .size_select li:nth-of-type(1){
  margin-left: 16%;
}
.pop .size_select li:nth-of-type(2){
  margin-right: 16%;
}
.seal .size_select li{
  margin: 10px 2px 0;
}
/* 用紙選択 */
.sticker_create .quantity_select{
  margin-top: 8px;
  min-height: 50px;
}
.sticker_create .quantity_select ul{
  display: flex;
  justify-content: center;
}
.sticker_create .quantity_select li{
  width: 30%;
}
.sticker_create .quantity_select.paper_type li{
  width: 50%;
}


/*20240604文章入力追加*/
.sticker_create .name-text-input{
  margin-top: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.sticker_create .name-text-input span{
  font-size: 13px;
  color: #00c2d9;
  width: 100%;
}
.sticker_create .name-text-input  input[type="text"]{
  border: 1px solid #00c2d9;
  color: #00c2d9;
  font-weight: bold;
  border-radius: 100vh;
  font-size: 13px;
  width: 80%;
  margin-right: 5px;
  appearance : none;
  outline: none;
  box-shadow:none;
  padding: 5px 10px;
}
.sticker_create .name-text-input a{
  color: #fff;
  font-weight: bold;
  text-align: center;
  border-radius: 100vh;
  font-size: 13px;
  display: block;
  padding: 7px 13px;
  background: #00c2d9;
  line-height: 1;
}
.sticker_create .quantity_select li + li{
  margin-left: 5%;
}
.sticker_create .sticker_img{
  margin-top: 8px;
  background: #fff;
  padding: 0 20px 0 10px;
  min-height: 210px;
}
.sticker_create .sticker_img.pop-preview{
  padding: 20px 0;
}
.pop-preview table{
  margin: 0px auto;
  width: 90%;
}
.pop-preview table .transparent{
  opacity: 0;
}
/*
.pop-preview .preview-body{
  width: 250px;
}
*/
.preview_notice{
  color: #e581be;
  font-weight: bold;
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
}
.agree_area{
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.agree_area label{
  font-weight: bold;
}
.agree_area label input{
  margin-right: 10px;
}
.agree_area .checkbox-input{
  display: none;
}
.agree_area .checkbox-parts{
  padding-left: 25px;
  position:relative;
  margin-right: 20px;
}
.agree_area .checkbox-parts::before{
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 4px;
  background: #fff;
}
.agree_area .checkbox-input:checked + .checkbox-parts::after{
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: 5px;
  width: 7px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #d01137;
  border-right: 3px solid #d01137;
}
.agree_area .get_number{
  display: block;
  border-radius: 20px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  background: #fff;
  padding: 3px;
  border: 1px solid #b8b4b6;
  color: #8e8e8e;
  margin-top: 10px;
}
.agree_area .get_number.active{
  border: 1px solid #e67700;
  background: #e67700;
  color: #fff;
}
.agree_area .get_number.show_code{
  color: #333;
  font-size: 20px;
}
.agree_area p{
  color: #e97cb9;
  font-size: 15px;
  font-weight: bold;
}
.top .about_area{
  padding: 20px;
  background: #d6d6d6;
  text-align: center;
}
.top .about_area a{
  color: #8e8e8e;
  font-size: 12px;
  font-weight: bold;
  text-decoration: underline;
}
.top .about_area .new_qr{
  display: inline-block;
  margin-bottom: 5px;
  padding: 6px 30px;
  border-radius:100vh;
  background: #fff;
  text-decoration: none;
}

.agree_area .print_help{
  min-height: 44px;
  margin-top: 15px;
}
.top .app_download_area{
  padding: 15px 10px 30px 10px;
  background: #fff;
  text-align: center;
}
.top .app_download_area .title{
  font-weight: bold;
  font-size: min(5vw, 30px);
  color: #e581be;
}
.top .app_download_area .link-icon{
  margin-top: min(5vw, 20px);
  line-height: min(25vw, 150px);
}
.top .app_download_area .link-icon img{
  width: 70vw;
  max-width: 400px;
}

/* ポップアップ */
.popup_detail{
  display: none;
}
#cboxOverlay{
  background: #000;
}
#cboxContent{
  margin: 0;
  padding: 15px 20px 15px 20px;
  background: #fff;
  border-radius: 26px;
}
#cboxClose{
  display: none;
}
#cboxLoadingOverlay,
#cboxLoadedContent{
  background: transparent;
}
#cboxLoadedContent{
  overflow: visible!important;
}
.popup_inner{
  color: #333;
}
.popup_inner .popup_title{
  min-height: 30px;
  margin: 0 10px 5px 0;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.popup_inner .agree_listWrap{
  overflow-y: auto;
  max-height: calc(85vh - 160px);
  padding-right: 10px;
}
.popup_inner .agree_list .list_head{
  font-weight: bold;
}
.popup_inner .agree_list .list_head:not(:first-of-type){
  margin-top: 25px;
}
.popup_inner .agree_list .list_body{
  margin-top: 5px;
  font-size: 14px;
}
.popup_inner .agree_list p + .list_indent{
  margin-top: 10px;
}
.popup_inner .agree_list .list_indent .indent_item{
  margin-left: 1.6em;
  text-indent: -1.6em;
}
.popup_inner .agree_list .list_indent-brackets .indent_item{
  margin-left: 2.65em;
  text-indent: -2.65em;
}
.popup_inner .agree_list .list_indent .indent_item:not(:first-of-type){
  margin-top: 10px;
}
.popup_inner .agree_list .list_brackets .brackets_item{
  margin-top: 20px;
}
.popup_inner .agree_last{
  margin-top: 5px;
  text-align: right;
}

.popup_close{
  min-height: 40px;
  margin: 10px 10px 0 0;
  text-align: center;
}
.btnClosePopup{
  display: inline-block;
  width: 80px;
  height: 40px;
  border-radius: 5px;
  background: #67bfe6;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  line-height: 40px;
}

#popup_general_alert,
#popup_general_confirm{
  color: #555;
}

#popup_contents_code{
  color: #555;
}
#popup_contents_code .title{
  color: #d870ad;
  font-weight:bold;
}
#popup_contents_code .code_box{
  color: #333;
  font-size: 20px;
  border: 2px solid #b8b4b6;
  border-radius: 20px;
  font-weight: bold;
  text-align: center;
  padding: 3px;
  margin: 10px 0 20px 0;
  min-height:40px;
}

/* popup用 */
.popup_box{
  position: relative;
}
.popup_box .box_ttl{
  text-align: center;
}
.popup_box .box_error{
  margin-top: 5px;
  color: #b22222;
  font-weight: bold;
}
.popup_box .box_error + .box_error{
  margin-top: 0;
}
.popup_box .box_error.fs-sml{
  font-size: 12px;
}
.popup_box .box_error.indent-1{
  margin-left: 1em;
  text-indent: -1em;
}
.popup_box .box_txt{
  margin-top: 10px;
  font-size: 12px;
}
.popup_box .box_help{
  margin-top: 5px;
  font-size: 14px;
}
.popup_box .box_img{
  width: 80%;
  margin: 0 auto;
}
.popup_box .box_input{
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.popup_box .box_input span{
  width: 70px;
  margin-right: 10px;
  font-size: 14px;
}
.popup_box .box_input input{
  width: calc(100% - 80px);
  border-color: #8e8e8e;
  box-shadow: none;
}
.popup_box .box_input select{
  width: 220px;
}
.popup_box .box_input .input_txt{
  font-size: 12px;
}
.popup_box .box_input-ttl_100 span{
  width: 100px;
}
.popup_box .box_input-ttl_100 input{
  width: calc(100% - 110px);
}
.popup_box .box_input-ttl_50 span{
  width: 50px;
}
.popup_box .box_input-ttl_50 input{
  width: calc(100% - 60px);
}
.popup_box .box_form{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  border: 1px solid #b8b4b6;
  border-radius: 100vh;
  background: #e582bc;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  margin: 10px auto 0;
  padding: 5px;
}
.popup_box .box_form.disabled{
  border: 1px solid #b8b4b6;
  border-radius: 100vh;
  background: #d9d9d9;
  color: #fff;
}
.popup_box .popup_close{
  position: absolute;
  top: -10px;
  right: -10px;
  min-height: auto;
  margin: 0;
  text-align: right;
}
.popup_box .popup_close a{
  position: relative;
  width: 28px;
  height: 28px;
  background: transparent;
}
.popup_box .popup_close a::before,
.popup_box .popup_close a::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  width: 18px;
  height: 2px;
  background: #000;
}
.popup_box .popup_close a::before{
  transform: translate(-50%, -50%) rotate(45deg);
}
.popup_box .popup_close a::after{
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* フッター */
footer .copyright{
  padding: 15px;
  text-align: center;
  background: #e27cba;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
}
.page_top{
  position: absolute;
  bottom: 113px;
  width: 40px;
  height: 40px;
  right: 30px;
}

/* オーバーレイ */
#full-overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.spinner {
  width: 40px;
  height: 40px;
  border: 4px #ddd solid;
  border-top: 4px #e27cba solid;
  border-radius: 50%;
  animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
  100% { 
    transform: rotate(360deg); 
  }
}

/* 下層ページ共通 */
.secondary_area{
  padding: 15px 0;
  background: url(/assets/img/bg_pnk.png);
  background-size: 15px;
}
.secondary_inner_heading{
  margin-top: 30px;
  color: #000;
  text-align: center;
}
.secondary_inner + .secondary_inner_heading{
  margin-top: 50px;
}
.secondary_inner{
  margin: 15px 40px;
  color: #000;
}
.secondary_title{
  background: #e581be;
  color: #fff;
  font-size: 19px;
  text-align: center;
}
.thirdry_title{
  color: #bfbfbf;
  font-size: 16px;
  text-align: center;
  text-decoration: underline;
}
/* プリQとは */
.about .secondary_inner{
  margin-top: 50px;
}
.about_title-sub{
  font-size: 16px;
  text-align: center;
}
.about_title-sub:not(:first-of-type){
  margin-top: 50px;
}
.about_text{
  margin-top: 15px;
  padding: 5px 8px;
  border: 1px solid #bfbfbf;
  background: #fff;
  font-size: 12px;
}
.about_table{
  width: 100%;
  margin-top: 15px;
}
.about_table td{
  padding: 5px 8px;
  border: 1px solid #bfbfbf;
  background: #fff;
  font-size: 10px;
}
.about_link{
  margin-top: 10px;
  text-align: center;
}
.about_link a{
  color: #000;
  font-size: 10px;
  text-decoration: underline;
}

/* ヘルプ */
.faq_list .list_item{
  background: #fff;
  border: 1px solid #bfbfbf;
}
.faq_list .list_item:not(:first-of-type){
  margin-top: 25px;
}
.faq_heading{
  position: relative;
  padding: 10px;
  font-size: 10px;
}
.faq_heading span::before{
  content: "Q.";
  display: inline-block;
  font-size: 14px;
  margin-right: 5px;
}
.faq_heading::before,
.faq_heading::after{
  content: "";
  position: absolute;
  display: inline-block;
  background: #000;
}
.faq_heading::before{
  top: calc(50% - 1px);
  right: 10px;
  width: 12px;
  height: 2px;
}
.faq_heading::after{
  top: calc(50% - 6px);
  right: 15px;
  width: 2px;
  height: 12px;
}
.faq_heading.is-active::after{
  display: none;
}

.faq_body{
  display: none;
  padding: 0 10px 10px 30px;
  background: #fff;
}
.faq_body .body_inner{
  position: relative;
  padding: 0 0 0 20px;
  font-size: 10px;
}
.faq_body .body_inner::before{
  content: "A.";
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
}

.about.howto .secondary_inner{
  margin-top: 30px;
}
.howto_list .list_item{
  display: block;
  padding: 10px;
  border: 1px solid #bfbfbf;
  background: #fff;
}
.howto_list .list_item:not(:first-of-type){
  margin-top: 15px;
}
.howto_list .howto_heading{
  margin-left: 1.5em;
  font-size: 14px;
  text-indent: -1.5em;
}
.howto_list .howto_heading span{
  margin-right: 5px;
  font-size: 18px;
}
.howto_list .howto_notice{
  font-size: 13px;
  color: #333;
  padding: 0 10px;
}
.howto_list .howto_img{
  width: 50%;
  margin: 10px auto;
  text-align: center;
}
.howto_list .howto_img-l{
  width: auto;
}

.body_list dt{
  margin-top: 15px;
  font-weight: bold;
}
.body_list dd + dt{
  padding-top: 10px;
  border-top: 1px dashed #808080;
}
.body_list dd{
  margin-top: 5px;
}
.body_list .list_img{
  margin-top: 5px;
}
.body_list .list_img + .list_img::before{
  content: "";
  display: block;
  width: 0;
  margin: 15px auto;
  border-top: 15px solid #000;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}


/** ========================================================
 * アプリの場合(bodyにis_appを追加)
 * @ .is_app
 * ====================================================== */
.is_app header{
  padding: 0;
  border-bottom: none;
  background: transparent;
}
.is_app .menu-btn:not(.is-open) span{
  background-color: #838383;
}

/** ========================================================
 * 2022/04/07
 * Youtube埋め込み動画のために追加
 * ====================================================== */
 .youtube{
  position:relative;
  width: 100%;
  height:0;
  padding-top:75%;
 }
 .youtube iframe{
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
 }

/** ========================================================
 * QRコード判定用ページ
 * ====================================================== */
.judgement-result{
  padding: 20px 15px;
  text-align: center;
  background: #fff;
  border-radius: 10px;
  color: #e581be;
  font-weight: bold;
  font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif !important;
  word-break: break-all;
}
.judgement-result h2{
  font-size: 20px;
  font-weight: bold;
}
.judgement-result .format{
  margin: 20px 0;
  font-size: 24px;
  color: #333;
}
.judgement-result .result{
  margin: 20px 0;
  font-size: 16px;
}
.judgement-result .result .code-value{
  font-size: 24px;
  color: #666;
  font-weight: bold;
  vertical-align: middle;
}
.judgement-result .result #copy-clipboard img{
  width: 22px;
  vertical-align: middle;
  margin-left: 10px;
  opacity: 0.6;
}
.judgement-result .link-area{
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.judgement-result .link-area a{
  display: inline-block;
    width: 240px;
    padding: 15px 0;
    border-radius: 5px;
    background: #67bfe6;
    color: #fff;
    font-size: 18px;
    margin-bottom: 20px;
}
.judgement-result .link-area a:last-child{
  margin-bottom: 0;
}
.judgement-result .warning{
  color: #b22222;
  font-size: 14px;
  margin-top: 40px;
}

/** ========================================================
 * LINEで紹介
 * ====================================================== */
.line-introduce{
  font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif !important;
}
.line-introduce .app-download{
  background: #fff;
  padding: 30px 10px 30px 10px;
  text-align: center;
}
.line-introduce .app-download h1{
  color: #e581be;
  font-size: min(6vw, 30px);
  font-weight: bold;
  text-align: center;
  padding: 0;
}

.line-introduce .link-icon {
  margin-top: min(5vw, 20px);
  line-height: min(25vw, 150px);
}

.line-introduce .link-icon img {
  width: 70vw;
  max-width: 400px;
}
.line-introduce .share-area{
  padding: 20px;
  text-align: center;
}
.line-introduce .share-area h2 img{
  width: 80%;
  max-width: 450px;
}
.line-introduce .share-area .icons{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.line-introduce .share-area .icons a{
  width: 15%;
  margin: 0 20px;
}
footer .top_link{
  background: #fff;
  text-align: center;
  padding: 30px;
  width: 100%;
}
footer .top_link a{
  text-decoration: underline;
  font-size: 18px;
}

/** ========================================================
 * 2024/08/23 Update Howto 　～の場合
 * ====================================================== */
 .thirdry_title {
  margin-top: 1.5rem;
}

.thirdry_title a {
  color: #337ab7;
  text-decoration: none;
  background: #FFF;
  padding: 1rem;
  border-radius: 100vh;
  border: 1px solid #337ab7;
  display: inline-block;
  width: 80%;
}

.thirdry_title a:not(:first-of-type):not(:last-of-type) {
  margin: .5rem 0;
}

.howto3 .img_border img{
  border: 1px solid #ccc;
}

.sticker_create .quantity_select.paper_type li{
  text-align: center;
}