@charset "UTF-8";

/* イメージコントロール */

.img-right {
    float:right;
    width: 40%;
}

@media (max-width: 768px) {
.img-right {
    width: 300px;
}
}

@media (max-width: 500px) {
.img-right {
    float:none;
    width: 100%;
}
}
    
.catch-img {
    width: 100%;
}

/* コメントノート */

.comment-notes li {
    margin-left: -1em;
}

/* コメントリスト全体 */
.comment {
    position: relative;
    height: 200px;
    overflow: hidden;
    padding-bottom: 30px; /* もっと見るボタンのスペース確保 */
    padding: 15px;
    margin-bottom: 20px;
    font-family: "Arial", sans-serif;
    font-size: 16px;
    color: #333;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
    display: inline-block;
    width: 290px;
}

/* カウンターのスタイル例 */
#comment-char-count {
    margin: -5px 5px 0px 0px;
    text-align:right;
}

/* 色のバリエーションとアクセントカラー */
.sticky-note-1 { background: #ffffcc; border-left: 6px solid #ffcc00; } /* 黄色 */
.sticky-note-2 { background: #ffcccc; border-left: 6px solid #ff6666; } /* ピンク */
.sticky-note-3 { background: #ccffcc; border-left: 6px solid #66cc66; } /* 緑 */
.sticky-note-4 { background: #ccffff; border-left: 6px solid #66cccc; } /* 青 */

.y-box {
 display: inline-block;
 width: 20px;
 height: 10px;
 background-color: #ffffcc;
 vertical-align: middle;
}

.p-box {
 display: inline-block;
 width: 20px;
 height: 10px;
 background-color: #ffcccc;
 vertical-align: middle;
}

.g-box {
 display: inline-block;
 width: 20px;
 height: 10px;
 background-color: #ccffcc;
 vertical-align: middle;
}

.b-box {
 display: inline-block;
 width: 20px;
 height: 10px;
 background-color: #ccffff;
 vertical-align: middle;
}

/* 共通フェードアウト効果 */
.comment::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    display: block;
    z-index: 1;
}

/* 各色ごとのフェードアウト */
.sticky-note-1::after { background: linear-gradient(to bottom, rgba(255, 255, 204, 0) 0%, #ffffcc 100%); } /* 黄色 */
.sticky-note-2::after { background: linear-gradient(to bottom, rgba(255, 204, 204, 0) 0%, #ffcccc 100%); } /* ピンク */
.sticky-note-3::after { background: linear-gradient(to bottom, rgba(204, 255, 204, 0) 0%, #ccffcc 100%); } /* 緑 */
.sticky-note-4::after { background: linear-gradient(to bottom, rgba(204, 204, 255, 0) 0%, #ccffff 100%); } /* 青 */

/* コメントボディの高さを初期設定 */
.comment-body {
    position: relative;
/*    max-height: 200px; */
    overflow: hidden;
    padding-bottom: 30px;
}

/* もっと見るボタンを右下に配置 */
.show-more {
    display: inline-block;
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 14px;
    color: #007bff;
    cursor: pointer;
    padding: 5px 10px;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #007bff;
    border-radius: 5px;
    transition: opacity 0.3s ease, background 0.3s ease;
   z-index: 2;
}

/* ホバー時の視覚効果 */
.show-more:hover {
/*    opacity: 0.9; */
    background: rgba(230, 230, 255, 0.8);
}

/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{
  display: none;
}

/* コメント送信ボタン */
input[type=submit] {
  font-size: 18px!important;
}

.copyright {
    font-size: 18px!important;
}

/* ヘッダーコントロール*/

.logo-text{
	padding: 1px 0px 20px!important;
}

.site-title{
	padding: 1px 0px 20px!important;
}

.tagline{
  font-size: 18px!important;
  padding-top: 10px;
}

.site-description {
  font-size: 18px!important;
  padding-top: 10px;
}

.header-flex{
    display:flex;
    align-items:center;
    width:fit-content;
    margin:auto
}

.site-logo{
    flex:0 0 auto;
    margin:0;
}

.site-logo img{
    max-height:80px;
}

@media (max-width: 768px) {
.site-logo img{
    max-height:60px;
}
.site-description {
    display: none;
/*  font-size: 16px!important; */
}

}