*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


img {max-width: 100%; }


body { font-family: "Noto Serif JP", serif;
        font-size:1.2vw;
    
}


body::before {
  background:url('./img/bb.jpg') no-repeat left center;
 
background-position:  center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size:cover;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  
  width: 100vw;
 height: 100vh;
 
  content: "";
  z-index: -1;
}


.frame_area{
        background: url(./img/02.jpg), url(./img/03.png);
        background-position:  center bottom, center center;
    background-repeat:  no-repeat, repeat-y;
        background-size:  100% auto, 100% auto;
        padding:0;
        margin:0 auto ;
        
}



.space {margin-bottom: 50px;}
.space2 {margin-bottom: 100px;}

.wrap {width:80%;  margin: 30px auto; text-align: center; color:#1e4552;

line-height: 1.5;
letter-spacing: 0.3em;
}

h2 {font-size:3vw;}
h2 span {font-size:2vw;}

h3 {font-size:2vw;}

.red {color:#fd2916;}
.bbb {width:250px; margin:0 auto; margin-bottom:20px; display: table;}
.left {display:table; margin:0 auto; text-align: left;}
.comment-form {font-size:1.5vw; font-weight:bold;}
.comment-form input, .comment-form textarea, .comment-form select  
{ width: 100%; padding: 10px; margin-bottom: 10px; 
box-sizing: border-box; text-align: center;
font-size:1.2vw; font-weight:bold;
color: #1e4552; 
}


.comment-form textarea {text-align: left; font-weight:normal;}

.comment-form button {font-size:2vw; padding: 20px 40px;
border-radius: 30px;
background-color: #1e4552; 
color: white; border: none; cursor: pointer; }

.confb {font-size:2vw; padding: 20px 40px;
border-radius: 30px;
background-color: #1e4552; 
color: white; border: none; cursor: pointer; }

.no {
background-color: #ccc; 
}

.comment-item { border-bottom: 1px solid #1e4552; padding: 10px;
 margin-bottom: 15px; 
 background-color: #f9f9f9; 
}

.comment-display {font-size:1.5vw; font-weight:bold;}

.comment-list {max-height: 300px; overflow-y: auto;}
.comment-meta { font-size: 1.5vw; color: #555; margin-bottom: 5px; }
.comment-meta span { font-size: 1vw;  }
.comment-body {font-weight: normal; font-size:1.2vw; text-align: left;}


#name::placeholder,
#title2::placeholder,
#comment1::placeholder,
#comment2::placeholder {
    color: #bbb; 
    opacity: 1; /* Firefoxでopacityがデフォルトで低く設定されているため上書き */
    font-style: italic; /* 斜体 */
    text-align: center;
    font-weight:bold;
}




    /* -------------------------------------- */
    /* 投稿一覧表示エリア */
    /* -------------------------------------- */
    .comment-display {
      border: none; /* 外側の枠は削除 */
      padding: 0;
      margin-bottom: 20px;
      background-color: transparent;
    }
    
    /* 投稿1または投稿2をすべてまとめる大きなブロック */
    .separate-block {
      border: 2px solid #0056b3; /* 投稿ブロックの明確な枠線 */
      padding: 20px;
      margin-bottom: 30px; /* ブロック間の大きな余白 */
      background-color: #f8faff;
      border-radius: 6px;
      max-height: 600px;
      overflow-y: scroll;
    }
    .separate-block h3 {
      border-bottom: 3px double #0056b3;
      padding-bottom: 5px;
      margin-top: 0;
      margin-bottom: 20px;
      color: #0056b3;
    }
    
    /* ブロック内の個別のコメントアイテム */
    .comment-item {
      border: 1px solid #ddd;
      padding: 15px;
      margin-bottom: 15px;
      background-color: #ffffff;
      border-radius: 4px;

    }
    .comment-meta {
      font-size: 0.9em;
      color: #6c757d;
      margin-bottom: 10px;
      border-bottom: 1px dashed #ced4da;
      padding-bottom: 5px;
      font-weight: bold;
    }
    .comment-item h4 {
      margin-top: 5px;
      font-size: 1.5vw;
      color: #343a40;
    margin-bottom: 10px;
    }

    /* --- 確認画面と完了メッセージの既存スタイル --- */
    .confirm-content {
      border: 1px dashed #007bff;
      padding: 20px;
      margin-bottom: 20px;
      background-color: #e9f7ff;
    }
    .confirm-content h3 {
      border-bottom: 1px solid #007bff;
      padding-bottom: 5px;
      margin-top: 15px;
    }
    .complete-message {
      text-align: center;
      padding: 10px;
      border: 2px solid green;
      background-color: #e6ffe6;
      margin: 50px 0;
    }

.pc {}
.sp {display:none;}

@media screen and (max-width: 599px) {


.pc {display:none;}
.sp {display:block;}

body { font-family: "Noto Serif JP", serif;
        font-size:3vw;   
}

.wrap {width:85%;}
h2 {font-size:5vw;}
h2 span {font-size:3vw;}

h3 {font-size:3.5vw;}

.space {margin-bottom: 30px;}
.space2 {margin-bottom: 60px;}

.bbb {width:40%;}

.comment-form {font-size:3vw; }
.comment-form input, .comment-form textarea, .comment-form select  
{font-size:3vw;}


.separate-block {
  padding: 5px;    
      max-height: 300px;
      overflow-y: scroll;
    }

.comment-display {font-size:3vw; font-weight:bold;}
.comment-item {
     
      padding: 5px;}
.comment-meta { font-size: 2.5vw; color: #555; margin-bottom: 5px; }
.comment-meta span { font-size: 2vw;  }
.comment-body {font-weight: normal; font-size:2.5vw;}
.comment-item h4 {
      font-size:2.5vw;
    }


.comment-form button {font-size:4vw; }

.confb {font-size:4vw; }


}