@charset "UTF-8";
/* トグルボタン */
#togglenav {
  display: none;
}
#togglenav:checked + .togglenav-btn {
  background-color: #1dcef8;
  border-radius: 50%;
}
#togglenav:checked + .togglenav-btn:before {
  font-family: 'Font Awesome 5 Free';
  content: "\f00d";
  font-weight: 900;
  font-size: 2em;
}
#togglenav:checked ~ .togglenav-bg {
  pointer-events: auto;
  background-color: rgba(0, 0, 0, 0.3);
}
.togglenav-btn {
  cursor: pointer;
  position: fixed;
  top: 18px;
  right: 10px;
  z-index: 2;
  width: 50px;
  height: 50px;
  color: #fff;
  background-color: #1dcef8;
  line-height: 50px;
  text-align: center;
  -webkit-transition: background-color .6s, -webkit-transform .6s;
  transition: background-color .6s, transform .6s;
	border-radius: 3px;
}
.togglenav-btn:before {
  font-family: 'Font Awesome 5 Free';
  content: "\f0c9";
  font-weight: 900;
  font-size: 2em;
}
/* トグルを押した際の背景 */
.togglenav-bg {
  cursor: pointer;
/* positionをabsoluteに変更 */
position: absolute; 
top: 0px;
right: 0px;
pointer-events: none;
z-index: 1;
width: 100%;
height: 100%;
transition: background-color .6s;
}
/* ドロワーメニュー */
.drawer {
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #e9f1f2;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform .4s;
  transition: transform .4s;
}
.drawer .drawer-menu {
  margin-top: 0;
  padding: 0;
  list-style-type: none;
}
.drawer .drawer-menu .drawer-menu-item {
  font-size: 14px;
  border-bottom: 1px solid white;
}
.drawer .drawer-menu .drawer-menu-item a {
  display: block;
  padding: 0.75em 2em;
  text-decoration: none;
  transition: background-color 0.4s;
  cursor: pointer;
  color: #431313;
}
.drawer .drawer-menu .drawer-menu-item a:hover {
  background-color: #c2f2e7;
  color: #666;
}
.drawer .drawer-menu .drawer-menu-item a:before {
  font-family: 'Font Awesome 5 Free';
  content: "\f787";
  font-weight: 900;
  font-size: 20px;
  margin: 0 0.5em 0 0;
    color: deeppink;
}
.drawer-menu-item1{list-style: none;}
.drawer .drawer-menu .drawer-menu-item1 a:before {
  font-family: 'Font Awesome 5 Free';
  content: "\f101";
  font-weight: 900;
  font-size: 1em;
  margin: 0 0.5em 0 0;
}


.drawer h3 {
  margin: 0 auto;
  padding: 1.5em 1em ;
  color: #412f2f;
  border-bottom: 1px solid white;
  background: #95e5e8;
}
#togglenav:checked ~ .drawer {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.card img{margin-left: 1em; box-shadow: 3px 5px 15px #ccc;}


/*Device: Desk Top*/
@media screen and (min-width:768px) {
  .Tmenu {
    display: none;
  }
    .drawer {
    width: 50%;
  }
}
/*Device: SmartPhone*/
@media screen and (max-width:414px) {
  .drawer {
    width: 100%;
  }
    .togglenav-btn {
  top: 15px;
}
}