@charset "utf-8";

#cover {
	position:relative;
	width:100%;
	height:100vh;
	margin:0;
	padding:0;
	z-index: 1;
	list-style:none;
	overflow:hidden;
	}

#cover::before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url("../images/common/bg_dots.png");
	mix-blend-mode: multiply;
	z-index:2;
	}

#cover div {
	width:100%;
	height:100vh;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	}

@keyframes fadezoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

.animation {
	animation: fadezoom 15s 0s forwards;
	}

#cover a.scroll {
	display:block;
	position:absolute;
	bottom:-5px;
	left:50%;
	transform:translateX(-50%);
	width:80px;
	height:75px;
	text-align:center;
	background:rgba(245,245,245,1);
	border-radius: 10px 10px 0 0;
	z-index:2;
	}

#cover a.scroll span {
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	padding-bottom:38px;
	font-size:15px;
	font-family:'Poppins', sans-serif;
	line-height:1;
	text-decoration:none;
	color:#222;
	animation:arrowmove 1s ease-in-out infinite;
	}

@keyframes arrowmove {
	0%  {bottom:0;}
	50% {bottom:3%;}
	100%{bottom:0;}
}

#cover a.scroll span:before {
    content:"";
    position:absolute;
    bottom:15px;
    left:33px;
    width:1px;
    height:13px;
    background:#000;
    transform:skewX(45deg);
	}

#cover a.scroll span:after {
    content:"";
    position:absolute;
    bottom:15px;
    right:33px;
    width:1px;
    height:13px;
    background:#000;
    transform:skewX(-45deg);
	}

/*  バナーエリア　　*/

#banner .inner {
	width:100%;
	padding:50px 50px 0;
	}

#banner .inner .slick-slide {
	margin:0 15px;
	border-radius:10px;
	overflow:hidden;
	opacity:0.5;
	transition:1s;
	}

#banner .inner .slick-slide.slick-active {
	opacity:1;
	}

.prev-arrow {
	position:absolute;
	top:calc(50% - 20px);
	left:calc(50% - 450px);
	width:35px;
	height:90px;
	z-index:2;
	}

.next-arrow {
	position:absolute;
	top:calc(50% - 20px);
	right:calc(50% - 450px);
	width:35px;
	height:90px;
	z-index:2;
	}


/*  商店街について　　*/

#about.section {
	padding-top:100px;
	}

#about.section .container > div {
	display:flex;
	}

#about .body {
	width:calc(100% - 400px);
	}

#about .figure {
	position:relative;
	width:400px;
	height:auto;
	}


#about .figure::after {
	content:'©柳盛会柳沢北口商店街';
	position:absolute;
	left:0;
	bottom:0;
	padding:5px 8px;
	font-size:0.7em;
	line-height:1;
	background-color:rgba(255,255,255,0.7);
	}

#about h2 {
	margin:30px 50px 30px 0;
	font-size:1.9em;
	line-height:1.85;
	letter-spacing:0.2em;
	}

#about .textarea {
	margin:0 50px 0 0;
	}

#about p {
	margin-bottom:20px;
	font-size:1.1em;
	line-height:2;
	text-align:justify;
	}

#about p:last-child {
	margin-bottom:0;
	}

#about .links {
	display:flex;
	margin:80px 0 0;
	padding:0;
	list-style:none;
	}

#about .links li {
	position:relative;
	width:calc((100% - 40px) / 2);
	margin:0 40px 0 0;
	letter-spacing:0;
	text-align:justify;
	vertical-align:top;
	}

#about .links li:nth-child(2n) {
	margin-right:0;
	}

#about .links li a {
	display:block;
	width:100%;
	padding-top:30%;
	}

#about .links .go_about a {
	background:url("../images/home/banner_about01.jpg") no-repeat center;
	background-size:contain;
	}

#about .links .go_history a {
	background:url("../images/home/banner_history01.jpg") no-repeat center;
	background-size:contain;
	}

#about .links li a:hover {
	opacity:0.6;
	}

#about .links li a span {
	display:none;
	}

/*　　YOUTUBE埋め込み　　*/

#about .wp-block-embed-youtube {
	max-width:800px;
	margin:100px auto 0;
	}

#about .wp-block-embed-youtube .wp-block-embed__wrapper {
	position:relative;
	width:100%;
	padding-top: 56.25%;
	}

#about .wp-block-embed-youtube .wp-block-embed__wrapper iframe {
	position:absolute;
	top:0;
	right:0;
	width:100%!important;
	height:100%!important;
	}


/*　　お知らせ　　*/

#news.section {
	padding-top:100px;
	}

#news.section .frame {
	position: relative;
	padding:15px 0 15px 210px;
	border-top:1px solid #bbb;
	border-bottom:1px solid #bbb;
	}

#news.section h2 {
	position:absolute;
	top:35px;
	left:60px;
	width:80px;
	height:138px;
	background:#e6ebde;
	}

#news.section h2 span {
	display:flex;
	position: relative;
	width:100%;
	height:100%;
	font-size:0.8em;
	font-family:'Poppins', sans-serif;
	color:#839b5c;
	justify-content:center;
	align-items:center;
	z-index:1;
	}

#news.section h2::before,
#news.section h2::after {
  content: "";
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:#e6ebde;
  z-index:0;
}

#news.section h2::before {
  transform: rotate(60deg);
}

#news.section h2::after {
  transform: rotate(-60deg);
}

#news.section .frame ul {
	list-style:none;
	margin:0;
	padding:0 25px 0 0;
	height:180px;
	overflow-y:scroll;
	}

#news.section .frame li {
	margin:0;
	padding:25px 20px;
	font-size:1em;
	line-height:1;
	border-top:1px solid #d9d9d9;
	}

#news.section .frame li:first-child {
	padding-top:15px;
	border-top:none;
	}

#news.section .frame li:last-child {
	padding-bottom:15px;
	}

#news.section .frame li span {
	display:inline-block;
	width:125px;
	color:#916176;
	}


/*　　加盟店舗　　*/

#store.section {
	padding-top:100px;
	}

#store.section .frame {
	position:relative;
	}

#store.section .frame::after {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:280px;
	background:#839b5c;
	border-radius:10px;
	z-index:-1;
	}


#store.section h2 {
	position: absolute;
	left:80px;
	top:40px;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	width:80px;
	height:138px;
	background:#fff;
	}

#store.section h2 span {
	display:flex;
	position: relative;
	width:100px;
	height:100%;
	margin-left:-10px;
	font-size:0.8em;
	color:#839b5c;
	justify-content:center;
	align-items:center;
	z-index:1;
	}

#store.section h2::before,
#store.section h2::after {
  content: "";
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:#fff;
  z-index:0;
}

#store.section h2::before {
  transform: rotate(60deg);
}

#store.section h2::after {
  transform: rotate(-60deg);
}

#store.section .category {
	padding:40px 0;
	text-align: center;
	}

#store.section .category ul {
	list-style:none;
	margin:0;
	padding:0;
	letter-spacing:-0.4em;
	}

#store.section .category li {
	display:inline-block;
	width:140px;
	height:110px;
	margin:0;
	padding:0;
	line-height:1;
	letter-spacing:0;
	text-align:center;
	border-right:1px solid #fff;
	}

#store.section .category li:first-child {
	border-left:1px solid #fff;
	}

#store.section .category li a {
	display:block;
	position:relative;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	color:#fff;
	text-decoration:none;
	transition: all .4s;
	}

#store.section .category li a span {
	display:inline-block;
	margin-top:15px;
	}

#store.section .category li a span:before {
	content:'';
	display: block;
	width:48px;
	height:45px;
	margin:0 auto 15px;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	}

#store.section .category li.gourmet a span:before {background-image:url("../images/store/icon/icon_gourmet-white.svg");}
#store.section .category li.retail a span:before {background-image:url("../images/store/icon/icon_retail-white.svg");}
#store.section .category li.health a span:before {background-image:url("../images/store/icon/icon_health-white.svg");}
#store.section .category li.service a span:before {background-image:url("../images/store/icon/icon_service-white.svg");}

#store.section .category li a:hover {
	opacity:0.5;
	}

#store.section .list {
	margin:0 50px;
	}

#store.section .list article a {
	color:#000;
	text-decoration:none;
	}

#store.section .list article .body {
	position: relative;
	}

#store.section .list article.ippin .body {
	padding-right:55px;
	}

#store.section .list article .cat {
	padding:14px 0 10px;
	font-size:1em;
	color:#555;
	line-height:1.5;
	}

#store.section .list article .cat span {
	display:inline-block;
	margin-right:10px;
	padding:5px 10px;
	font-size:0.85em;
	color:#fff;
	line-height:1;
	background:#ccc;
	}

#store.section .list article.gourmet .cat span {background-color:#c89551;}
#store.section .list article.retail .cat span {background-color:#526eb4;}
#store.section .list article.health .cat span {background-color:#c8537c;}
#store.section .list article.service .cat span {background-color:#668166;}

#store.section .list article h3 {
	padding:0;
	font-size:1.15em;
	color:#000;
	line-height:1.4;
	text-align:justify;
	}

#store.section .list article .ippin_icon {
	display:block;
	position:absolute;
	top:15px;
	right:0;
	width:45px;
	height:56px;
	background:url("../images/common/icon_ippin.png") no-repeat center;
	background-size:contain;
	}

#store.section .btnArea {
	position:relative;
	width:100%;
	margin:80px 0 0;
	text-align: center;
	z-index:2;
	}

#store.section .owner {
	position:relative;
	margin:-35px 0 0;
	padding:100px 0 55px;
	text-align:center;
	background:#dae1ce;
	}

#store.section .owner p {
	margin-bottom:40px;
	font-size:1.2em;
	line-height:1;
	letter-spacing:0.15em;
	}

#store.section .owner ul {
	list-style:none;
	margin:0;
	padding:0;
	}

#store.section .owner li {
	width:170px;
	height:170px;
	margin:0 25px 0 0;
	padding:0;
	}

#store.section .owner li div {
	width:170px;
	height:170px;
	background:#fff;
	}

/*　　やぎさわ日記　　*/

#blog.section {
	padding-top:100px;
	}

#blog.section .frame {
	position:relative;
	}

#blog.section h2 {
	font-size:1.6em;
	color:#839b5c;
	line-height:1;
	text-align:center;
	}

#blog.section .list {
	margin:80px 0 0;
	}

#blog.section .list article {
	border:1px solid #ccc;
	border-radius:14px;
	}

#blog.section .list article a {
	display:block;
	position:relative;
	padding:10px 10px 50px;
	color:#000;
	text-decoration:none;
	}

#blog.section .list article a:after {
	content:'この記事を読む';
	display:block;
	position:absolute;
	left:5px;
	bottom:5px;
	width:calc(100% - 10px);
	height:40px;
	line-height:40px;
	font-size:0.9em;
	text-align:center;
	color:#fff;
	background-color:#ccc;
	border-radius:0 0 10px 10px;
	-webkit-transition: all 0.5s;
 	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
  	transition: all 0.5s;
	}

#blog.section .list article a:hover:after {
	color:#fff;
	background-color:#839b5c;
	}

#blog.section .list article .body {
	padding:10px;
	}

#blog.section .list article .cat {
	padding:5px 0;
	font-size:0.95em;
	font-family:'Poppins', sans-serif;
	color:#839b5c;
	line-height:1;
	}

#blog.section .list article .cat span {
	font-weight:400;
	}

#blog.section .list article .title {
	padding:0;
	font-size:1.1em;
	color:#000;
	line-height:1.8;
	text-align:justify;
	}

#blog.section .list article .date {
	position:relative;
	padding:25px 0 0;
	font-size:0.85em;
	color:#555;
	line-height:1;
	}

#blog.section .list article .date:before {
	content:'';
	position:absolute;
	top:12px;
	left:0;
	width:30px;
	height:1px;
	border-top:1px solid #bbb;
	}

#blog.section .btnArea {
	width:100%;
	margin:60px 0 100px;
	text-align:center;
	}

#map.section iframe{
	width:100%;
	height:350px;
	}


@media screen and (min-width:1201px){

#about.section > div {
	width:1200px;
	margin:0 auto;
	}

}

@media screen and (max-width:1200px){

#about.section > div {
	width:calc(100% - 100px);
	margin:0 50px;
	}

}

@media screen and (max-width:960px){

#about.section {
	padding:6vw 6vw 0;
	}

#about.section > div {
	position: relative;
	width:100%;
	margin:0;
	}

#about.section .container > div {
	display:block;
	}

#about .body {
	width:100%;
	margin-bottom:3vw;
	padding:2vw 20vw 0 0;
	}

#about h2 {
	margin:0 0 4vw;
	}

#about .textarea {
	margin:0;
	padding:3vw;
	background-color:rgba(255,255,255,0.7);
	}

#about .figure {
	position:absolute;
	top:0;
	right:0;
	width:35vw;
	height:auto;
	z-index:-1
	}

#about .links {
	margin:4vw auto 0;
	}

#about .links li {
	width:calc((100% - 2vw) / 2);
	margin-right:2vw;
	}

#about .links li a {
	padding-top:56%;
	}

#about .links .go_about a {
	background:url("../images/home/banner_about02.jpg") no-repeat center;
	background-size:contain;
	}

#about .links .go_history a {
	background:url("../images/home/banner_history02.jpg") no-repeat center;
	background-size:contain;
	}

#about .wp-block-embed-youtube {
	margin-top:10vw;
	}

#news.section,
#store.section,
#blog.section {
	padding-top:10vw;
	}

#news.section .frame {
	padding:2vw 0 2vw 22vw;
	}

#news.section h2 {
	position: absolute;
	left:7vw;
	top: 50%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	width:9vw;
	height:15.7vw;
	font-size:1.2em;
	}

#news.section h2 span {
	width:13vw;
	margin-left:-2vw;
	}

#news.section .frame ul {
	height:150px;
	}

#news.section .frame li {
	padding:2vw;
	}

#news.section .frame li:first-child {
	padding-top:1vw;
	}

#news.section .frame li:last-child {
	padding-bottom:1vw;
	}

#news.section .frame li span {
	display:block;
	width:100%;
	font-size:1em;
	}

#store.section h2 {
	left:8vw;
	top:5vw;
	width:9vw;
	height:15.7vw;
	font-size:1.2em;
	}

#store.section .frame::after {
	height:24vw;
	}

#store.section h2 span {
	width:13vw;
	margin-left:-2vw;
	}

#store.section .category {
	padding:4vw 6vw 4vw 25vw;
	}

#store.section .category li {
	width:25%;
	height:auto;
	}

#store.section .category li a span {
	margin-top:1vw;
	font-size:0.85em;
	}

#store.section .category li a span:before {
	width:5.5vw;
	height:6vw;
	margin:0 auto 1vw;
	}

#store.section .list {
	margin:0 4vw;
	}

#store.section .list article .cat {
	padding:2vw 0 1vw;
	}

#store.section .btnArea {
	margin:8vw 0 0;
	}

#store.section .owner {
	margin:-5vw 0 0;
	padding:11vw 0 7vw;
	}

#store.section .owner p {
	margin-bottom:6vw;
	}

#store.section .owner li {
	width:20vw;
	height:20vw;
	margin:0 2vw 0 0;
	}

#store.section .owner li div {
	width:100%;
	height:100%;
	}

#blog.section .list article a {
	padding:2vw;
	}

#blog.section .list article a:after {
	content:inherit;
	}

#blog.section .list {
	margin:6vw 0 0;
	}

#blog.section .btnArea {
	margin:6vw 0 10vw;
	}

#map.section iframe {
	height:40vw;
	}

}


@media screen and (max-width:560px){

#cover a.scroll {
	width:16vw;
	height:16vw;
	}

#cover a.scroll span {
	padding-bottom:8vw;
	font-size:14px;
	}

#cover a.scroll span:before {
	left:6.6vw;
	bottom:3.5vw;
	height:2.5vw;
	}

#cover a.scroll span:after {
	right:6.6vw;
	bottom:3.5vw;
	height:2.5vw;
	}

#about .body {
	padding:0;
	}

#about .textarea {
	padding:0;
	background-color:inherit;
	}

#about .figure {
	overflow:hidden;
	position:relative;
	top:inherit;
	right:inherit;
	width:calc(100% - 8vw);
	height:50vw;
	margin:5vw 4vw 8vw;
	}

#about .figure img {
	transform:translateY(-50vw);
	}

#about .links {
	display:block;
	}

#about .links li {
	width:100%;
	margin-top:4vw;
	margin-right:0;
	}

#about .links li a {
	padding-top:30%;
	}

#about .links .go_about a {
	background:url("../images/home/banner_about01.jpg") no-repeat center;
	background-size:contain;
	}

#about .links .go_history a {
	background:url("../images/home/banner_history01.jpg") no-repeat center;
	background-size:contain;
	}

#news.section .frame ul {
	height:120px;
	padding:0 15px 0 0;
	}

#store.section h2 {
	top:4vw;
	left:calc(50% - 4.5vw);
	}

#store.section .frame::after {
	content:inherit;
	}

#store.section .category {
	margin-bottom:5vw;
	padding:14vw 6vw 4vw;
	background:#839b5c;
	border-radius:10px;
	}

#store.section .list article .thumb {
	height:52vw;
	}

#store.section .list article .thumb img {
	transform:translateY(-5vw);
	}

#store.section .list article .ippin_icon {
	top:2vw;
	width:9vw;
	height:11vw;
	}

#blog.section .btnArea a {
	width:auto;
	}

#store.section .list article h3 {
	
	}

}


/*　slickスライダー用 Break Point　*/

@media screen and (max-width:900px){

#banner .inner .slick-slide {
	width:500px;
	}

.prev-arrow {
	left:30px;
	}

.next-arrow {
	right:30px;
	}

}

@media screen and (max-width:600px){

#banner .inner {
	padding:5vw 5vw 0;
	}

#banner .inner .slick-slide {
	width:90vw;
	}

.prev-arrow,
.next-arrow {
	display:none!important
	}

.slick-dots {
	width:calc(100% - 12vw);
	bottom:inherit;
	}

.slick-dots li {
	margin:0;
	}

}