@charset "UTF-8";

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:游ゴシック;
}

/* PC表示時の中央寄せ設定 */
html, body {
  width: 100%;
  height: 100%;
  background: #eef1f0; /* PCで見たときの背景を少し暗めにしてスマホ枠を目立たせる */
  font-family: sans-serif;
  color: #000000;
}

/* 各画面共通のスマホ化ラッパー 
  JSP側でbodyタグの中身を全て<div class="app-wrapper"></div>で囲んでください（全てのJSPで）
  これで画面がスマホ幅に変わると思います！
*/
.app-wrapper {
	display: flex;
    flex-direction: column;
  width: 100%;
  max-width: 430px;    /* スマホの幅に固定 */
  min-height: 100vh;   /* 画面縦いっぱいの高さを確保 */
  margin: 0 auto;      /* 画面の真ん中に寄せる */
  background: #f3fff2; /* bodyの背景色（薄緑） */
  position: relative;  /* ヘッダーやフッターの配置基準にする */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* PC表示時の影 */
}


/*========================ヘッダー=========================*/
header{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    width: 100%;
    font-size: 14px;
    background-color: #66BB6A;
    border-top:dotted 5px #D8EFD6;
    border-bottom:dotted 5px #D8EFD6;
    z-index: 10;
}

.header-left{
	width:90px;
	font-size:11px;
    justify-self:start;
    display:flex;
    flex-direction:column;
    padding-left: 10px;

}
.header-left .anniversary{
    text-align: center;
}
.logo{
    justify-self:center;
    width:200px
    
}
.info{
	width:60px;
}
.bean-info{
    justify-self:end;
    padding-right: 10px;
}
.bean-info:hover {
  transform: translateY(-5px);
}
.solid{
	border-top:solid 2px #66BB6A;

}
/*======================== メイン =========================*/
main {
  display: block;
  width: 100%;
  flex: 1; /* 残りの縦幅を自動で埋める */
  padding: 10px 8px 100px 8px; /* 下部バーに被らないように余白を入れる */
  border-top:solid 2px #66BB6A;
}

/*========================フッター=========================*/
 /* アイコンバー */
.bottom-bar{
	position:fixed;/*アイコンバー位置固定*/
	left:12px;/*バーの配置*/
	right:12px;
	bottom:18px;
	height:72px;
	width:380px;
	left: 50%;/*親要素の真ん中に合わせる*/
	transform: translateX(-50%);
	display:flex;
	align-items:center;                   /*上下を整える*/
	justify-content:space-around;
	border-radius:40px;                   /*角を丸くする*/
	background: rgba(107, 175, 78, 0.2);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(107, 175, 78, 1);		/*枠色*/
  /* ===アニメーションの変化にかける時間=== */
  transition:
    height .3s cubic-bezier(.2,.8,.2,1),
    width .3s cubic-bezier(.2,.8,.2,1),
    transform .3s cubic-bezier(.2,.8,.2,1),
    background .3s ease,
    border-radius .4s ease;
  z-index:999;/*手前に配置*/
}
/* アイコンバー（縮小時） */
.bottom-bar.small{
  background: rgba(107, 175, 78, 0.2);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(107, 175, 78, 1);       /*アイコンバーぼかし*/
  height:58px;
  width:350px;
   transform:
    translateY(6px)                      /*縮小時の下げ幅*/
    scale(0.94);                         /*縮小率*/
  border-radius:30px; 
  transform: translateX(-50%);
  display:flex;                   /*角の丸まり具合*/
  
  
}
/* アイコン */
.bottom-bar i{
  font-size:27px;
  width:60px;
  height:40px;
  color: rgb(62, 142, 65);
  
  transition:
    transform .4s cubic-bezier(.2,.8,.2,1),
    opacity .25s ease;
  display:flex;
  align-items:center;                   /*上下を整える*/
  justify-content:space-around;
  text-shadow: 0 0 1px black;
}
/*現在ページのアイコン*/
.nowpage{
    background-color: rgba(107, 175, 78, 0.5);
    border-radius:15px;
    
    
}
.bottom-bar.shrink i{
  transform:scale(0.82);
  opacity:0.88;
}
/* アイコンバーのデコレーションオフ */
.bottom-bar a:link{text-decoration:none;}
.bottom-bar a:visited{text-decoration:none;}
.bottom-bar a:hover{text-decoration:none;}
.bottom-bar a:active{text-decoration:none;}


/* 共通モーダル（画面全体の真ん中に固定） */
.modal-bg {
  display: none;
  position: fixed; /* PC画面全体を覆う */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  z-index: 2000;
}

.modal {
  background: #fff;
  width: 92%;
  max-width: 390px; /* スマホ枠の中に収まる横幅 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 画面の真ん中に配置 */
  padding: 20px;
  border-radius: 16px;
  text-align: left;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  box-sizing: border-box;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}