@charset "utf-8";
/*基本設定-----------------------------------------*/
html, body { 
  margin: 0px;
  padding: 0px;
 }

body {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
    font-size: 10px;
    color: #465151;
    line-height:1.5em;
    background-color: #322A00;
    
    }

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

/* 中央のコンテンツ表示部分の設定 ----------------------------*/
#container{ 
    margin: 0 auto; 
    width: 100%; 
    max-width: 390px; 
    height: 1140px; 
    overflow: hidden; 
    
    background-image: url(haikei.png); 
    background-repeat: no-repeat;
    position: relative;
}

#container2{ 
    margin: 0 auto; 
    width: 100%; 
    max-width: 390px; 
    max-height: 844px; 
    overflow: hidden; 
    
    background-image: url(haikei.png); 
    background-repeat: no-repeat;
    position: relative;
}
.back{  
    background-color: gray;
    width: 390px;
    height: 840px;
  display: inline-block;
  opacity: 0.4;
}
.settei{
margin-top: 55px;
margin-left: 340px;
}

#name{
    color: #f5feff;
    text-align: center;
    margin-top: -30px;
}
.namae{
    font-size: 1.3em;
    margin-top: -33px;
}

.kazu_tx{
    margin-top: 27px;
     line-height:1.8em;
    display:flex;
     margin-left: 100px;
     gap: 8px;
}
.hirou{
    padding: 5px;
 width: 80px;            
    height: 40px;     
    box-shadow: 0px 2px 10px rgba(141, 162, 163, 0.5);         
    background-color: rgba(220, 234, 234, 0.3); 
    border-radius: 8px;     
}
.a{
     font-size: 1.8em;
}

.i{
     font-size: 1.8em;
}

.nagasu{
    padding: 5px;
 width: 80px;           
    height: 40px;
     box-shadow: 0px 2px 10px rgba(141, 162, 163, 0.5);     
    background-color: rgba(220, 234, 234, 0.3);    
    border-radius: 8px;     
}


.botoru{
     line-height:1.9em;
    background-image: url(botoru.png);
    background-size: 92% auto; 
    
    /* ★★★ 修正: 縦軸のリピートのみを 'space' に指定する ★★★ */
    background-repeat:repeat-y; /* X軸（横）は繰り返し、Y軸（縦）はスペース */
    
    /* 修正: ボトル画像を中央に配置し、上端から開始 */
    background-position: center top; 
    
    margin-top: 20px;
    height: 690px;
    padding-top:1px
}

.botanntx1{
   position: absolute; 
    top: 341px;
    left: 26px;
    right: 0;
    margin: 0 auto; 
    border-radius: 18px;     
    width: 322px;
    height: 115px;
    background-color: rgba(255, 255, 255, 0.01);  
   }

.zikan1{
    color: gray;
    font-size: 1.1em;
    margin-top: 15px;
    margin-left: 65px;
}
.tx1{
     margin-top: -8px;
    margin-left:  65px;
    margin-right: 28px;
    font-size: 1.3em;
}

.zikan2{
    color: gray;
    font-size: 1.1em;
    margin-top: 65px;
    margin-left: 65px;
}
.tx2{
     margin-top: -8px;
    margin-left:  65px;
    margin-right: 28px;
    font-size: 1.3em;
}
.zikan3{
    color: gray;
    font-size: 1.1em;
    margin-top: 65px;
    margin-left: 65px;
}
.tx3{
     margin-top: -8px;
    margin-left:  65px;
    margin-right: 28px;
    font-size: 1.3em;
}
.zikan4{
    color: gray;
    font-size: 1.1em;
    margin-top: 60px;
    margin-left: 65px;
}
.tx4{
     margin-top: -8px;
    margin-left:  65px;
    margin-right: 28px;
    font-size: 1.3em;
}
.zikan5{
    color: gray;
    font-size: 1.1em;
    margin-top: 63px;
    margin-left: 65px;
}
.tx5{
     margin-top: -8px;
    margin-left:  65px;
    margin-right: 28px;
    font-size: 1.3em;
}


.fixed-menu {
    position: fixed; 
    bottom: 0;
    left: 0;
     right: 0;
    margin: auto;
     /* サイズと色を指定 */
   
 /* 4. 他のコンテンツの上に重なるようにする（任意だが推奨） */
    z-index: 1000;
}

.aikon{
display: flex; 
    justify-content: space-between; 
    margin-bottom: -45px;
    margin-left:  20px;
    margin-right: 20px;

}

#menu { 
   display:flex;
   font-size:0.9em;
    box-shadow: 0px -10px 20px rgba(141, 162, 163, 0.5);
   justify-content: space-around; 
     width: auto;
    height: 85px;
    background-color: #f2f0e1;
     padding-bottom:-1px;
    align-items: flex-end;
}


.modoru{

    position: absolute; 
    
    margin-top: -665px;
    margin-left: 21px;

 
    z-index: 100; 
}
.name2{
    align-items: center;
    font-size: 1.6em;
    position: absolute; 
    display: flex;
    margin-top: -640px;
    margin-left: 35px; 
    z-index: 150; 
}
.zikan1_1{
      align-items: center; 
      color: gray;
    font-size: 1.1em;
    position: absolute; 
    margin-top: -585px;
    margin-left: 109px; 
    z-index: 153; 
}
.stamp{
     position: absolute; 
    display: flex;
    margin-top: -640px;
    margin-left: 250px; 
    z-index: 151; 
}
.zinzya{
     font-size: 1.3em;
     padding-left: 20px;
     padding-right: 45px;
      line-height:2.05em;
     position: absolute; 
    display: flex;
    margin-top: -538px;
    margin-left: 40px; 
    z-index: 152; 
}
.tegami{
    position: absolute; 
    
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); 
    

    width: 322px;
    height: 467px; 
    
    background-image: url(kami.png);
    background-repeat: no-repeat;
    background-size: contain; /* サイズに合わせて画像を調整 */
    
    /* 他の要素より手前に表示する */
    z-index: 50; 
}

.syasin1{
     position: absolute; 
    display: flex;
    margin-top: -400px;
    margin-left: 82px; 
    z-index: 155; 
}