html, body {/*ブラウザの初期設定*/
	width: 100%;
  	height: 100%;
  	margin: 0px;
  	padding: 0px;
  	flex-direction: column;
}

@media screen and (max-width: 650px){
  	.pc{display: none;}
	.sp{display: block;}
	.header1sp {
    	display: flex;
    	width:100%;
    	height: 50px;
    	background-color: rgb(220, 240, 250);
    	align-items: center;
  	}
	.homeimage{
		width: 50px;
		padding: 0px 0px ;
		/*border: solid #6df743;*/
	}
	.top{
		font-family: "Yuji Mai", serif;
		font-weight: normal;
		transition: 2s;
		border-radius: 10px;
	}
	.top:hover{
		background-color: rgb(200, 200, 200);
		border-radius: 10px;
	}
  .topsp{
 	  padding: 0% 5px;
	}
  .drawer-menu-toggle {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex-flow: column;
	  margin-left: auto;
	  width: 50px;
	  height: 100%;
	  cursor: pointer;
	}
	  /*三本戦*/
	  .drawer-menu-toggle .hamburger {  
	    height: 2px;
	    width: 30px;
	    background-color: #000000;
	    margin-bottom: 7.5px;
	  }
	  .drawer-menu-toggle .hamburger:last-child {
	      margin-bottom: 0;
	  }
	  /*出る量横の幅*/
	  .drawer-menu {
	      --drawer-menu-width: 200px;
	      --drawer-menu-header-height: 50px;    
	  }
	
	  .drawer-menu input#check {
	      display: none;
	  }
	
	  .drawer-menu .drawer-menu-contents .drawer-menu-toggle::before {
	      font-size: 30px;
	      content: "×";
	  }
	/*出てくるメニューの処理*/
	  .drawer-menu .drawer-menu-contents {
	      position: fixed;
	      display: flex;
	      flex-flow: column;
	      top: 0px;
	      right: calc(-1 * var(--drawer-menu-width));
	      width: var(--drawer-menu-width);
	      height: 100dvh;
	      background-color: #ddd;
	      transition: right 0.5s;
	    }
	
	  .drawer-menu .drawer-menu-contents .drawer-menu-header {
	      width: var(--drawer-menu-width);
	      height: var(--drawer-menu-header-height);
	  }
	
	  .drawer-menu input#check:checked ~ .drawer-menu-contents {
	    right: 0;
	  }
	
	  .drawer-menu .drawer-menu-contents .drawer-menu-header {
	      height: var(--drawer-menu-header-height);
	      background-color: var(--nav-color);
	      display: flex;
	      justify-content: flex-end;
	  }
	
	  .drawer-menu .drawer-menu-contents .drawer-menu-body {
	      display: flex;
	      flex-flow: column;
	  }
	
	  .drawer-menu .drawer-menu-contents .drawer-menu-body .drawer-menu-item {
	      font-size: 15px;
	      padding: 15px;
	      color: #000;
	      text-decoration: none;
	  }
	
	  .drawer-menu .drawer-menu-contents .drawer-menu-item:hover {
	      background-color: #999;
	  }
	
	  .drawer-menu input#check:checked ~ .backdrop {
	      content: "";
	      display: block;
	      background-color: rgba(0, 0, 0, 0.5);
	      position: fixed;
	      width: 100vw;
	      height: 100dvh;
	      top: 0;
	      left: 0;
	  }
}



@media screen and (min-width: 651px){
  .sp{display: none;}
  a{
    text-decoration:none;
    color: black;
  }
  nav li{
	list-style: none; /*箇条書きのてんを消す*/
  }

  
  .top {
    margin-right: auto;
    padding: 1.5pt 5pt; /*上下の空白*/
    transition: 2s;/*状態を徐々に変化される*/  
	font-family: "Yuji Mai", serif;
  	font-weight: 400;
  	font-style: normal;  
	border-radius: 10px;
  }
  .top:hover{
    /*マウスカーソルが上に来ると色が変わる*/
    background-color: rgb(200, 200, 200);
	border-radius: 10px;
  }
  .header1 {
    display: flex;
    width:100%;
    height: 50px;
    background-color: rgb(220, 240, 250);
    align-items: center;
	border-bottom: 1px solid rgb(200, 200, 200);
  }
  .nav1{
    display: flex;
    margin-left: auto;/*左側に空白を入れてブロックを右側に寄せる*/
  }

  .title {
    padding: 10px 5pt; /*上下の空白*/
	/*border-left: solid #ddd;*/
	position:relative;/*絶対値指定の親要素に必要*/
	border-radius: 10px;
    transition: 1s;/*状態を徐々に変化される*/
	display: block;
  }
  
  .title:hover{
    /*マウスカーソルが上に来ると色が変わる*/
    color: rgb(0, 0, 0);
    background-color: rgb(200, 200, 200);
	border-radius: 10px;
  }
  
  .menu-item {
    list-style: none;
    display: inline-block;
    padding: 10px;
  }
  .homeimage{
	width: 50px;
	padding: 0px 20px ;
	/*border: solid #6df743;*/
  }

  .header2 {
    display: flex;
    width:100%;
    height: 50px;
    background-color: #ffffff;
    align-items: center;
  }

  nav{
    display: flex;
    margin-left: auto;
  }
  .title1{
    list-style: none;
    display: inline-block;
    padding: 10px 5pt;
    color: white;
	border-radius: 10px;
	transition: 1s;
  }
    .title1:hover{
    /*マウスカーソルが上に来ると色が変わる*/
    color: rgb(105, 161, 210);
    background-color: rgb(203, 211, 216);
	border-radius: 10px;
  }
}

/*ここからフッター*/
footer{
    height: 50px;
    background-color: rgb(220, 240, 250);	
	width: auto;
  }
footer p{
	text-align: center;
	line-height: 50px;
}

a{
	text-decoration:none;
	color: black;
}

p,h1,h2,h3,h4,h5{
    font-family: "M PLUS 1p", serif;
}