@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap");

/** ========================================================
 * ページ全体の定義
 * @ PAGE
 * ====================================================== */

*{
  box-sizing:border-box;
}
html {font-size: 100%;}

body {
  -webkit-text-size-adjust: 100%;
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  font-family:  "Noto Sans JP", 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','MS P Gothic','Osaka';
  font-size: 16px;
  font-weight: 500;
  line-height: 1.375;
}
[v-cloak]{display:none;}
img{
  max-width: 100%;
  vertical-align: bottom;
}

.conts_inner{
  max-width: 750px;
  margin: 0 auto;
}
/* 下層inner */
.lower .conts_inner {
  padding: clamp(20px, 5.3vw, 40px) clamp(10px, 2.7vw, 20px) 0;
}

header{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: auto;
  max-width: 750px;
  padding: 15px;
  background: #fff;
  zoom: 1;
  z-index: 20;
  height: 70px;
  margin: 0 auto;
}
.header_logo{
  height: 45px;
  margin: 0 auto;
  text-align: center;
}
.header_logo img{
  height: 100%;
}
/*スライドメニュー*/
.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: #e3007f;
  position: absolute;
  transition: all .4s;
}
.menu-btn em{
  color: #e3007f;
  font-size: 12px;
  position: absolute;
  bottom: -15px;
}
.menu-btn span:nth-child(1) {
  top: 6px;
}
.menu-btn span:nth-child(3) {
  bottom: 6px;
}

header #preview-header{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  padding: 0.5rem;
  background: #20a8d8;
  color: #fff;
  text-align: center;
  opacity: 0.8;
  font-size: 1rem;
}
#preview-header .date{
  margin-left: 20px;
}

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

.slide_menu_wrap{
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
}

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

.slide_menu_wrap.is-active .slide_menu{
  right: 0;
}
.slide_menu .menu-title a{
  background: #fff;
  padding: 15px 20px;
  border-radius: 20px;
  display: block;
  text-align: center;
}
.slide_menu .menu-title img{
  width: 80%;
  margin: 0 auto;
}
.slide_menu .menu-list{
  padding: 20px 20px 0 20px;
}
.slide_menu .menu-list .list_item:not(:first-of-type){
  margin-top: 10px;
}
.slide_menu .menu-list .list_item{
  position: relative;
}
.slide_menu .menu-list .list_item a{
  color: #fff;
  font-size: 18px;
  line-height: 1.5;
  font-weight: bold;
  display: block;
}
.slide_menu .menu-list .list_item::after{
  content: "▶";
  color: #fff;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}



/* 下層header */
.lower header{
  border-bottom: 4px solid #e3007f;
}
.lower .header_logo{
  /*width: 36.8vw;*/
  max-width: 276px;
}

footer{
  padding: clamp(20px, 5.2vw, 39px) clamp(10px, 2.7vw, 20px) clamp(24px, 6.4vw, 48px);
}
.footer_inner{
  font-weight: 500;
  text-align: center;
  font-size: clamp(10.5px, 2.5vw, 20px);
}
.footer_inner p{
  overflow-wrap: break-word;
  word-wrap: break-word; 
}


/* 共通系 */
/* 見出し */
.conts_heading{
  margin: 0 0 clamp(14px, 3.7vw, 28px);
  text-align: center;
  font-size: clamp(21px, 5.6vw, 42px);
  font-weight: 900;
}

.underline_heading{
  position: relative;
  margin: 0 0 18px;
  padding: 0 0 12px;
  font-size: clamp(18px, 4.8vw, 36px);
  font-weight: 700;
}
.underline_heading::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: clamp(3px, .8vw, 6px);
  border-radius: 100vh;
  background: #e3007f;
}


/* テキスト */
.conts_txt{
  font-size: clamp(14px, 3.8vw, 30px);
  font-weight: 500;
  line-height: 1.32;
  text-align: center;
}
.conts_txt + .conts_txt{
  margin-top: 20px;
}
.conts_txt span{
  color: #ff0000;
  font-weight: 700;
}


/* 次ステップ */
.next_txt{
  position: relative;
  margin: 0 0 20px;
  padding: 0 0 clamp(25px, 6.7vw, 50px);
  font-weight: 900;
  font-size: clamp(21px, 5.6vw, 42px);
  line-height: 1.2;
  text-align: center;
}
.next_txt::before{
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  border-top: clamp(23px, 6.1vw, 46px) solid #ff0000;
  border-right: clamp(43px, 11.5vw, 86px) solid transparent;
  border-left: clamp(43px, 11.5vw, 86px) solid transparent;
}

.next_txt .primary_btn{
  margin-bottom: 22px;
}

/* ボタン */
.btn_block .primary_btn + .primary_btn{
  margin-top: clamp(24px, 6.4vw, 48px);
}
.primary_btn{
  display: block;
  width: 100%;
  margin: 0 auto clamp(2px, .5vw, 4px);
  padding: 5px 10px 9px;
  border: clamp(2px, .5vw, 4px) solid #000;
  border-radius: 100vh;
  background: #e3007f;
  color: #fff;
  font-size: clamp(15px, 4vw, 30px);
  font-weight: 900;
  text-align: center;
  line-height: 1;
  box-shadow: 2px clamp(2.5px, .7vw, 5px) 0 #000;
  cursor: pointer;
}
.primary_btn--wt{
  background: #fff;
  color: #000;
}
.primary_btn--m,
.primary_btn--l{
  box-shadow: 2px clamp(3.5px, .9vw, 7px) 0 #000;
  margin: 0 auto;
  padding: 9px 10px 13px;
  font-size: clamp(20px, 5.3vw, 40px);
}
.primary_btn--l{
  max-width: clamp(292.5px, 78vw, 585px);
}
.primary_btn--m{
  max-width: clamp(212.5px, 56.7vw, 425px);
}
.primary_btn--s{
  max-width: clamp(159px, 42.4vw, 318px);
  font-size: clamp(15px, 4vw, 30px);
}

/* 背景 */
.bg--pk,
.bg--lpk{
  border-radius: 25px;
}
.bg--pk{
  background: #e3007f!important;
}
.bg--lpk{
  background: #fad6ea!important;
}
.bg--wt{
  background: #fff!important;
}

/* 線 */
hr{
  margin: clamp(17px, 4.4vw, 33px) 0 clamp(13px, 3.3vw, 25px);
  border: clamp(1.5px, .4vw, 3px) solid #000;
  border-radius: 100vh;
}

.intro{
  margin: 0 0 30px;
}
.intro_txt{
  padding: clamp(12.5px, 3.1vw, 23px) clamp(10px, 2.7vw, 20px) clamp(13.5px, 3.6vw, 27px);
  background: #e3007f;
  color: #fff;
  line-height: 1.2;
  font-size: clamp(21px, 5.6vw, 42px);
  font-weight: 700;
  text-align: center;
}
.intro_img{
  position: relative;
  z-index: 10;
  width: clamp(317.5px, 84.7vw, 635px);
  margin: -14px auto 0;
  text-align: center;
}
.intro_point{
  width: 101%;
  margin-left: -10px;
  padding: clamp(6.5px, 1.7vw, 13px);
  background: #e60012;
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
  transform: rotate(-6.5deg);
  color: #fff;
  font-size: clamp(21px, 5.6vw, 42px);
  font-weight: 700;
  text-align: center;
}

/* シリーズ一覧 */
.series_list{
  padding: 0 clamp(10px, 2.7vw, 20px);
}
.series_item{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.series_item:nth-child(n + 2){
  margin-top: 16px;
}
.series_img{
  width: clamp(245px, 65.3vw, 490px);
}
.series_select{
  width: calc(100% - clamp(255px, 68vw, 510px));
  margin: 0 0 14px;
  text-align: center;
}
.series_select-txt{
  margin: 0 0 6px;
  font-size: clamp(12px, 3.2vw, 24px);
  font-weight: 900;
}



/* キャラクター選択 */
.character_item:nth-child(n + 2){
  margin-top: 18px;
}
.character_img{
  text-align: center;
}



/* 入力エリア */
.input_wrap{
  margin-top: clamp(-25px, -6.7vw, -50px);
  padding: clamp(42px, 11.2vw, 84px) 0 20px;
  border-radius: 0 0 25px 25px;
}
.input_block{
  padding: 0 clamp(15px, 4vw, 30px);
}
.input_text{
  display: flex;
  align-items: center;
}
.input_text + .input_text{
  margin-top: clamp(10px, 2.7vw, 20px);
}
.input_ttl{
  width: 24%;
  font-size: clamp(18px, 4.8vw, 36px);
  font-weight: 700;
}
.input_block input{
  width: 76%;
  min-height: clamp(34px, 7.7vw, 58px);
  padding: 0 10px;
  border: clamp(2px, .5vw, 4px) solid #000;
  border-radius: 12px;
  box-shadow: none;
  font-size: clamp(16px, 4vw, 30px);
  font-weight: 500;
}

.input_block .note_list{
  width: 76%;
  margin: clamp(8px, 2.1vw, 16px) 0 0 auto;
}
.input_block .note_item{
  font-size: clamp(11px, 2.9vw, 22px);
  font-weight: 700;
  line-height: 1.3;
}

.result_block{
  margin: 0 clamp(10px, 2.7vw, 20px);
  padding: 30px 0 36px;
  border-radius: 25px;
  background: #fff;
  text-align: center;
}
.result_img{
  margin: 0 0 6px;
  padding: 0 40px;
}
.result_block .atten_item{
  margin-bottom: clamp(16px, 4.3vw, 32px);
  font-size: clamp(11px, 2.9vw, 22px);
  font-weight: 700;
}
.result_block .atten_item:last-of-type{
  margin-bottom: 0;
}

.input_font{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 clamp(10px, 2.7vw, 20px);
}
.input_font .input_ttl{
  font-weight: 900;
}
.input_sample-link{
  position: relative;
  display: inline-block;
  padding-right: clamp(18px, 4.8vw, 36px);
  color: #000;
  font-size: clamp(13px, 3.5vw, 26px);
}
.input_sample-link::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: inline-block;
  width: clamp(15.5px, 4.1vw, 31px);
  height: clamp(15.5px, 4.1vw, 31px);
  background: url(/assets/img/icon_blank.png) no-repeat center / contain;
}

select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  min-height: clamp(34px, 7.7vw, 58px);
  padding: 0 clamp(38px, 10.1vw, 76px) 0 15px;
  border: clamp(2px, .5vw, 4px) solid #000;
  border-radius: 12px;
  background: #fff!important;
  cursor: pointer;
  color: #000!important;
  font-size: clamp(16px, 4vw, 30px);
  font-weight: 900;
}
select:focus{
  outline: none;
}
.selectbox{
  position: relative;
  width: 100%;
  margin: 0 0 clamp(10px, 2.7vw, 20px);
}
.selectbox::after{
  content: '';
  position: absolute;
  top: 50%;
  right: clamp(8px, 2.1vw, 16px);
  border-top: clamp(11px, 2.9vw, 22px) solid #e3007f;
  border-left: clamp(13px, 3.5vw, 26px) solid transparent;
  border-right: clamp(13px, 3.5vw, 26px) solid transparent;
  transform: translateY(-50%);
  pointer-events: none;
}

.selectbox + .next_txt{
  margin-top: 40px;
}

.agreement_box a{
  color: #000;
  text-decoration: underline;
}
.checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0 0 clamp(18px, 4.8vw, 36px);
  font-size: clamp(13px, 3.5vw, 26px);
  cursor: pointer;
}
/* 本物のチェックボックスは隠す */
.checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
/* カスタム枠 */
.checkbox_custom {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 12px;
  border: clamp(2px, .5vw, 4px) solid #000;
  border-radius: 6px;
  box-sizing: border-box;
}
/* チェックマーク */
.checkbox input[type="checkbox"]:checked + .checkbox_custom{
  background: #0d6efd;
}
.checkbox input[type="checkbox"]:checked + .checkbox_custom::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 2px)) rotate(45deg);
  width: 6px;
  height: 10px;
  border-right: 4px solid #fff;
  border-bottom: 4px solid #fff;
}

.result_block .primary_btn{
  margin-bottom: clamp(21px, 5.6vw, 42px);
}


.indent_item{
  margin-left: 1em;
  text-indent: -1em;
}
.atten_item::before{
  content: "※";
}

/* 入力エリア - エラー */
.error_txt{
  margin: 0 0 clamp(21px, 5.6vw, 42px);
  font-size: clamp(16px, 4vw, 30px);
  text-align: center;
}



/* 諸注意 */
.conts_txt + .btn_block{
  margin-top: clamp(19px, 5.1vw, 38px);
}
#btn-send-contents{
  margin-top: clamp(19px, 8vw, 38px);
  margin-bottom: clamp(19px, 8vw, 38px);
}


/* プリント内容 */
.show_img{
  margin: 0 0 clamp(27px, 7.2vw, 54px);
  padding: clamp(12px, 3.2vw, 24px) clamp(16px, 4.3vw, 32px);
  text-align: center;
}

.show_info{
  margin: 0 0 clamp(25px, 6.7vw, 50px);
  padding: clamp(20px, 5.3vw, 40px) 0 clamp(24px, 6.4vw, 48px);
  text-align: center;
}
.show_qr{
  margin: 0 clamp(20px, 5.3vw, 40px) clamp(20px, 5.3vw, 40px);
  padding: clamp(19px, 5.1vw, 38px);
  border-radius: 25px;
  background: #fff;
  text-align: center;
}
.show_num{
  margin: 0 clamp(16px, 4vw, 30px) clamp(21px, 5.6vw, 42px);
  padding: clamp(6px, 1.6vw, 12px) 10px clamp(11px, 2.9vw, 22px);
  border-radius: 100vh;
  background: #fff;
  font-size: clamp(30px, 8vw, 60px);
  line-height: 1;
}
.show_txt{
  color: #fff;
  font-size: clamp(16px, 4vw, 30px);
  font-weight: 700;
}

.show_detail{
  padding: 20px;
}
.show_detail-inner{
  padding: clamp(22px, 5.9vw, 44px) clamp(16px, 4vw, 30px) clamp(28px, 7.5vw, 56px);
  border-radius: 25px;
}
.show_detail-txt{
  margin: 0 0 clamp(19px, 5.1vw, 38px);
  color: #e3007f;
  font-size: clamp(18px, 4.8vw, 36px);
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.border_list{
  margin: 0 0 clamp(25px, 6.7vw, 50px);
}
.border_item{
  margin: 0 0 18px;
  padding: 0 0 18px;
  border-bottom: 3px solid #b7b7b7;
  font-size: clamp(16px, 4vw, 30px);
  font-weight: 500;
}


/* ポップアップ */
#cboxOverlay{
  background: #000;
  opacity: .6!important;
}
#cboxContent{
  /* margin: 0;
  padding: clamp(20px, 5.3vw, 40px) clamp(16px, 4vw, 30px);
  background: #fff;
  border-radius: 25px; */
  margin: 0;
  padding: 0;
  background: transparent;
}
#cboxClose{
  display: none;
}
#cboxLoadingOverlay,
#cboxLoadedContent{
  background: transparent;
}
#cboxLoadedContent{
  max-height: calc(100vh - 120px);
  overflow: visible!important;
}
.popup_box{
  width: calc(100vw - 60px);
  max-width: 710px;
  max-height: calc(100vh - 120px);
  padding: clamp(20px, 5.3vw, 40px) clamp(16px, 4vw, 30px);
  border-radius: 25px;
  background: #fff;
}
.popup_inner{
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.popup_inner .conts_heading{
  margin: 0 0 clamp(25px, 6.7vw, 50px);
  font-size: clamp(18px, 4.8vw, 36px);
}

.popup_close{
  min-height: 40px;
  margin: 40px 0 0;
  text-align: center;
}

.terms_box {
  font-size: clamp(11px, 2.9vw, 22px);
}
.terms_box *{
  font-weight: 500;
}

.terms_box ol{
  list-style: decimal;
  padding-left: 1.0em;
  margin: 0 0 1em 0;
}

.terms_box ol li{
  list-style: decimal outside;
  margin-left: 0.5em;
  padding-left: 0.5em;
}

.terms_box h3{
  margin: 1rem 0;
}

/* エラー系ポップアップ */
.error_popup{
  background: #ff0000;
}
.error_popup .conts_heading{
  margin: 0 0 32px;
}
.error_popup .error_txt{
  font-weight: 700;
}

/* フォントポップアップ */
.font_popup .popup_box{
  padding: 20px;
}

.font_list{
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 28px;
}
.font_list:last-of-type{
  margin-bottom: 0;
}
.font_item{
  width: calc((100% - 18px) / 3);
  padding: 12px 10px;
  border-radius: 15px;
  background: #fff;
  text-align: center;
}
.font_list.landscape .font_item{
  width: calc(100% - 18px);
}
.font_type{
  margin: 8px 0 0;
  color: #000;
  font-size: clamp(13px, 3.5vw, 26px);
  font-weight: 700;
}
.font_list.landscape .font_type{
  text-align: left;
  padding-left: 10px
};


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

/* イベント選択 */
.event_top header{
  border-bottom: none;
}
.event_top .conts_inner{
  overflow: hidden;
}
/* カルーセル */
.event_top .carousel{
  margin: 0 auto;
  max-width: 750px;
  padding: 0 0 10px;
  background: #000;
  overflow: hidden;
}
.event_top .carousel .carousel_item{
  padding: 30px 16px;
}
.event_top .carousel .carousel_item img{
  display: block;
  width: 100%;
  border: 3px solid #e3007f;
  background: #fff;
}
.event_top .carousel .slick-slide{
  opacity: .55;
  transition: opacity .3s;
}
.event_top .carousel .slick-center{
  opacity: 1;
}
.event_top .carousel .slick-dots{
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 10px !important;
  text-align: center;
  padding: 0;
  margin: 0;
}
.event_top .carousel .slick-dots li,
.event_top .carousel .slick-dots li button{
  width: 16px;
  height: 16px;
}
.event_top .carousel .slick-dots li{
  display: inline-block;
  list-style: none;
  margin: 0 4px;
}
.event_top .carousel .slick-dots li button:before{
  content: '●';
  font-size: 26px;
  line-height: 16px;
  color: #c2c2c2 !important;
  opacity: 1 !important;
}
.event_top .carousel .slick-dots li.slick-active button:before{
  color: #e3007f !important;
}
/*お知らせ*/
.event_top .news{
  margin: 0 auto;
  max-width: 750px;
  padding: clamp(20px, 5.3vw, 40px) clamp(10px, 2.7vw, 20px) clamp(24px, 6.4vw, 48px);
  background: #e3007f;
}
.event_top .news_title{
  margin: 0 0 clamp(14px, 3.7vw, 28px);
  color: #fff;
  font-size: clamp(24px, 5.5vw, 42px);
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}
.event_top .news_list{
  margin: 0;
  padding: clamp(18px, 4.8vw, 36px) clamp(20px, 5.3vw, 40px);
  border-radius: 35px;
  background: #eee;
  list-style: none;
}
.event_top .news_item{
  padding: clamp(12px, 3.2vw, 24px) 0 clamp(14px, 3.7vw, 28px);
  border-bottom: 1px solid #000;
}
.event_top .news_date{
  display: block;
  margin: 0 0 clamp(6px, 1.6vw, 12px);
  color: #000;
  font-size: clamp(14px, 3.8vw, 20px);
  font-weight: 700;
  line-height: 1;
}
.event_top .news_text{
  display: block;
  color: #000;
  font-size: clamp(16px, 4.3vw, 24px);
  font-weight: 900;
  line-height: 1.3;
}
.event_top .news_text a{
  color: #000;
  text-decoration: none;
}

/* イベントリスト */
.event_top .event_list{
  margin: 0 auto;
  max-width: 750px;
  padding: clamp(20px, 5.3vw, 40px) clamp(10px, 2.7vw, 20px) clamp(24px, 6.4vw, 48px);
  background: #eee;
}
.event_top .event_list_title{
  margin: 0 0 clamp(16px, 4.3vw, 32px);
  color: #000;
  font-size: clamp(24px, 5.5vw, 42px);
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}
.event_top .event_list_items{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 5.3vw, 40px) clamp(10px, 2.7vw, 20px);
  margin: 0;
  list-style: none;
}
.event_top .event_list_items li{
  width: calc((100% - clamp(12px, 3.2vw, 24px)) / 2);
  color: #000;
  font-size: clamp(14px, 3.7vw, 20px);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  list-style: none;
}
.event_top .event_list_items li a{
  display: block;
  margin: 0 0 clamp(8px, 2.1vw, 14px);
  padding: clamp(4px, 1.1vw, 8px);
  aspect-ratio: 16 / 10;
  border: 2px solid #e3007f;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f7f7;
}
.event_top .event_list_items li img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
/*お知らせ詳細*/

.conts_inner .info_wrap{
  margin: 0 auto;
  max-width: 750px;
  padding: clamp(20px, 5.3vw, 40px) clamp(10px, 2.7vw, 20px) 0;
}
.conts_inner .info_detail{
  padding: clamp(18px, 4.8vw, 36px) clamp(20px, 5.3vw, 40px);
}
.info_detail .date{
  color :#e3007f;
  font-size: clamp(16px, 4.3vw, 24px);
}
.info_detail .title{
  margin-top: 5px;
  font-size: clamp(16px, 4.3vw, 24px);
  font-weight: 900;
}
.info_detail .body{
  margin-top: 40px;
  font-size: clamp(14px, 3.8vw, 20px);
  line-height: 1.5;
}
.info_detail .btn_wrap{
  text-align: center;
  margin: 100px 0 0;
}

/*使い方ページ*/
.lower .conts_inner.howto{
  background: #fff;
  padding-bottom: clamp(24px, 6.4vw, 48px);
}
.howto .conts_heading{
  margin: 0 0 clamp(18px, 4.8vw, 36px);
  padding: clamp(6px, 1.6vw, 12px) 10px;
  border-radius: 12px;
  background: #e3007f;
  color: #fff;
  font-size: clamp(22px, 5.9vw, 44px);
  line-height: 1.2;
}
.howto_steps{
  counter-reset: howto-step;
  margin: 0;
  padding: 0;
  list-style: none;
}
.howto_step + .howto_step{
  margin-top: clamp(20px, 5.3vw, 40px);
}
.howto_step_title{
  position: relative;
  margin: 0;
  padding-left: 34px;
  color: #000;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.3;
}
.howto_step_title span{
  color: #e3007f;
}
.howto_step_title::before{
  counter-increment: howto-step;
  content: counter(howto-step);
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e3007f;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}
@media screen and (min-width: 560px){
  .howto_step_title{
    padding-left: 46px;
    font-size: 30px;
  }
  .howto_step_title::before{
    top: 1px;
    width: 34px;
    height: 34px;
    font-size: 17px;
  }
}
.howto_step_note{
  margin: clamp(4px, 1.1vw, 8px) 0 0;
  padding-left: 30px;
  color: #000;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-indent: 0;
}
@media screen and (min-width: 560px){
  .howto_step_note{
    padding-left: 44px;
    font-size: 20px;
  }
}
.howto_step_img{
  margin-top: clamp(10px, 2.7vw, 20px);
  border-radius: 18px;
  overflow: hidden;
}
.howto_step_img img{
  display: block;
  width: 100%;
}