@charset "utf-8";

/*-------------------------------------------------------------------
	IDENTIFICATION DIVISION.
	Version.												1.4.1.2;
	PROGRAM-ID.									"INDEX"
-------------------------------------------------------------------*/

/*****************************************************
	DATA DIVISION.
	WORKING-STRAGE SECTION.
*****************************************************/




#index main section h2{
	text-align:center;
	margin-bottom:1em;
}


/*-------------------------------------------------------------------
	bxslider
-------------------------------------------------------------------*/
.bxslider{
	animation: fadein 2s;
	transition-delay:2s;
}
.bxslider li a{
	display: block;
	position: relative;
	transition: .3s;
}

.bxslider:hover li:not(:hover) a{
	filter:grayscale(70%);
}




/*-------------------------------------------------------------------
	message
-------------------------------------------------------------------*/
section.message p.image{
	float:right;
	margin-left:1em;
}

/*-------------------------------------------------------------------
	committed
-------------------------------------------------------------------*/
section.committed{
	padding:2em;
	background:url(../../images/index/background-committed.png) no-repeat top left;
	background-size:cover;
}

section.committed .view{
	padding:2em;
	width:auto;
	background:#fff;
	box-sizing:border-box;
}

section.committed .greeting{
	display:flex;
	align-items:center;
	margin-bottom:1.5em;
}
section.committed .greeting dl{
	position:relative;
	margin-right:1em;
}
section.committed .greeting dt{
	position:absolute;
	top:-80px;
	left:-140px;
}


section.committed p em{
	font-weight:bold;
	color:#c97d25;
}


/*-------------------------------------------------------------------
	snack
-------------------------------------------------------------------*/
section.snack{
	position:relative;
	padding:1em;
}

section.snack h2{
	position:absolute;
	top:2em;
}

section.snack .view{
	display:flex;
	align-items:center;
}

section.snack .view .image{
	margin-right:1em;
}

section.snack .view p em{
	font-weight:bold;
	color:#c97d25;
}


/*-------------------------------------------------------------------
	blog
-------------------------------------------------------------------*/
.blog li{
	margin-bottom:1em;
}

.blog li::before{
	content:attr(data-date);
	display:block;
	font-size:2.1rem;
}


.blog a{
	color:#6e2827;
}


.fbwrap{
	margin:0 auto;
	width: 100%;
}
   
.fb-page,
.fb-page span,
.fbwrap iframe{
	width: 100% !important;
}

/*-------------------------------------------------------------------
	instagram
-------------------------------------------------------------------*/
.instagram ul{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.instagram ul li{
	position: relative;
	width:24%;
	aspect-ratio: 1/1;
	margin-bottom:2%;
	overflow:hidden;
}
.instagram li img{
	width:100%;
	height:100%;
	object-fit:cover;
	transition: .4s;
}

.instagram li a:hover img{
	transform: scale(1.2);
	transition: .4s;
}




/*-------------------------------------------------------------------
	calendar
-------------------------------------------------------------------*/

.calendar .cal{
	margin:0 auto;
}
.calendar iframe {
	width: 100%;
	aspect-ratio: 16/9;
}

/*-------------------------------------------------------------------
	map
-------------------------------------------------------------------*/
.map p{text-align:center;}

.map .gmap{
	border-radius:40px;
	overflow:hidden;
}
.map iframe {
	width: 100%;
	aspect-ratio: 16/9;
}




/*-------------------------------------------------------------------
	smartphone
-------------------------------------------------------------------*/
@media only screen and (max-width : 784px) {

header{
	padding-bottom:60px;
}
	
header p.catch{
	width:75%;
	margin:0 auto;
	margin-bottom:1em;
}
header p.catch img{width:100%;}


header .bx-wrapper{margin-bottom:0;}

main{
	margin:0 auto;
	padding:1em 0 3em 0;
	font-size:1.6rem;
	background:#e0ebc7;
}


main section.facebook h2 img,
main section.instagram h2 img,
main section.blog h2 img,
main section.calendar h2 img{
	height:1.5em;
}


/*-------------------------------------------------------------------
	message
-------------------------------------------------------------------*/
section.message p.image{
	float:right;
	margin-left:1em;
	width:40%;
}


/*-------------------------------------------------------------------
	committed
-------------------------------------------------------------------*/
section.committed{
	padding:1.5em;
}

section.committed .view{
	padding:1em;
	width:auto;
	background:#fff;
	box-sizing:border-box;
}

section.committed .greeting{
	display:flex;
	align-items:center;
	margin-bottom:1.5em;
}
section.committed .greeting dl{
	position:relative;
	margin-top:-3em;
	margin-right:0.5em;
	width:25vw;
}
section.committed .greeting dt{
	position:relative;
	top:0;
	left:-0.8em;
	width:26vw;
	margin-bottom:1em;
}


section.committed p.txt-right img{
	width:42%;
}


/*-------------------------------------------------------------------
	snack
-------------------------------------------------------------------*/
section.snack{
	position:relative;
	padding:1em;
}

section.snack h2{
	position:absolute;
	top:3em;
	width:55%;
}

section.snack .view{
	display:flex;
	align-items:center;
	flex-direction:column;
}

section.snack .view .image{
	margin-right:0;
}




}