/* ボタン（デザインはお好みで） */
.my_modal_btn{
	display: block;
	width: auto;
	padding: 8px;
	border: 2px solid #fff;
	background: repeating-linear-gradient(-45deg, #2baa64, #2baa64 130px, #009944 0px, #009944 300px);
	color: #fff;
	font-size: 0.95em;
	box-shadow: 1px 1px 3px #aaa;
	border-radius: 5px;
	text-align: center;
	cursor: pointer;
}
.my_modal_btn:hover {
	background: repeating-linear-gradient(-45deg, #f9aa00, #f97e00 130px, #f96700 0px, #f96700 300px);
}

/* チェックボックスを非表示 */
#my_modal1,
#my_modal2,
#my_modal3,
#my_modal4,
#my_modal5,
#my_modal6{
	display: none;
}
/* モーダル */
.my_modal_body1{
	display: none;
	position: fixed;
	z-index: 100000;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	display: none;
	background-color: #FFF;
	overflow: hidden;
	overflow-y: auto;
	/* スマホ用スクロール */
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
	/* お好みで */
	width: 90%;
	max-height: 80%;
	max-width: 600px;
}
.my_modal_body1::-webkit-scrollbar {
    width: 5px;
    background-color: #ddd;
}
.my_modal_body1::-webkit-scrollbar-thumb {
    background: #aaa;
    width: 3px;
    border-right: 1px solid #666;
    border-bottom: 1px solid #333;
}
/* モーダル内ヘッダー */
.my_modal_header{
/*	padding: 15px 10px;
	background-color: #23282D;
	color: #FFF;
	font-weight: bold;
	position: -webkit-sticky;*/
	position: sticky;
	top: 0;
	z-index: 1;
	text-align: center;
}

/* クローズアイコン */
.my_modal_close{
	position: absolute;
	width: 20px;
	height: 20px;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	cursor: pointer;
}
.my_modal_close_icon{
	display: inline-block;
	width: 20px;
	height: 20px;
	position: relative;
	cursor: pointer;
}
.my_modal_close_icon span::before,
.my_modal_close_icon span::after{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 84%;
	height: 16%;
	margin: -8% 0 0 -42%;
	background: #FFF;
}
.my_modal_close_icon span::before{
	transform: rotate(-45deg);
}
.my_modal_close_icon span::after{
	transform: rotate(45deg);
}

/* コンテンツ表示 */
.my_modal_content{
	padding: 15px 45px;
	font-size: 0.85em;
}
.my_modal_content div > img {
	border: 3px solid #fff;
	box-shadow: 1px 1px 3px #ccc;
}

/* 材料 */
.my_modal_content div > dl {
	float: right;
	width: 230px;
	padding: 10px;
	background-color: #ffffdd;
	font-size: 0.85em;
	clear:both;
}
.my_modal_content div > dl dt {
	float: left;
	padding: 1px 5px 0px;
}
.my_modal_content div > dl dd {
	padding: 1px 5px 0px;
	text-align: right;
	border-bottom: 1px dotted #ccc;
}

/* 作り方 */
.my_modal_content > ol {
	margin-left: 5px;
}
.my_modal_content > ol li {
	padding-left: 2em;
	text-indent: -2em;
	line-height: 1.3em;
}

/* prev next */
.p-n {
	width: 600px;
}
.p-n a {
	position: absolute;
	display: block;
	width: 25px;
	height: 25px;
	top: 50%;
	font-weight: 700;
	background-color: #80cf8f;
	color: #fff;
	font-size: 1.05em;
	border-radius: 50px;
	text-decoration: none;
	text-align: center;
}
.p-n a.prev {
	left: 5px;
	letter-spacing: 4px;
}
.p-n a.prev:before {
	content: "\FF1C";
}
.p-n a.next {
	right: 5px;
	letter-spacing: -4px;
}
.p-n a.next:before {
	content: "\FF1E";
}

#menu4p:checked ~ #menu3 {
	display:block;
}


/* page */
.my_modal_body1 > p.tac {
	color: #1a7d42;
	font-size: 0.8em;
}

@media screen and (max-width:600px){
	.my_modal_content div > img {
		display: block;
		margin: 0 auto;
	}
	.my_modal_content div > dl {
		display: block;
		float: none;
		margin: 0 auto;
		margin-top: 10px;
	}
}


/* 背景を暗くする */
.my_modal_overlay{
	display: none;
	position: fixed;
	z-index: 90000;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	background-color: #111;
	opacity: 0.7;
	cursor: pointer;
	animation: fadeIn 0.2s ease 0.3s 1 normal;
}

/* チェック時オーバーレイとコンテンツを表示 */
#my_modal1:checked ~ #menu1, #my_modal1:checked ~ #bg_menu1,
#my_modal2:checked ~ #menu2, #my_modal2:checked ~ #bg_menu2,
#my_modal3:checked ~ #menu3, #my_modal3:checked ~ #bg_menu3,
#my_modal4:checked ~ #menu4, #my_modal4:checked ~ #bg_menu4,
#my_modal5:checked ~ #menu5, #my_modal5:checked ~ #bg_menu5,
#my_modal6:checked ~ #menu6, #my_modal6:checked ~ #bg_menu6 {
	display: block;
	animation: fadeIn 0.2s ease 0.3s 1 normal;
}