/* CSS Document */

/*================================================
 *  CSSリセット
 ================================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
body {
	font-size:30px;
	color:#333;
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-style: normal;
	line-height:1.6;
	background:#fff;
}
img{
	vertical-align:top;
}
.dai{
	text-align:center;
}

.header{
	background:#A98B67;
	.header_logo{
		padding:10px;
	}
	.header_img{
		width:100%;
		video{
			width:100%;
		}
	}
}
.top{
	background:#EEE7DD;
	.top_guide{
		max-width:1500px;
		margin:0px auto;
		padding:100px 0;
		text-align:center;
		span{
			font-weight:bold;
		}
	}
	.top_topic{
		max-width:1500px;
		margin:0 auto;
		padding-bottom:100px;
		.topics{
			display:flex;
			justify-content: space-between;
			font-size:50%;
			padding-top:50px;
			a{
				display:block;
				text-decoration:none;
				color:#333;
				transition:all 0.3s;
				box-shadow:0px 0px 3px #aaa;
				&:hover{
					box-shadow:0px 0px 1px #aaa;
				}
			}
			div{
				width:23%;
				.gazo{
					width:100%;
					max-height:230px;
					overflow:hidden;
					img{
						width:100%;
					}
				}
				.bun{
					padding:20px 10px;
					width:100%;
					box-sizing:border-box;
					max-height:70px;
					p{ 
						overflow: hidden;
					}
				}
				&:not(:has(.gazo)) .bun{
					max-height:300px;
				}
				&:has(div){
					box-shadow:0px 0px 1px #aaa;
					position:relative;
					&:hover:before{
						content:"";
						position:absolute;
						top:0;
						left:0;
						display:block;
						width:100%;
						height:100%;
						background:#fff;
						opacity:0.3;
					}
				}
			}
		}
	}
}
.insta{
	background:#DED1BE;
	.innr{
		max-width:1500px;
		margin:0 auto;
		padding:100px 0;
		position:relative;
		padding-bottom: 76px;
		&:after{
			content:"";
			display:block;
			position:absolute;
			width: 251px;
            height: 59px;
            background:#DED1BE;
            left: 50%;
            transform: translateX(-50%);
            bottom: 75px;
			z-index:0;
		}
	}
}
.eapps-widget-toolbar-panel-wrapper{
	display:none;
}
.eui-widget-title{
	font-family: "Charm", cursive;
	font-weight: 400;
	font-style: normal;
	font-size: 45px !important;
    padding-bottom:50px !important;
	padding-top:0 !important;
}
.eapps-instagram-feed-posts-grid-load-more-visible{
	font-size:20px !important;
	height:50px !important;
}
.footer{
	background:#A98B67;
	.innr{
		max-width:1500px;
		margin:0 auto;
		padding:100px 0 50px 0;
		display:flex;
		.status,.map{
			width:50%;
			box-sizing:border-box;
			iframe{
				width:100%;
			}
		}
		.status{
			padding:0 50px;
			font-size:25px;
			color:#f1f1f1;
			p{
				padding:10% 0;
				font-family: "LINE Seed JP", sans-serif;
				font-weight: 400;
				font-style: normal;
				font-size: 90%;
                max-width: 380px;
                display: block;
                width: 100%;
                margin: auto;
			}
			img{
				max-width:100%;
			}
		}
	}
}
@media only screen and (max-width:1500px) {
	.insta .innr{
		margin:0 1px;
	}
}
@media only screen and (max-width: 767px) {
	body {
		font-size:90%;
	}
	.top .top_topic{
		margin:0 1%;
		.topics{
			font-size:70%;
			flex-wrap:wrap;
			padding-top:25px;
			div{
				width:48%;
				&:has(div){
					margin-top:25px;
				}
			}
		}
	}
	.insta .innr{
		margin:0 1%;
	}
	.footer .innr{
		margin:0 1%;
		flex-wrap:wrap;
		.status,.map{
			width:100%;
			iframe{
				width:100%;
			}
		}
		.status{
			padding:0;
			p{
				font-size: 90%;
                max-width:100%;
			}
		}
	}
}

.topics_read{
	position:fixed;
	background: rgba(0, 0, 0, 0.8);
	width:100%;
	max-height:100%;
	z-index:10;
	overflow-x:auto;
	.sheet{
		width: 100%;
		height:calc(100% + 60px);
		min-height:100vh;
		padding-top:60px;
		max-width: 640px;
		margin: 0 auto;
		position: relative;
		box-sizing: border-box;
		z-index: 3;
		img{
			width:100%;
		}
		p{
			background:#fff;
			padding:16px 12px 24px;
			font-size:14px;
			color:#000;
		}
	}
}
.topics_close{
	display: inline-block !important;
	position: fixed;
	top: 20px;
	left: 50%;
	width: 32px;
	height: 32px;
	margin-left: 332px;
	cursor: pointer;
	z-index:12;
	opacity: .7;
	transition: opacity .25s ease, transform .25s ease;
	background: none;
	border: none;
	outline: none;
	&:before,&:after{
		content: '';
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		border-radius: 10px;
		background: #fff;
		transform: rotate(45deg);
	}
	&:before{
		width: 24px;
		height: 2px;
		margin: -1px 0 0 -12px;
	}
	&:after{
		width: 2px;
		height: 24px;
		margin: -12px 0 0 -1px;
	}
}
@media only screen and (max-width: 767px) {
    .topics_close{
        opacity: 1;
        left: 12px;
        top: 14px;
        margin: 0;
		&:before,&:after{
			background: #000;
		}
	}
	.btn_cls{
		position: fixed;
        top:0px;
		z-index:11;
		width:100%;
		box-sizing:border-box;
		height:60px;
		background:#f1f1f1;
		box-shadow:1px 0px 3px #333;
	}
	.topics_read{
		top:60px;
		.sheet{
			padding-top:0;
		}
	}
}