@charset "utf-8";
/* ***************************************************
スター☆トゥインクルプリキュア
------------------------------------------------------
ファンレター用CSS
------------------------------------------------------
・640pxまでをスマホとする
・641pxからタブレット／PCととする
・1000pxはPC専用とする
*************************************************** */
/* =============================================
ファンレターを読む＆送る
============================================= */
.bbs-list .sub_title{
width: 71%;
max-width: 440px;
padding-right: 4%;
margin: 0 auto 2%;
}
.btn_send{
text-align:right;
}
.bbs-list .listbox li:before,
.bbs-list .listbox li:after{
content: "";
width: 100%;
height: 1.6vw;
background: url(../img/common/bbs/line_box.png) center no-repeat;
background-size: contain;
position: absolute;
left: 0;
}
.bbs-list .listbox li:before{
top: -0.8vw;
}
.bbs-list .listbox li:after{
bottom: -0.8vw;
}
.bbs-list .listbox dt {
padding: 10px 0 10px 2.8em;
background: url(../img/common/bbs/bg_strp.png) #fcecf3;
background-size: 20px;
}
.bbs-list .listbox dt:before {
content: "";
width: 2.3em;
height: 1.81em;
background: url(../img/common/bbs/ico_letter.png) no-repeat center center;
background-size: 100% auto;
display: block;
position: absolute;
top: 0.4em;
left: 0.3em;
}
@media screen and (min-width:641px){
.bbs-list .listbox li:before,
.bbs-list .listbox li:after{
height: 7px;
background: url(../img/common/bbs/line_box_pc.png) center no-repeat;
}
.bbs-list .listbox li:before{
top: -3.5px;
}
.bbs-list .listbox li:after{
bottom: -3.5px;
}
.bbs-list .listpage,
.bbs-form .formpage,
.bbs-thanks .formpage{
margin-top:0;
}
.bbs-list .title,
.bbs-form .title{
/* 待っててねページ以外に設定
margin-bottom:1%;
*/ }
.bbs-form .sub_title,
.bbs-thanks .sub_title{
width:100%;
margin-bottom:0;
}
.bbs-form .entry_form{
margin-top:0;
}
}
/* プリキュアからのメッセージ
--------------------------------------------- */
/*.note:after{
content: "";
display: block;
clear: both;
}*/
.note{
display: table;
margin: 0 0 0 3%;
text-align:left;
}
.note_txt{
display: table-cell;
font-size: 4vw;
line-height: 1.4;
vertical-align: middle;
}
.note_img{
width: 45%;
box-sizing: border-box;
display: table-cell;
text-align: right;
}
.note_img img{
width: 95%;
}
.note p a{
margin-top: 0.5em;
}
@media screen and (min-width:444px){
.note_txt{
font-size: 1.0rem;
}
.note_img{
width: 200px;
}
}
@media screen and (min-width:641px){
}
.txt_limit{
width: 10em;
margin: 0 auto;
background: #fff774;
margin: 0 auto;
padding: 2%;
display: block;
text-align: center;
color: #000;
font-size: 1rem;
font-weight: bold;
}
.txt_limit em{
font-size:1.375rem; /* 22pt */
font-style: normal;
color: #e5005e;
}
@media screen and (min-width:641px){
.txt_limit{
padding:1%;
}
}
@media screen and (min-width:800px){
.note{
margin: 0 auto;
}
}
/* エラーパネル
--------------------------------------------- */
.error_panel{
display:none;
z-index:9999;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
text-align:center;
background:url("../img/common/bg_modal.png");
cursor: pointer;
}
.panel {
border:4px solid #fff;
background: url(../img/common/bbs/bg_stry.png) #fcf2c2;
background-size: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
width: 80%;
position:relative;
margin:25% auto;
display:none;
}
.panelInner {
text-align:left;
padding: 4%;
margin: 0 auto;
cursor: auto;
z-index: 5;
}
.error_panel .txt {
margin: 2% 0 2% 10%;
color: #e5005e;
text-align: left;
}
.error_panel .txt li {
margin-bottom: 10px;
list-style-type: disc;
}
.error_panel img{
width:80%;
margin:0 auto 4%;
}
.error_panel p{
margin: 0 auto;
text-align: center;
}
.error_panel p.btn_s{
margin-top:6%;
}
.error_panel p.btn_s a{
margin:0 auto;
padding:3% 14%;
}
@media screen and (min-width:641px){
.panel {
width: 500px;
margin:20% auto;
}
.error_panel p.btn_s a{
margin:0 auto;
padding:0.5em 14%;
font-size:1.125rem; /* 18pt */
}
}
/* 送信ボタン */
.submit_send {
border: none;
background: none;
cursor: pointer;
}
.form_btn{
text-align:center;
}
.form_btn span{
line-height: 2.5;
color: #e5005e;
}
/**/
.form_btn button{
display: inline-block;
border-radius: 100px;
background: url(../img/common/bg_light_l.png) center no-repeat #ef78c2;
background-size: 100% 2.6em;
box-shadow: 0 0 0 3px #fff, 0 2px 7px rgba(0,0,0,0.5);
padding: 0.75em 3em 0.75em 2.25em;
margin: 0 auto;
position: relative;
font-size: 4.0vw;
font-weight: bold;
color: #FFF;
line-height: 1;
text-align: center;
text-decoration: none;
}
.form_btn button:after{
display: block;
content: "";
width: 100%;
height: 100%;
background: url(../img/common/ico_arrow_wh.png) no-repeat right center;
background-size: 0.95em;
position: absolute;
top: 0;
right: 6%;
margin: auto 0;
}
.form_btn button:hover{
background: url(../img/common/bg_light_l.png) center no-repeat #e75ba2;
background-size: 100% 2.6em;
}
/**/
@media screen and (max-width:640px){
.form_btn{
border-top: 1px dotted #CCC;
padding-top: 3%;
margin-top: 3%;
}
.form_btn button{
box-shadow: 0 0 0 2px #fff, 0 2px 7px rgba(0,0,0,0.5);
}
}
@media screen and (min-width:500px){
.form_btn button{
font-size: 1.5rem;
}
}
@media screen and (min-width:641px){
.form_btn{
margin-top: 4%;
}
.submit_send{
width: 400px;
}
}
/* thanksページ
--------------------------------------------- */
@media screen and (min-width:641px){
.detailbox{
padding:0 3% 5%;
background-image: none;
background-repeat: no-repeat, no-repeat;
background-position: top center, bottom center;
background-size: 100% auto, 100% auto;
}
.detail_title.txt {
color:#e5005e;
font-size:1.375rem;
line-height:1.4;
font-weight:bold;
text-align:center;
margin: 5% 0 2%;
}
}
@media screen and (max-width:640px){
.detailbox{
padding:0 0 7%;
background-image: none;
background-repeat: no-repeat, no-repeat;
background-position: top center, bottom center;
background-size: 100% auto, 100% auto;
}
.detail_title.txt {
color:#e5005e;
font-size:1.125rem;
line-height:1.4;
font-weight:bold;
text-align:center;
margin: 7% 0 2%;
}
}
/*add_20210215*/
.end {
}
.end img {
width: 85%;
max-width: 400px;
}
@media screen and (max-width:640px) {
.btn_send.end {
text-align: center!important;
}
}