@charset "utf-8";

body{
  background-color: #ffffff;
  font-size: 16px;
  font-family: 'arial','Hiragino Sans','Meiryo',sans-serif;
  color: #333333;
  position: relative;
  }
#header{
    margin: 0 auto 44px;
    max-width: auto;
}
#header h1{

  margin: 0;                 /* 余白リセット */

  background-color: #ffffff;

  font-size: 18px;

  font-weight: bold;

  display: flex;             /* 中身をflexで配置 */

  justify-content: center;   /* 左右中央 */

  align-items: center;       /* 上下中央 */

  height: 100px;              /* ヘッダーの高さ（好みで調整） */

}


#footer{
    position: fixed;
    bottom: 0;  
    width: 100%;
    background-color: #cdcac4;
    color: #ffffff;
    text-align: center;
    padding: 14px 10px 20px;
}
.menu-icon {
    font-size: 32px;
    cursor: pointer;
    user-select: none;
  }
  .gMenu {
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 99;
  }
  .gMenu .menu-icon {
    cursor: pointer;
    position: absolute;
    left: 10px;
    top: 18px;
    padding-top: 30px;
    height: 50px;
  }
  /* メニューアイコン（三本線）の真ん中の線です */
.gMenu .menu-icon .navicon {
    background: #000000; /* 色は自由に変更可能です */
    display: block;
    height: 4px; /* 太さ */
    width: 45px; /* 長さ */
    position: relative;
    transition: background .4s ease-out; /* 形が変わる時のアニメーション */
  }
  /* メニューアイコン（三本線）の上と下の線を疑似要素で追加 */
  .gMenu .menu-icon .navicon::before,
  .gMenu .menu-icon .navicon::after {
    background: #000000; /* 色は自由に変更可能です */
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .4s ease-out; /* 形が変わる時のアニメーション */
    width: 100%;
  }
  .gMenu .menu-icon .navicon::before {top: 15px;} /* 位置を上にずらしています */
  .gMenu .menu-icon .navicon::after {top: -15px;} /* 位置を下にずらしています */
  /* 表示されるメニューです */
  .gMenu .menu {
    background-color: rgba(245, 198, 127, 0.9);
    overflow: hidden;
    max-height: 0; /* ★最初は高さを0にして非表示状態に */
    transition: max-height .6s; /* 表示されるときのアニメーション */
    text-align: center;
  }
  /* メニュー部分のデザインです */
  .gMenu .menu li:first-of-type {
    padding-top: 50px;
  }
  .gMenu .menu li a {
    display: block;
    padding: 24px 20px;
    text-decoration: none;
    text-transform: uppercase;
  }
  .gMenu .menu li a:hover {
    background-color: #f4f4f4;
  }
  /* チェックボックスは常に非表示です */
  .gMenu .menu-btn {
    display: none;
  }
  /* ▼▼▼以下はチェックボックスがONの時の状態です▼▼▼ */
  .gMenu .menu-btn:checked ~ .menu {
    max-height: 400px; /* ★チェックボックスがオンの時高さを400pxにして表示させます */
    transition: max-height .6s;
  }
  /* メニューボタンの中央の線を非表示に */
  .gMenu .menu-btn:checked ~ .menu-icon .navicon {background: transparent;}
  
  /* メニューボタンの上下の線を45度傾けて✕印を作ります */
  .gMenu .menu-btn:checked ~ .menu-icon .navicon::before {transform: rotate(-45deg);top: 0;}
  .gMenu .menu-btn:checked ~ .menu-icon .navicon::after {transform: rotate(45deg);top: 0;}

  /* メニュー内フォームの調整 */
.gMenu .menu li {
    padding: 16px 20px;
    text-align: center;
    color: #333;
  }
  
  .gMenu .menu label {
    margin-right: 10px;
    font-weight: bold;
  }
  
  .gMenu .menu select {
    padding: 5px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #aaa;
  }
  
  /* トグルスイッチデザイン */
  .switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
  }
  
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0;
    right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 20px; width: 20px;
    left: 4px; bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
  }
  
  .switch input:checked + .slider {
    background-color: #66bb6a;
  }
  
  .switch input:checked + .slider:before {
    transform: translateX(22px);
  }
  
  #credit-box {
    position: absolute;
    right: 15px;
    top: 10px;
    width: 120px;
    height: 80px;
    border: 2px solid #333;
    border-radius: 8px;
    background-color: #ffffff;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 4px 6px;
    box-sizing: border-box;
  }
  
  /* ▼「単位」文字（右下・やや小さめ） */
  #credit-label {
    font-size: 24px;
    color: #333333;
  }

  #credit-total {
    font-size: 48px;   /* 好きな大きさに変更 */
    font-weight: bold; /* 太字にしたいなら */
}