@charset "UTF-8";
/* CSS Document */

/* ========================= [ base ] */

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
margin: 0 auto;
padding: 0;
overflow-x: hidden;

}

ul,
ol,
dl {
list-style: none;
}

img {
vertical-align: bottom;
}

body {
text-align: center;
font-family: 'Zen Kurenaido', sans-serif;
-webkit-text-size-adjust:100%;
background:#ffffff;
font-weight: bold;
}

a {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:visited {
color: #909;
text-decoration: none;
}

a:link,
.d-txtlink {
color: #005fc0;
text-decoration: none;
cursor: pointer;
}



button{
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}


@media (min-width: 600px) {


.invisible-pc {
display: none;
}




#input_box{
margin:0px auto 0px auto;
width:640px;
background-image: url("../assets/praise_bg.webp");
background-repeat: no-repeat;
background-position: center;
background-size:cover;
background-color: #fff9e4;	
position:relative;
}


#input_box h2{
margin:0px auto 0px auto;
color: #FFFFFF;
text-align: center;
padding:24px 0px 20px 0px;
background-image: url("../assets/pattern.webp");
background-repeat: repeat;
background-color: #22a2b9;
}


	

#input_box .input-area {
  margin:0px auto 0px auto;
  width:640px;
  height:auto;
 
}


#input_box .input-area .chara_box{
margin:0px auto -40px auto;
width:620px;
height:466px;
position:relative;

}

#input_box .input-area .praise_box{
margin:-55px auto 0px auto;
width:620px;
height:auto;
}


#input_box .input-area .praise_box .capt02{
margin:0px 0px 0px 0px;
position:relative;

}


#input_box .input-area .praise_box .text_box{
margin:15px 0px 0px 0px;
}

textarea {

  padding: 8px;      /* 内側余白を適宜設定すると見やすい */
  width:510px;       /* お好みで */
  height: 120px;     /* お好みの高さに */
  line-height: 1.4;  /* この値を調整すると上下の見た目が変わります */
  resize: vertical;  /* ユーザーが高さを変更できるようにするなら */
  font-size:18px;
  border:2px solid #8b7564;
}

/* placeholder のスタイルは疑似要素でカスタマイズ */
textarea::placeholder {
  line-height: 1.4;     /* 本文と同じ行間に揃える */
  vertical-align: top;  /* 一部ブラウザに効く場合あり */
  color: #aaa;          /* プレースホルダの色を薄めたい場合 */
  
}

#input_box .input-area .praise_box .btn01{
margin:20px 0px 10px 0px;
animation: puni 1.5s ease-in-out infinite;
}

@keyframes puni {
  0%, 100% { transform: scale(1); }
  10% { transform: scale(1); }
  30% { transform: scale(0.95); }
  50% { transform: scale(1); }
  70% { transform: scale(0.98); }
  90% { transform: scale(1); }
}

#input_box .banner{
margin:20px 0px 50px 0px;
}


/* モーダルのオーバーレイ (ふわっと表示) */
.overlay {
  display: flex; /* 常にflex, 透明度でON/OFF */
  justify-content: center;
  align-items: flex-start;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  overflow-y: auto;
  padding-top: 20px; 
  padding-bottom: 120px;
  -webkit-overflow-scrolling: touch;
}
.overlay.active {
  opacity: 1;
  pointer-events: auto;
}

#popupWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.popup-content {
  margin:60px auto 0px auto;
  width: 100%;
  max-width: 750px;
  height: auto;
  aspect-ratio: 1 / 1;
  background: #ffffff;
  position: relative;
  text-align: center;
  transform: translateY(20px);
  transition: transform 0.5s ease;
  overflow: hidden;
}


.overlay.active .popup-content {
  transform: translateY(0);
}

.hanamaru{
  top:130px;
  right:100px;
  position: absolute;
  animation: yurayura 1s infinite ease-in-out alternate;
  transform-origin: center bottom;
}

@keyframes yurayura {
  0% { transform: rotate(-3deg); }
  100% { transform: rotate(3deg); }
}

/* キャラクター画像 */
.character-img {
  max-width: 100%;
  width:100%;;
  height: auto;
  display: block;
  margin: 0 auto;
  position: absolute;
}


.date-text {
  left: 22px;
  bottom:10px;
  font-size: 18px;
  color: #333;
  margin-bottom: 120px;
  position: absolute;
   font-family: 'Zen Kurenaido';
}


.praise-text {
  font-size: 1.15rem;
  padding:5px 5px 0px 5px;
  bottom:10px;
  left:13px;
  width:93.5%;
  height:85px;
  background:rgba(255,249,228,0.9);
  position: absolute;
  border:2px solid #8b7564;
  color:#6d5543;
  font-family: 'Zen Kurenaido';
}

.voice-btn{
  position: absolute;
  top:105px;
  left:40px;
}
	

#saveImageButton{
position: absolute;
top: 40px;
left: 40px;

}
	
#shareButton {
  position: absolute;
  bottom: 25%; 
  right: 6.5%; 
}

.buttons {
  margin-top: 20px;
}

#closeButton .close-btn {
  top: 5px;
  right: 5px;
  position: absolute;
  
}

.banner_btn{
  margin:30px auto 20px auto;
  width: 70%;
  
  height: auto;
}

.btncp {
  padding-bottom: 30px;
}

.btncp:hover {
  transform: scale(1.08);
  transition: 0.5s;
}


	
}

  /* PC版（画面幅が768px以上のとき） */
  @media screen and (min-width: 600px) {
    .popup-content {
      width: 600px;
      height: 600px;
      aspect-ratio: auto; /* 無効化 */
    }
  }

  /* 日付（#todayDate）専用の強制配置設定 */
  #todayDate {
    position: absolute; 
    z-index: 100; 
    
    top: 468px; 
    
    /* 左右中央寄せ */
    left: -470px;
    right: 0;
    margin: auto;
    text-align: center;
    width: 100%;
  
    /* 見た目の調整 */
    font-weight: bold;
    font-size: 1.2rem;  /* 文字の大きさ */
    color: #5f473a;     /* 茶色っぽい文字色 */
    background: transparent; /* 背景は透明 */
  }