@charset "utf-8";


/*--- About ---*/
#about { padding: 5em 0; background: url(../img/index/about_back.jpg) top center no-repeat; background-size: cover;}
#about .inner { max-width: 1090px; padding: 0 3.25%; background: url(../img/index/about_inner_back.png) top center no-repeat; background-size: 100% 100%;}
.pc #about .inner > img { display: block; float: left; width: 48%; max-width: 465px;}
.pc #about .aboutDiscription { float: right; width: 49%; max-width: 470px; padding-top: 2em;}
.pc #about .aboutDiscription h2 { overflow: hidden; height: 35px; margin-bottom: .2em; text-indent: 100%; white-space: nowrap; background: url(../img/index/about_heading.png) top left no-repeat; background-size: contain;}
.pc #about .aboutDiscription p { margin-bottom: 1em; padding-top: 1em; background: url(../img/index/news_border.png) top left repeat-x;}
.pc #about .aboutDiscription a { display: block; width: 100%; max-width: 470px; padding: .4em 0; font-size: 15px; font-size: 1.5rem; text-align: center; line-height: 1.6; border-radius: 15px; background: #f0e3a8;}
.pc #about .aboutDiscription a span { display: block; font-size: 15px; font-size: 1.5rem; color: #2d883f;}
.pc #about .aboutDiscription a span::before { display: inline-block; content: ""; width: 7px; height: 7px; margin-right: .25em; vertical-align: middle; background: url(../img/index/about_button_arrow.png) center no-repeat; background-size: contain;}

.sp #about .inner { padding: 1em 2% 3em; background: url(../img/index/about_inner_backSp.png) top left no-repeat; background-size: 100% 100%;}
.sp #about .inner > img { display: block; width: 100%; margin-bottom: 2em;}
.sp #about .aboutDiscription { width: 90%; margin: 0 auto; padding-top: 2%;}
.sp #about .aboutDiscription h2 { overflow: hidden; width: 80%; height: 25px; margin-bottom: .2em; text-indent: 100%; white-space: nowrap; background: url(../img/index/about_heading.png) top left no-repeat; background-size: contain;}
.sp #about .aboutDiscription p { margin-bottom: 1em; padding-top: 1em; background: url(../img/index/news_border.png) top left repeat-x;}
.sp #about .aboutDiscription a { display: block; width: 100%; max-width: 470px; margin: 0 auto; padding: .4em 0; font-size: 15px; font-size: 1.5rem; text-align: center; line-height: 1.6; border-radius: 10px; background: #f0e3a8;}
.sp #about .aboutDiscription a span { display: block; font-size: 15px; font-size: 1.5rem; color: #2d883f;}
.sp #about .aboutDiscription a span::before { display: inline-block; content: ""; width: 7px; height: 7px; margin-right: .25em; vertical-align: middle; background: url(../img/index/about_button_arrow.png) center no-repeat; background-size: contain;}


/*--- New ---*/
#new { padding: 6em 0; background: #fff;}
#new h2 { overflow: hidden; height: 35px; margin: 0 auto 3em; text-indent: 100%; white-space: nowrap; background: url(../img/index/news_h2Icon.png) top center no-repeat;}
#new .inner { max-width: 1024px; height: 26em;}
#new ul {}
#new ul li { padding-bottom: .5em; border-bottom: 1px dashed #cdc3ad; display: block; width: 100%;}
#new ul li > span { display: block; margin-left: 80px;}
#new ul li p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#new ul li a { font-weight: bold; text-decoration: underline;}
#new ul li a::before { display: inline-block; content: ""; width: 7px; height: 7px; vertical-align: middle; background: url(../img/index/news_arrow.png) center no-repeat; background-size: contain;}
#new ul li a span { font-weight: bold; text-decoration: underline;}
#new ul li p span { position: absolute; top: .3em; left: 0; width: 75px; text-align: center; font-size: 11px; font-size: 1.1rem; color: #fff;}
#new ul li p .event { background-color: #55a564;}
#new ul li p .news { background-color: #de382d;}
#new ul li p .info { background-color: #d35501;}
#new ul li p .etc { background-color: #000;}

.pc #new ul li { display: block; float: none; position: relative; width: 100%; margin: 0 2% .5em 0;}
.pc #new ul li:nth-child(even) { margin-right: 0;}
.sp #new ul li { display: block; position: relative; width: 100%; margin-bottom: 1em;}
.pc #new ul li:nth-child(n+21) { display: none;}
.sp #new ul li:nth-child(n+10) { display: none;}

#new .sns .facebook__heading {
	width: 100%;
	padding: 1em 0;
	font-size: 20px;
	font-size: 2rem;
	text-align: center;
	color: #fff;
	background: #3d618e;
}

#new .sns .facebook__heading a {
	display: block;
	color: #fff;
	text-decoration: none;
}

/*--- shopList ---*/
#shopList { padding: 4em 0; background: url(../img/index/newShop_back.png);}
#shopList h2 { overflow: hidden; height: 54px; margin: 0 auto 2em; text-align: center; text-indent: 100%; white-space: nowrap; background: url(../img/index/newshop_h2Icon.png) top center no-repeat;}
#shopList .inner { max-width: 1110px;}
#shopList .inner ul { text-align: center;}
#shopList .inner ul li { position: relative; vertical-align: top; box-shadow: 5px 5px 0px 0px rgba(227,227,227,1); background: #fff;}
#shopList .inner ul li span:nth-of-type(1) { display: block; position: relative; overflow: hidden; width: 100%; max-width: 220px; height: 150px; margin: 0 auto .5em;
background: url(../img/index/shopPhotoBg.png) center;
background-size: cover;
}
#shopList .inner ul li span:nth-of-type(1) img { display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
#shopList .inner ul li h3 { margin-bottom: .5em; font-size: 16px; font-size: 1.6rem; font-weight: 500; line-height: 1.4; color: #55a564;}
#shopList .inner ul li p { overflow: hidden; font-size: 13px; font-size: 1.3rem; text-overflow: ellipsis; line-height: 1.6; white-space: nowrap;}
#shopList .inner ul li .shopBtn { display: block; width: 95%; max-width: 100px; margin: .5em auto; font-size: 13px; font-size: 1.3rem; text-align: center; line-height: 1.4; color: #55a564; border: 1px solid #55a564; border-radius: 5px;}
#shopList .inner ul li .shopBtn::before { display: inline-block; content: ""; width: 7px; height: 7px; margin-right: .5em; vertical-align: middle; background: url(../img/index/news_arrow_event.png) top left no-repeat; background-size: contain;}

#shopList .inner ul .new::before { display: block; content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 65px; height: 23px; background: url(../img/share/newshopIcon.png) top center no-repeat; background-size: contain;}

#shopList .inner ul li:hover h3 { color: #de382d;}
#shopList .inner ul li:hover .shopBtn { color: #de382d; border-color: #de382d;}
#shopList .inner ul li:hover .shopBtn::before { background: url(../img/index/news_arrow_new.png)top center no-repeat;}

.pc #shopList .inner ul li { display: inline-block; width: 23%; max-width: 254px; min-height: 320px; margin: 0 .8% 2em; padding: 1em 1.5%;}
.sp #shopList .inner ul li { display: inline-block; width: 45%; min-height: 280px; margin: 0 2% 2em; padding: 1em 4%;}
@media screen and (max-width:580px){
.sp #shopList .inner ul li { display: block; width: 100%; max-width: 300px; min-height: 0; margin: 0 auto 2em; padding: 1em 6%;}

}

/*--- admin ---*/
#admin { padding-bottom: 5em; background: url(../img/index/newShop_back.png);}
#admin a { display: block; max-width: 240px; margin: 0 auto;}
#admin a img { display: block; width: 100%; }

.sp #admin { padding-bottom: 20%;}



#new { }
#new .newbox { display: flex; justify-content: space-between; vertical-align: top; max-width: 1024px; width: 90%; margin: 1em auto; float: none;} 

#new .inner { vertical-align: top; width: 45%; }
#new .innerNews { overflow: auto; }
#index_sp #new .newbox { display: block; justify-content: none; max-width: 1024px; width: 90%; margin: 1em auto; text-align: center;} 
#index_sp #new .inner {  width: 90%; margin: 0 auto 3em; height: 23em;}

/*.innerSns { max-width: 420px;  width: 90%; text-align: center;}
.innerSns iframe { max-width: 420px; height: 100%; width: 90%; text-align: center;}

.innerSnsSp { max-width: 420px; display: block; width: 90%; margin: 3em auto 3em; text-align: center;}
*/

#new .sns { max-width: 500px;  width: 90%; height: 26em; overflow: hidden; }
#new .sns .fb-page  { width: 100%; height: auto;}


@media screen and (max-width:580px){
#new .innerNews { max-width: 400px; width: 90%; margin: 1em auto 2em;}
#new .sns {  max-width: 400px;  width: 90%; height: 24em; margin: 5em auto 3em;}
}



.program { background: #f5f1e7; width: 100%; padding: 1em 0 5em;} 
.program a { display: block; max-width: 450px; width: 95%; text-align: center; margin: 0 auto; padding: 1em 25px; background: #ff8c00; color: #fff; z-index: 100; border-radius: 15px; font-size: 18px; font-size: 1.8rem;  line-height: 1.5; }