@charset "utf-8";






/* ===== 既存背景の上にコンテンツを置く ===== */



/* ボックスは透明消したら */
.box {
  background: transparent;
  padding: 16px;
  margin-bottom: 24px;
}



/* 文章だけ読みやすくする（必要なら） */
.box-single p {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.8;
  color: #fff; /* 背景が暗い場合 */
}





/*基本設定-----------------------------------------*/

html, body {
  
 


  margin: 0px;
  padding: 0px;
 }

/* ページ内全体の文字の設定と背景の設定 */
body {
  margin: 0;
  padding: 0;



    font-family: "Noto Serif JP", serif; 
    font-size: 1em;
    color: #ffffff;
    line-height:1.8em;
    background-color: #322A00;

    
    
    }

/* ページ内全体のリンクの文字色 */
a{text-decoration: none;}
a:link {color: #ffffff;} 






/* ===== 既存背景の上にコンテンツを置く ===== */




/* 画像 */
.box img {
  width: 100%;
  height: auto;
  display: block;
}
.top-image {
  max-width: 430px;
  margin: 0 auto;      /* ← ブロック自体を中央へ */
}

.top-image img {
  max-width: 280px;     /* ← ロゴの大きさを変える */

  width: 120%;
  height: auto;
  display: block;
  margin: 0 auto;

  position: relative; /* ← 基準を作る */
  top: 75px;          /* ↓ ロゴが下に動く（-で上） */
  left: 10px;          /* → 右に動く（-で左） */
}


/* 文章だけ読みやすくする（必要なら） */
.box-single p {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.8;
  color: #fff; /* 背景が暗い場合 */
}






#top{

   


   position: fixed;
   top: 0;
   left: 50%;
  transform: translateX(-50%); /* 中央寄せ */
   
   width: 100%;
   max-width: 430px;
   height: 70px;/* ヘッダーの高さ指定 */

   background-size:cover;
   z-index: 10; 
   
  

   display: flex;
   flex-direction: column; /* ←中身を上から順に並べる */
   align-items: center; /* 横方向中央寄せは維持 */
   justify-content: flex-start;

  background-color: rgba(255, 255, 255, 0.6); /* 半透明背景 */
  
  background-size: cover;
  background-position: center;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;   /* 縦方向中央（バーの中で） */

  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;/* 角を丸くする */

  

  
}

.status-icon {
  
  height: 40px;/* ヘッダーの文字画像サイズ調整 */
}
  










/* ===== 本文 ===== */



.wrapper {
  background-image: url(back.png);
  background-size: 100%; /* ← 80% や 70% も可 */
  background-position: top center;
  background-repeat: no-repeat;
}



.box-images img {
  display: block;
  margin-bottom: 16px;  /* ← 画像と画像の間の間隔 */
}








/* 全体 */
.cut-image {
  max-width: 430px;
  margin: 0 auto;
  padding: 24px 16px;

  display: flex;
  flex-direction: column; /* 2段 */
  gap: 20px;

  background-color: #322A00; /* 必要なら */
}

/* 各行 */
.cut-image .row {
  display: flex;
  align-items: center; /* ← 縦中央で揃う */
  gap: 12px;           /* 画像と文字の距離 */
}




/* sentai.png：拡大しても常に中央 */
.box-single {
  display: flex;
  justify-content: center;
}

.box-single img {
  width: 425px;      /* ← 拡大 */
  max-width: 200%;
  height: auto;



  transform: translateX(3px); /* ← 右に少し */


  
}




/* box-single：重ね配置に変更 */
.box-single {
  position: relative;      /* ← 重ねるための基準 */
  text-align: center;      /* 文字を中央 */
}



/* 文章を画像の上に載せる */
.box-single p {
  position: absolute;
  top: 100;                /* 縦中央 */
  left: 20;               /* 横中央 */
  transform: translate(0px, 300px);
  
  margin: 0;
  padding: 12px 16px;
  
  color: #fff;
  font-size: 15px;
  


  
}

.box-single p {
  font-family: 
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

    font-weight: 600;
}


.box-single p {
  white-space: pre-line;
  line-height: 2.3;
}



.hero-title {
  font-family: 
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  font-weight: 900;
  font-size: 20px;
  margin-bottom: 10px;

  color: black;

  text-align: center;

margin-top: 120px;


}



.box-images {
  margin-top: 40px; /* ← 下に下げる量 */
}

/* aka：少し右へ */
.box-images img[src*="aka.png"] {
  width: 500px;
  max-width: 113%;
  height: 400px;

  transform: translateX(-50px); /* ← 右 */
}

/* kiiro：少し左へ */
.box-images img[src*="kiiro.png"] {
  width: 550px;
  max-width: 113%;
  height: 400px;

  transform: translateX(6px); /* ← 左 */
}

/* midori：右へ */
.box-images img[src*="midori.png"] {
  width: 500px;
  max-width: 103%;
  height: 390px;

  transform: translateX(-23px);
}

/* kuro：左へ */
.box-images img[src*="kuro.png"] {
  width: 800px;
  max-width: 107%;
  height: 400px;

  transform: translateX(7px);
}


html, body {
  overflow-x: hidden;
}


.image-item {
  position: relative; /* ← 文字の基準 */
}

/* 文字の基本 */
.image-text {
  position: absolute;
  z-index: 10;

  font-family: 
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  font-weight: 600;
  font-size: 13px;
  color: #000;

 


}


/* aka */
.pos-aka {
  top: 135px;
  left: 205px;
}

/* kiiro */
.pos-kiiro {
  bottom: 214px;
  right: 290px; /* マイナスで右*/
}

/* midori */
.pos-midori {
  top: 135px;
  left: 199px;
  
}

/* kuro */
.pos-kuro {
  top: 98px;
  left: 15px;
 
}

.image-text {

  
  line-height: 1.6;


  white-space: pre-line;

}



/* 全体 */
.product-layout {
  max-width: 300px;   /* スマホ想定 */
  margin: 0 auto;
  padding: 50px 16px;
}

/* 画像2枚の横並び */
.image-row {
  display: flex;
  gap: 10px;          /* 画像同士の間隔 */
  margin-bottom: 70px;
}

.image-row img {
  width: 50%;
  height: auto;
  display: block;
}

.image-row img {
  flex: 1;
  height: auto;
  display: block;
}

/* 左だけ調整 */
.img-left {
  transform: scale(0.9803);   /* 小さく */
  /* scale(1.05) なら大きく */
}

.image-row {
  display: flex;
  gap: 20px;
}

.image-row img {
  flex: 1;
  height: 160px;        /* ← 高さを固定（好きな数値） */
  object-fit: cover;   /* ← はみ出した分をトリミング */
  display: block;
}

.product-names {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.product-name {
  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  font-size: 12px;
  font-weight: 700;
  color: #000000;

  /* ① 文字を上に */
  margin-top: -55px;      /* ← マイナスで上へ */
  margin-bottom: 0;

  /* ② 横の余白（文字の詰まり防止） */
  padding: 0 4px;        /* ← 左右だけ余白 */

  /* ③ 行間調整 */
  line-height: 1.3;      /* ← 数字を小さくすると詰まる */

  text-align: center;
  flex: 1;
}



.product-names1 {
  display: flex;
  gap: 10px;
  justify-content: center;

  position: relative;
  top: -100px;   /* 上下 */
  left: 20px;   /* 左右 */
}

.product-name1 {
  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  font-size: 12px;
  font-weight: 700;
  color: #000;
  text-align: center;
  flex: 1;



  white-space: pre-line;



  /* ★ 行間調整 */
  line-height: 1.3;   /* ← 詰めたいなら 1.1〜1.3 */
}

.move-right {
  transform: translateX(-40px); /* 右へ */
}




.hero-title-image {
  text-align: center;
  margin: 130px 0 -50px; /* 上下の余白はここで調整 */
}

.hero-title-image img {
  width: 200px;     /* 好きなサイズに */
  max-width: 100%;
  height: auto;
}




.hero-setumei-image {
  text-align: center;
  margin: 0px 0 -50px; /* 上下の余白はここで調整 */
}

.hero-setumei-image img {
  width: 200px;     /* 好きなサイズに */
  max-width: 100%;
  height: auto;
}


.kounyuu-image {
  text-align: center;
  margin: -50px 0 -50px; /* 上下の余白はここで調整 */
}

.kounyuu-image img {
  width: 180px;     /* 好きなサイズに */
  max-width: 70%;
  height: auto;
}

.saito-image {
  text-align: center;
  margin: 70px 0 100px; /* 上下の余白はここで調整 */
}

.saito-image img {
  width: 150px;     /* 好きなサイズに */
  max-width: 70%;
  height: auto;
}

.minirogo-image {
  text-align: center;
  margin: 60px 0 px; /* 上下の余白はここで調整 */
}

.minirogo-image img {
  width: 160px;     /* 好きなサイズに */
  max-width: 100%;
  height: auto;
}