html{
  font-family: 'IBM Plex Sans JP'
}

body{
  margin: 0;
  padding: 0;
  min-height: 100%;
  height: 100%;
  background-image: url(/parts/back.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 3rem;
    background: #fdb4eb;
  }
  
.footer{
    background: #fdb4eb;
    margin: 15px 0 0 0;
  }

  .footer2{
  border: 2px solid #fdb4eb
}

.C-mark{
    text-align: center;
}

#url-D{
  color: black;
  text-decoration: none;
}

.fotter-flex{
  display: flex;
justify-content: center;
align-items: center;
}

#url-S{
  color: black;
  text-decoration: none;
  display: block;
  text-align: center;
  margin: 20px 2% 0 2%;
}

.footer-menu-main{
display: flex;
align-items: flex-start;
justify-content: center;
}

.footer-menu-1{
  display: block;
  margin-right: 5%;
}

.footer-menu-2{
  display: block;
  margin-left: 5%;
  }

#footer-menu-style{
  list-style: none;
  background-color: #fdb4eb;
}

/* チェックボックスは非表示に */
.drawer-hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer-open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 98;/* 重なり順を一番下に */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}

/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
  bottom: 8px;
}

/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
  top: 8px;
}
  
/* メニューのデザイン*/
.drawer-content {
  width: 70%;/* ここの割合を小さくすると閉じる部分の領域が広がる */
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%;/* メニューを画面外へ */
  z-index: 10001;/* 重なり順を一番上に */
  background: #fdb4eb;
  transition: .5s;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
  left: 0;/* メニューを画面内へ */
}

/* メニューを閉じるための要素のデザイン*/
.drawer-close {
  width: 100%;
  height: 100%;
  background: rgba(252, 252, 252, 0.685);
  position: fixed;
  top: 0;
  left: 100%;/* 閉じるための要素を画面外へ */
  z-index: 10000;/* 重なり順をメニューより下に*/
  transition: .5s;
}

#drawer-check:checked ~ .drawer-close {
  left: 0;/* 閉じるための要素を画面内へ */
}

/*-- PC版表示CSS  --*/
.right{
    display:block;
  }
  .drawer{
    display:none;
  }
  
  
  /*-- スマホ版表示CSS  --*/
  @media screen and (max-width: 768px){
    .right{
      display:none;
    }
    .drawer{
      display:block;
    }
  }