@charset "utf-8";


.modal_bt {
	display: none;
}

#modal1 {
	display: none;
}


@media screen and (max-width:640px){
	
/* モーダルここから */
#modal1 {
	/* [disabled]display: inherit; */
}
.modal_bt {
	display: inherit;
	position: absolute;
	padding-top: 0px;
	left: auto;
	top: 24px;
	right: 52px;
}
.modal-open img {
	margin-bottom: 0px;
	padding-bottom: 0px;
	width: 32px;

}

#modal1 ul {
	padding: 0px;
	margin: 0;
	list-style-type: none;
}

#modal1 ul li {
	border-bottom: 1px solid #d4d4d4;
	width: 100%;
	text-align: left;
}
#modal1 ul li a {
	padding-top: 16px;
	padding-bottom: 16px;
	text-decoration: none;
	color: #655d5b;
	font-weight: normal;
	display: block;
	font-size: 15px;
	padding-left: 16px;
	background-image: url(images/arrow_right1.svg);
	background-repeat: no-repeat;
	background-position: 95% center;
	background-size: 8px auto;
}
#modal1 ul li a span {
	color: #AF7D66;
	margin-left: 0px;
	display: block;
	font-size: 10px;
}
.modal-overlay {
    z-index:2; /*デモではheader,footerをz-index:1にしたので それより上げています*/
    display:none; /*jsでフェードインされるまでdisplay:none*/
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh; /*100vhでビューポートの高さいっぱいになります*/
    background-color:rgba(0,0,0,.5)} /*これは好きな色・透明度で*/
a.modal-open:hover {cursor:pointer} /*カーソルをポインタに*/
.modal-open {
	position: absolute;
}
.modal-content {
	position: fixed;
	display: none; /*jsでフェードインされるまでdisplay:none*/
	z-index: 100; /*オーバーレイより上に*/
	margin-top: 4%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 4%;
	padding-top: 0%;
	padding-bottom: 0%;
	border-radius: 0px;
	background-color: #FFF;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 80%;
	text-align: center;
	border-bottom: 8px solid #e79e58;
}
.modal-head {
	background-color: #e79e58;
	color: #FFFFFF;
	display: block;
	width: 100%;
	padding-top: 8px;
	padding-bottom: 8px;
}

.modal-content img {width:auto;max-height:75vh}
.modal-content h1 {font-size:120%; margin-bottom:0.5em}
.modal-content p {max-width:565px; text-align:left}
a.modal-close { /*クローズボタンは何でも好きなスタイルでOK*/
	position: absolute;
	top: 8px;
	right: 8px;
	color: #009768;
	font-size: 24px;
	line-height: 1;
	font-weight: bold;
	text-decoration: none;
	background-color: #FFFFFF;
}
a.modal-close:hover {cursor:pointer} /*カーソルをポインタに*/

.box .modal-open {
	color: #FFFFFF;
	border-radius: 8px;
	padding: 16px;
	background-color: #B1292C;
	display: inline-block;
}

.box h2 {
	margin-top: 32px;
}

.box h1 {
	margin-top: 48px;
}
.box p {
	margin-top: 32px;
}
	

	
	
	
	 /* ハンバーガーアイコン下のテキスト */
#h-text {
	width: 32px;
	font-size: 10px;
	margin-top: 0px;
	color: #8DC21F;
	text-align: center;
	display: block;
	font-weight: 500;
}

/*	ハンバーガーアイコンの作成　*/
#h-icon {
	position:	relative;
	display:	block;
	width:		32px;
	height:		24px;
	top:		0px;
	left:		0px;
	background-color:#978A4A;	/* アイコンの線の色 */
}

/* ハンバーガーアイコンの白線部分作成 */
#h-icon:before, #h-icon:after {
	position:	absolute;
	left:		0;
	content:	"";
	width:		100%;
	border-top:	6px solid #000000; 
}
#h-icon:before {
	top:		4px;
}
#h-icon:after {
	bottom:		4px;
}




	

	/* モーダルここまで */
	
	
}