@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Hina+Mincho&display=swap');


@font-face { font-family: 'light' ; src: url('https://dl.dropboxusercontent.com/scl/fi/aykn9dp7v8jqvprq06x8m/fotograami-lamp-islamic.woff?rlkey=9dpzairskcaivkuzvj4t222g4&st=c0tu8q4u&dl=0')format('woff'); }

@font-face { font-family: 'line' ; src: url('https://dl.dropboxusercontent.com/scl/fi/mtrzibisisaexhmk9b0u6/vintage-decorative-signs-2.woff?rlkey=35ymplhc2z1nmvjqdvf6z0ig8&st=rb0oy45k&dl=0')format('woff'); }

@font-face {
font-family: 'bo' ; 
src: url('https://dl.dropboxusercontent.com/s/7kvie3bxzkh9511/%E6%9C%AC.woff')format('woff');
}

body{ 

background-color: #fafafa;

 font-family: "Hina Mincho", serif;
font-size: 12px;



}

hr {
  border: none !important;
  height: 0 !important;
}

.publish_date {
    display: none;
}

a {
  text-decoration: none !important;
}

a:hover {
    color: #00552e;
}

a:link,
a:visited {
    color: #000;
}

.hy{
  font-family: 'light';
font-size: 60px;
color: #000;
text-align: center;
}

.bo{

    font-family: 'bo';
    text-decoration: none;
    font-size: 50px;
    color: #000;
　  text-align: center;

}



:root {
  --deep-green: #2f4f4f;    /* 文字色：深いモスグリーン */
  --accent-green: #1b4d3e;  /* 枠線・タイトル：濃いアイビーグリーン */
  --paper-color: #fffdf9;   /* 紙の色：温かみのある生成り */
}

/* 外側の余白調整 */
.manuscript-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 10px 0;
  box-sizing: border-box;
}

/* 原稿用紙の「窓」：ここは固定 */
.genko-yoshi {
width: 85%;
  max-width: 300px;
  height: 280px; /* 縦のサイズ（お好みで調整） */
  background-color: var(--paper-color);
  border: 1px solid var(--deep-green);
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  margin: 20px auto;
  /* スクロール設定 */
  display: block; /* flexはやめておきましょう */
  overflow-x: auto;
  direction: rtl; 
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;

}

/* 動く「紙」の部分 */
.genko-inner {

padding: 10px 20px; 

  display: flex;
  flex-direction: row; /* タイトルと本文を横に並べる */
  writing-mode: vertical-rl; /* 縦書きの魔法 */
  width: max-content; /* 文字量に合わせて横に伸びる */
  min-width: 100%;  /* 常に少しだけスクロール可能にして挙動を安定させる */
  height: 95%;
  box-sizing: border-box;
align-items: center;    /* 縦方向（スマホの上下）の中央寄せ */

  justify-content: flex-end; /* 中身を右端に寄せる */
position: relative;
  direction: ltr; 

 transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    justify-content: flex-start;
    align-items: flex-start;

    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.3) transparent;

  /* マス目の背景：緑のインクを薄めたイメージ */
  background-image: 
    linear-gradient(90deg, rgba(47, 79, 79, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(47, 79, 79, 0.08) 1px, transparent 1px);
  background-size: 16px 16px; /* マス目の大きさ */

  background-repeat: repeat;
line-height: 2.2;

}

/* タイトルの装飾 */
.genko-title {
  font-family: serif;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--accent-green);
  border: 1px solid var(--accent-green);
  padding: 10px 4px;
  margin-left: 20px; /* 本文との隙間 */
  line-height: 1.2;
  text-align: center;
}

/* 本文 */
.content {
  color: var(--deep-green);
  line-height: 15px; /* background-sizeと合わせる */
  letter-spacing: 0.1em;
  scroll-snap-align: start; /* マス目の端で止まる */
}

/* 落款（はんこ） */
.seal {
  align-self: flex-end; /* 下側に配置 */
  margin-right: 20px;
  border: 1.5px solid var(--accent-green);
  color: var(--accent-green);
  padding: 4px 2px;
  font-size: 0.8rem;
  font-weight: bold;
}

/* スクロールバーのデザイン */
.genko-yoshi::-webkit-scrollbar { height: 6px; }
.genko-yoshi::-webkit-scrollbar-thumb { 
  background: var(--accent-green); 
  border-radius: 10px; 
}


/* 外側の余白確保 */
.old-diary {
  background: none; 
  padding: 25px 15px; /* 上下左右にしっかり余白を */
  width: 95%;
  max-width: 420px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 紙本体：罫線を消して質感をアップ */
.diary-inner {
  background-color: #ffffff;
  /* ほのかに紙の質感を出すための極薄グラデーション（任意） */
  background-image: radial-gradient(#f1f1f1 0.5px, transparent 0.5px);
  background-size: 10px 10px; 
  
  padding: 25px;
  color: var(--deep-green);
  line-height: 1.8; /* 罫線がない分、少し詰めても綺麗です */
  
  /* 境界線と影：紙がフワッと浮いている感じ */
  border: 1px solid #e6e6e6;
  box-shadow: 2px 4px 12px rgba(0,0,0,0.03);
  
  /* 左端のアクセントカラー（深緑）を太めにして印象的に */
  border-left: 5px solid var(--accent-green);
  
  /* テキストが左端の線に近すぎないよう調整 */
  padding-left: 20px; 
  
  position: relative;
  word-wrap: break-word;
}

/* 綴じ目の影を消して、よりフラットで綺麗な印象に */
.diary-inner::before {
  display: none; 
}

.tit{

    font-family: 'bo';
    text-decoration: none;
    font-size: 32px;
    color: #00552e;
}

summary {
  list-style-type: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  font-family: "Font Awesome 6 Free";
  content: "\f023";                  
  font-size: 15px;
  color: #000;                    
  transition: all 0.3s ease;          
}

details[open] summary::before,
summary details[open] summary::before {
  content: "\f3c1";                    
}