@charset "utf-8";/* ←これは文字コード */


/*基本設定★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/

/* 画面に隙間ができないようにするおまじない----------------- */
html, body { 
  margin: 0;
  padding: 0;
}

/* サイト全体に係わる設定----------------- */
body {
  line-height: 1.8em;
  background-color: #f5f1e1;
  font-family: "Kaisei Opti", serif; /* クラス名ではなくフォント名を指定 */
  font-weight: 400;
  font-style: normal;
}

a {
    text-decoration: none; /* リンクの文字に下線を表示させない */
    color: #ffffff; /* リンクの文字には白色 */
}

/* --- 1. 背景パターンを画面全体に固定（ランダム配置版） --- */
.bg-pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -10;
  pointer-events: none;
  opacity: 0.4; /* 指定の不透明度 */

  /* ★個別に位置を指定するために複数回画像を呼び出す */
  background-image: 
    url("pine_ame_sozai.png"),
    url("pine_ame_sozai.png"),
    url("pine_ame_sozai.png"),
    url("pine_ame_sozai.png");

  background-size: 50px 50px;
  background-repeat: no-repeat; /* ★repeatを解除して個別に配置 */

  /* ★まばらな位置を指定（左上、右中央、左下、中央右寄りなど） */
  background-position: 
    10% 15%, 
    90% 40%, 
    15% 75%, 
    75% 85%;
}

/* --- 追加：回転を加えたパインアメ（擬似要素） --- */
.bg-pattern::before,
.bg-pattern::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  background: url("pine_ame_sozai.png") no-repeat center/contain;
}

/* 5個目：少し傾けて中央付近に */
.bg-pattern::before {
  top: 30%;
  left: 45%;
  transform: rotate(25deg); /* 25度回転 */
}

/* 6個目：逆方向に傾けて右下付近に */
.bg-pattern::after {
  bottom: 20%;
  right: 25%;
  transform: rotate(-15deg); /* -15度回転 */
}

/* --- 2. 他の要素の背景色を「透明」にする（維持） --- */
#container, 
.main-copy-left, 
.post-image, 
.sub-copy-wrapper {
  background-color: transparent !important;
}

/* --- 3. サイト全体のベース背景色は body にのみ指定（維持） --- */
body {
  margin: 0;
  background-color: #f5f1e1;
}


/*コンテンツ内の細々した設定★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/

/* 中央のコンテンツ表示部分の設定 ----------------------------*/
#container { 
    background-color: #f5f1e1; /* コンテンツ内の背景色も指定の色に変更 */
    margin: 0 auto; /* 上下の空きなし、左右中央に表示せよ */
    width: 100%; /* 横幅は画面いっぱいまで広げてくれ */
    max-width: 390px; /* ただし、横幅の最大は430ピクセルな */
    text-align: center; /* この中にあるものは中央揃えで配置してくれ */
    position: relative; 
}

/* 画面上部のキービジュアル部分------------------------- */
#keyvisual { 
    width: 100%; /* 横幅は左右いっぱい */
    height: 100vh; /* 縦幅はデバイスにあわせて縦いっぱい */
    background-image: url(background.png); /* 画面上部に表示させている画像 */
    background-repeat: no-repeat; /* 背景画像は1回だけ表示 */
    background-size: cover; /* 縦横比キープしていっぱいに表示ね */
    background-position: center; /* 画像は中心から表示してね */
}

/* ヘッダーの設定（スリム化・ロゴ対応） ------------------------- */
.header-box {
  position: fixed;        /* ← 上部固定にしておく */
  top: 0;              /* ← 上の隙間をスリムに */
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: space-between; /* 両端にロゴとアイコンを配置 */
  align-items: center;
  max-width: 390px;       
  height: 64px;           /* ← 高さをスリムに */
  padding: 0 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* 影を薄く */
  z-index: 10;
  background-color: rgba(245, 241, 225, 0.8); /* 背景を少し透明に */
  backdrop-filter: blur(5px); /* 背後をぼかす */
}

/* ロゴのサイズ調整 */
.logo-box img {
  height: 30px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* アイコンの設定 */
.icon-box img {
  width: 32px;
  height: 32px;
  object-fit: contain;    /* 全体が表示されるように調整 */
  cursor: pointer;
  transition: transform 0.2s;
  margin-top: 10px;
}

.icon-box img:hover {
  transform: scale(1.1);
}

/* プロフィール部分（ヘッダー下） ----------------------------- */
.profile-box {
  position: absolute;   
  top: 100px;           /* ヘッダーがスリムになった分、少し上に調整 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 90%;
  max-width: 390px;
  text-align: left;
  z-index: 2;           
}

/* 枠画像 */
.profile-frame {
  position: absolute;
  top: -15px;
  left: 0;
  width: 96%;
  height: auto;
  z-index: 1;
  transform: translateX(20px); 
}

.profile-frame img {
  width: 90%;
  height: auto;
  display: block;
}

/* --- メインコピー（1951年〜の部分） --- */
.main-copy-left {
  position: relative;
  padding-top: 80px;   
  padding-left: 25px;
  padding-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  z-index: 5;
  font-family: "Kaisei Opti", serif;
  font-size: 1.8rem;
  line-height: 1.4;
  color: #3e2d14;
  text-align: left;
  font-weight: 400;
  letter-spacing: 0.1em;
}

/* 1. 親の箱（ここは絶対に動かさない！） */
.post-image {
  position: relative;
  width: 85%;
  max-width: 300px;
  margin: 0 auto 20px;
  z-index: 1;
  /* ここに animation や transform は書かない */
}

/* 2. パインアメの画像（これだけを回す） */
.post-image > img {
  width: 100%;
  height: auto;
  display: block;
  /* ★アニメーションはここ！ */
  animation: spin 20s linear infinite;
}

/* 3. 装飾（これは img の隣にあるので、img の回転には巻き込まれません） */
.decoration-layer {
  position: absolute;
  top: -5px;
  left: -26px;
  width: 125%;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

.decoration-layer img {
  width: 100%;
  height: auto;
  display: block;
  /* ★装飾用画像にはアニメーションを指定しない */
}

/* アニメーションの定義 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --- 装飾の上に乗る文字（必要であれば追加） --- */
.decoration-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  font-family: "Kaisei Opti", serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: #f5f1e1; /* 背景色と同一 */
  white-space: nowrap;
}

/* 装飾の上に乗る文字の設定 */
.decoration-text {
  position: absolute;  
  z-index: 3;          
  
  /* --- 文字のデザイン --- */
  font-family: "Kaisei Opti", serif;
  font-size: 1.6rem;      /* 背景色と同じ色なので、少し大きく太くすると映えます */
  font-weight: 900;       /* かなり太めに設定 */
  color: #f5f1e1;         /* ★背景色と同じ色を指定 */
  white-space: nowrap; 
  letter-spacing: 0em;  /* 文字間を少し開けるとおしゃれです */
  
  /* --- 配置の微調整 --- */
  top: 65px;
  left: 81%;
  
  /* pointer-events: none; が親にある場合は不要ですが、念のため */
  pointer-events: none;
}

.decoration-layer img {
  width: 100%;         /* 親要素(.decoration-layer)の幅いっぱいに表示 */
  height: auto;
  display: block;
}

/* 外枠：基準点（relative）にする */
.sub-copy-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
  padding: 0 10px 0 0; 
  margin-top: -20px;
  position: relative; /* ★マスコットを配置する基準になります */
}


/* マスコット画像：浮かせて重ねる */
.mascot-box {
  position: absolute;          /* ★ absolute にしてメモのサイズ干渉を無効化 */
  left: 20px;                  /* ★ 左からの位置（メモと重なるように調整） */
  bottom: 20px;               /* ★ 下からの位置（少しはみ出すとかわいいです） */
  width: 150px;                /* ★ マスコットの横幅 */
  z-index: 2;                  /* ★ メモより手前に表示 */
}

.mascot-box img {
  width: 100%;
  height: auto;                /* 比率を固定 */
  display: block;
}

.memo-layer {
  background-image: url(memo.png);
  background-size: 100% 100%;    /* 比率を固定して枠に合わせる */
  background-repeat: no-repeat;
  background-position: center;
  
  /* ★修正：左側の余白(40px)を増やして、文字を右に押し出す */
  /* 上:80px / 右:20px / 下:40px / 左:40px */
  padding: 60px 30px 60px 70px; 

  display: block;
  width: 280px;          /* 画像と文字の収まりを見て数値を微調整 */
  margin-left: auto;     /* 右寄せ */
  box-sizing: border-box;
  z-index: 1;
}

/* 文字が窮屈ならサイズを少し下げます */
.sub-copy {
  text-align: left;
  font-family: "Kaisei Opti", serif;
  font-size: 0.85rem;     /* 0.85から少し下げて収まりを優先 */
  line-height: 1.5;
  color: #3e2d14;
  margin: 0;
}

/* アコーディオン全体（境界線の重なりを防ぐ） */
.history-accordion {
  width: 90%;
  margin: 40px auto;
  max-width: 390px;
  border-top: 1px solid #d1ccbb;
}

/* 各項目の下にだけ線を引く */
details {
  border-bottom: 1px solid #d1ccbb;
}

/* 見出し部分の調整 */
summary {
  padding: 15px 10px;    /* 上下の余白を少し詰めると2行でもバランスが良くなります */
  font-family: "Kaisei Opti", serif;
  font-weight: bold;
  color: #ba3223;
  cursor: pointer;
  list-style: none;
  position: relative;
  font-size: 1.3rem;
  text-align: left;
  line-height: 1.4;      /* ★2行になった時の行間を少し詰める */
}

/* プラスマークの位置調整 */
summary::after {
  content: '+';
  position: absolute;
  right: 10px;
  top: 50%;              /* ★2行の高さに対しても中央に来るように */
  transform: translateY(-50%);
  color: #ba3223;
  font-size: 2.0rem;
  font-weight: bold;
}

/* 開いている時のマイナスマーク */
details[open] summary::after {
  content: '−';
}

.accordion-content {
  padding: 0 10px 20px;
  text-align: left;
  font-size: 1.0rem;
  line-height: 2.2;
  color: #3e2d14; /* 指定の茶色 */
  text-align: center;      /* ★テキストを中央揃えに */
  margin: 0 auto;
  max-width: 95%;         /* 左右にわずかな余裕を持たせる */
}

  /* マスコット2（アコーディオンの下）の配置コンテナ */
.bottom-mascot {
  width: 100%;
  max-width: 390px;     /* ★コンテナ自体を390pxに制限 */
  margin: 0 auto;       /* ★中央に配置 */
  display: flex;
  justify-content: center; /* 中身（マスコット）を中央寄せ */
  padding: 20px 0 60px;    /* 下端に余裕を持たせる */
}

/* マスコット画像本体のサイズ制限 */
.bottom-mascot img {
  width: 300px;          /* ★ここで実際の表示サイズを指定（お好みで調整） */
  max-width: 100%;      /* 親要素（390px）を絶対にはみ出さない設定 */
  height: auto;
  display: block;
}
/* アコーディオン内の各セクション（セット） */
.history-item {
  margin-bottom: 30px; /* セットごとの間隔 */
  border-bottom: 1px dotted #d1ccbb; /* セット間の区切り（点線） */
  padding-bottom: 15px;
}

/* 最後のセットは線を消す */
.history-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

/* 画像を2枚横に並べるブロック */
.history-images {
  display: flex;
  gap: 10px;           /* 画像同士の隙間 */
  margin-bottom: 10px; /* 下の説明文との隙間 */
}

.history-images img {
  width: calc(50% - 5px); /* 2枚並べるための計算（gap分を引く） */
  height: auto;
  display: block;
  border-radius: 4px;
}

/* ★歴史の解説テキストをセンタリング */
.history-desc {
  font-family: "Kaisei Opti", serif;
  font-size: 1.0rem;
  line-height: 1.6;
  color: #3e2d14;
  text-align: center;      /* ★テキストを中央揃えに */
  margin: 0 auto;
  max-width: 95%;         /* 左右にわずかな余裕を持たせる */
}

/* フッター画像の設定 */
.site-footer {
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  line-height: 0;
}

.site-footer img {
  width: 100%;
  height: auto;
  display: block;
}