body{
    margin: 0;
    text-align: center;
    background-color: #fff;
}

img{
    align-items: center;
    vertical-align: bottom;
    width: 100%; /* カスタマイズしてください */
    max-width: 800px;
   
}
footer{
    background-color: #fff;
	  color: #1a1a1a;
    align-items: center;
    font-size: 8pt;
}

.c-header {
    align-items: center;
    background-color: #fff; /* カスタマイズしてください */
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem; /* カスタマイズしてください */
    width: 100%;
  }
  
  .c-header__logo {
    color: #000; /* カスタマイズしてください */
    width: 100px; /* カスタマイズしてください */
    text-decoration: none;
  }
  
  .c-header__list {
    box-sizing: border-box;
    display: flex;
    margin: 0;
    padding: 0;
  }
  
  .c-header__list-item {
    list-style: none;
    text-decoration: none;
  }
  
  .c-header__list-link {
    color: #000; /* カスタマイズしてください */
    display: block;
    margin-right: 20px; /* カスタマイズしてください */
    text-decoration: none;
    padding: 10px 0px; /* カスタマイズしてください */
  }
  
  .c-header__list-link:hover {
    filter: opacity(0.6); /* カスタマイズしてください */
  }
  
  .c-hamburger-menu {
    position: relative;
  }
  
  @media screen and (max-width: 750px) {
    .c-hamburger-menu__list {
      background-color: #eeeeee; /* カスタマイズしてください */
      align-items: flex-start;
      display: flex;
      flex-direction: column;
      left: 0;
      padding: 2rem; /* カスタマイズしてください */
      position: absolute;
      transform: translateX(-100%);
      transition: 0.3s; /* カスタマイズしてください */
      top: 100%;
      width: 100%;
    }
  
    #hamburger:checked ~ .c-hamburger-menu__list {
      transform: translateX(0%);
      transition: 0.3s;
    }
  }
  
  .c-hamburger-menu__input {
    display: none;
  }
  
  .c-hamburger-menu__bg {
    background-color: #000; /* カスタマイズしてください */
    cursor: pointer;
    display: none;
    height: 100vh;
    left: 0;
    opacity: 0.4; /* カスタマイズしてください */
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
  }
  
  #hamburger:checked ~ .c-hamburger-menu__bg {
    display: block;
  }
  
  .c-hamburger-menu__button {
    display: none;
  }
  
  @media screen and (max-width: 750px) {
    .c-hamburger-menu__button {
      align-items: center;
      appearance: none;
      background-color: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 5px; /* カスタマイズしてください */
      height: 32px; /* カスタマイズしてください */
      justify-content: center;
      width: 32px; /* カスタマイズしてください */
    }
  }
  
  .c-hamburger-menu__button-mark {
    background-color: #000; /* カスタマイズしてください */
    display: block;
    height: 1px; /* カスタマイズしてください */
    transition: 0.3s; /* カスタマイズしてください */
    width: 20px; /* カスタマイズしてください */
  }
  
  @media screen and (max-width: 750px) {
    #hamburger:checked
      ~ .c-hamburger-menu__button
      .c-hamburger-menu__button-mark:nth-of-type(1) {
      transform: translate(2px, 1px) rotate(45deg); /* カスタマイズしてください */
      transform-origin: 0%; /* カスタマイズしてください */
    }
    #hamburger:checked
      ~ .c-hamburger-menu__button
      .c-hamburger-menu__button-mark:nth-of-type(2) {
      opacity: 0;
    }
    #hamburger:checked
      ~ .c-hamburger-menu__button
      .c-hamburger-menu__button-mark:nth-of-type(3) {
      transform: translate(2px, 3px) rotate(-45deg); /* カスタマイズしてください */
      transform-origin: 0%; /* カスタマイズしてください */
    }
    .fixed {
        position: fixed;
        top: 0; /*ページ上部の固定する位置*/
        width: 100%;
        z-index: 9999;
    }


/*
    
    @media (max-width: 991.98px) {




      .floatingtop-banner {
        display: block;
        position: fixed;
        z-index: 9999;
        bottom: 0;
        width: 70px;
        right: 0;
        align-items: center;
        margin-bottom: 150px;
        margin-right: 2px;
    }
        .floating-banner {
            display: block;
            position: fixed;
            z-index: 9999;
            bottom: 0;
            width: 100%;
            right: 0;
            align-items: center;
            margin-bottom: 45px;
            margin-right: 2px;
        }
    
        .floating-banner a.banner {
            text-decoration: none;
            height: 3em;
            color: #fff;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.25em;
        }
    
        .floating-banner a.banner i {
            margin-right: 0.2em;
        }
    
    }
    
    
    @media (min-width: 992px) {
    
        .floating-banner {
            display: block;
            position: fixed;
            z-index: 9999;
            bottom: 70px;
            right: calc( (100vw - 1110px) / 2 - 175px);
        }
    
        .floating-banner a:hover {
            opacity: 0.7;
        }
    
        .floating-banner a.banner {
            display: block;
            width: 150px;
            height: 150px;
            background-image: url(https://lightning-pale.hp1.work/wp-content/uploads/2021/08/g3-pro-pack-bnr-2.png);
            background-size: contain;
            text-indent: -9999px;
        }
    
        */
      
    }
    
    .floating-banner {
      position: fixed; /* バナーを追従させる */
      z-index: 99999; /* 他の要素の下に隠れないように */
      bottom: 0; /* バナーの上下の位置 */
      right: 0; /* バナーの左右の位置 */
      width: 500px; /* バナーの横幅 */
    }
    .floating-banner__image {
      max-width: 100%; /* 画像の最大幅 */
    }
    @media screen and (max-width: 990px) {
      /* タブレット用のブレイクポイントを指定 */
      .floating-banner {
        display: block; /* 消していたバナーを表示させる */
        width: 50vw; /* スマホの画面幅いっぱいにバナーを表示 */
       /*  display: none; タブレットサイズ以下でPC用のバナーを非表示に */
      }
    }
    @media screen and (max-width: 560px) {
      /* スマホ用のブレイクポイントを指定 */
      .floating-banner {
        display: block; /* 消していたバナーを表示させる */
        width: 100vw; /* スマホの画面幅いっぱいにバナーを表示 */
      }
    }