/*ポプアップ*/
.popup_wrap input {
display: none;
}
.popup_overlay {
display: flex;
justify-content: center;
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 99;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s, transform 0s 0.5s;
transform: scale(0);
background: rgba(12,35,43,0.40);	/*背景色*/
}
.popup_trigger {
position: absolute;
width: 100%;
height: 100%;
}
.popup_content {
position: relative;
align-self: center;
width: 75%;
max-width: 800px;
box-sizing: border-box;
background: #EDF9FD;
line-height: 1.4em;
transition: 0.5s;
border-radius: 10px;
box-shadow: 0 0 5px rgba(94, 94, 94, 0.7);
padding: 30px 0;
}
.close_btn {
position: absolute;
top: 14px;
right: 10px;
font-size: 140%;
font-weight: bold;
cursor: pointer;
color: deeppink;
line-height: 0.9;
}
.close_btn span{
font-size: 40%;
font-weight: 300;
}
.popup_wrap input:checked ~ .popup_overlay {
opacity: 1;
transform: scale(1);
transition: opacity 0.5s;
}
.open_btn {
color: black;
border-radius: 3px;
cursor: pointer;
transition: .3s ease;
padding:0 0 20px 0;
float: right;
}
.pop_b{
font-weight: bold;
text-decoration: underline;
color: #0c7a9e;
padding: 1px 5px;
}
.pop_b:hover{
transition: .3s ease;
border-radius: 5px;
background: rgba(5, 163, 216, 0.2);	/*背景色*/
}
.popup_content p{
width: 80%;
margin: 0 auto;
text-align: center;
padding: 25px;
font-weight: bold;
}
.popup_content a{
color: #0c7a9e;
font-weight: bold;
text-decoration: none;
background: #fff;	/*背景色（古いブラウザ用）*/
background: linear-gradient(#fff 50%, #eee);	/*背景色グラデーション*/
text-align: center;	/*文字をセンタリング*/
padding: 8px 30px;	/*上下、左右へのメニュー内の余白*/
margin: 20px 0;	/*上、左右、下へあけるメニューの外側への余白*/
border: 2px solid #0c7a9e;	/*枠線の幅、線種、色*/
border-radius: 15px;	/*角丸のサイズ*/
line-height: 1.6;		/*行間。少し狭くする。*/
-webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、広げる範囲、rgb指定での色。0,0,0は黒のことで、0.2が透明度20%の事。*/
box-shadow: 0px 2px 4px rgba(0,0,0,0.2);			/*同上*/
}
/*マウスオン時*/
.popup_content a:hover {
background: rgba(5, 163, 216, 0.2);	/*背景色*/
position: relative;
left: 1px;	/*マウスオン時い左から1pxずらす*/
top: 1px;	/*マウスオン時い上から1pxずらす*/
}
/*メニュー*/


.menu-checkbox {
  display: none;
}
.drawer-menu{
	display: none;
}
@media screen and (max-width: 768px){ 
.popup_content {
width:90%;
}
	
.drawer-menu{
	display: block;
}
/* メニューボタンの装飾 */
.menu-button {
  display: block;
  position:absolute;
  top: 26px;
  right: 20px;
  z-index: 200;
  height: 30px;
  width: 40px;
  cursor: pointer;
	
}
.menu-button::before,
.menu-button::after {
  content: '';
  transition: .3s;
}
.menu-button::before,
.menu-button::after,
.menu-button span {
  display: block;
  position: absolute;
  left: 0;
  height: 3px;
  width: 100%;
  margin-top: -2px;
  background-color: #0c7a9e;
	  
}
.menu-button::before {
  top: 0;
}
.menu-button::after {
  bottom: 0;
	content: 'menu';
	color: #0c7a9e;
	
}
.menu-button span {
  top: 50%;
	
}

/* メニューボタンのアニメーション */
.menu-checkbox:checked ~ .menu-button::before {
  top: 50%;
  transform: rotate(45deg);

}
.menu-checkbox:checked ~ .menu-button::after {
 display: none;

}
.menu-checkbox:checked ~ .menu-button span {
   top: 50%;
  transform: rotate(-45deg);

}

/* ドロワーメニューの装飾 */
.drawer-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  height: 100%;
  width: 250px;
  transform: translateX(-100%);
  transition: .6s;
  background-color: #fff;
}
.drawer-menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.drawer-menu li {
  border-bottom: 1px dotted #05A2D8;
}
.drawer-menu a {
  display: block;
  padding: 15px;
  color: #000000;
  text-decoration: none;
}
	.drawer-menu a:hover{
		background: rgba(5, 163, 216, 0.2);
		color: #05A2D8;
		font-weight: bold;
			
	}

/* ドロワーメニューの開閉 */
.menu-checkbox:checked ~ .drawer-menu {
  transform: translateX(0);
}

/* ドロワーメニューの背景 */
.menu-background {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  height: 100%;
  width: 100%;
  background-color: rgba(5, 163, 216, 0.2);
  cursor: pointer;
}
.menu-checkbox:checked ~ .menu-background {
  display: block;
}
		
	
}