@charset "utf-8";

/*　　共通設定　　*/

#about .section,
#history .section,
#gallery .section,
.single-history main .section {
	margin-top:-100px;
	}

#about .section .frame,
#history .section .frame,
#gallery .section .frame,
.single-history main .section .frame {
	position:relative;
	padding:70px;
	background:#fff;
	border-radius:10px;
	z-index:2;
	}


/*　　商店街について　　*/

#about .greeting {
	}

#about .greeting h2 {
	margin-bottom:30px;
	padding:5px 0 5px 10px;
	line-height:1;
	border-left:7px solid #839b5c;
	}

#about .greeting .wrapper > div {
	display:flex;
	}

#about .greeting .wrapper .body {
	width:calc(100% - 250px);
	padding-right:100px;
	}

#about .greeting .wrapper .body p {
	margin-bottom:20px;
	line-height:2;
	text-align:justify;
	}

#about .greeting .wrapper .figure {
	width:250px;
	}

#about .greeting .wrapper .figure img {
	max-width:100%;
	height:auto;
	}

#about .greeting .wrapper .figure p {
	margin-top:10px;
	line-height:1.6;
	text-align:justify;
	}

#about .greeting .wrapper .figure p span {
	display:block;
	margin-top:5px;
	font-size:0.9em;
	line-height:2.5;
	}

#about .greeting .wrapper .figure p b {
	display:block;
	padding:0 0 3px;
	font-size:1.35em;
	font-weight:500;
	border-bottom:1px dashed #999;
	}



/*　　商店街の歴史　　*/

#history .section .intro {
	margin:0 auto 50px;
	font-size:1em;
	line-height:2;
	text-align:center;
	}

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

#history .section article .head {
	margin:25px 0 20px;
	padding:4px 0 4px 8px;
	border-left:6px solid #839b5c;
	}

#history .section article .thumb {
	position:relative;
	}

#history .section article .thumb span {
	position:absolute;
	left:0;
	bottom:0;
	padding:5px 8px;
	font-size:0.8em;
	line-height:1;
	background-color:rgba(255,255,255,0.7);
	}

#history .section article .head h2 {
	font-size:1.1em;
	line-height:1;
	letter-spacing:0.02em;
	}

#history .section article .head .kana {
	margin-top:8px;
	font-size:0.7em;
	line-height:1;
	letter-spacing:0.06em;
	}

#history .section article .excerpt {
	font-size:0.85em;
	line-height:1.75;
	color:#333;
	text-align:justify;
	}

.single-history .frame .links {
	margin-bottom:80px;
	}

.single-history .frame .links .open {
	display:none;
	}

.single-history .frame .links ul {
	display:flex;
	flex-wrap: wrap;
	list-style:none;
	margin:0;
	padding:0;
	}

.single-history .frame .links li {
	width:calc((100% - 12px) / 3);
	margin:0 6px 6px 0;
	padding:0;
	}

.single-history .frame .links li:nth-child(3n) {
	margin-right:0;
	}

.single-history .frame .links li a {
	display:block;
	height:50px;
	line-height:50px;
	font-size:0.9em;
	color:#839b5c;
	text-decoration:none;
	text-align: center;
	background-color:#e6ebde;
	}

.single-history .frame .links li a:hover {
	color:#fff;
	background-color:#839b5c;
	}

.single-history article .container {
	display:flex;
	margin:0 25px;
	}

.single-history article .main {
	width:calc(100% - 400px);
	padding-right:50px;
	}

.single-history article .side {
	width:400px;
	}

.single-history article .head {
	position:relative;
	margin-bottom:30px;
	padding-left:50px;
	}

.single-history article .head:before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:40px;;
	height:40px;
	background-color:#839b5c;
	border-radius:20px;
	}

.single-history article .head h1 {
	font-size:1.35em;
	font-weight:400;
	line-height:1;
	letter-spacing:0.06em;
	}

.single-history article .head .kana {
	margin-top:8px;
	font-size:0.75em;
	line-height:1;
	letter-spacing:0.06em;
	}

.single-history article .main .block {
	margin-left:50px;
	}

.single-history article .main .block p {
	margin-bottom:20px;
	line-height:2;
	text-align: justify;
	}

.single-history article .side ul {
	list-style:none;
	margin:0;
	padding:0;
	}

.single-history article .side .slider {
	position:relative;
 	padding:5px 5px 2px;
	border:1px solid #bbb;
	}

.slick-track {
	display:flex!important;
	}

.slick-slide {
	display:flex!important;
	align-items:center;
	height:auto!important;
	padding-bottom:30px;
	background-color:#eee!important;
	}

.single-history article .side .slider li .img {
	position:relative;
	}

.single-history article .side .slider li .img span {
	position:absolute;
	left:0;
	bottom:0;
	padding:5px 8px;
	font-size:0.7em;
	line-height:1;
	background-color:rgba(255,255,255,0.7);
	}

.single-history article .side .slider li p {
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	padding:2px 5px;
	font-size:0.9em;
	background-color:#fff;
	}

.single-history article .side .thumbnail {
 	display:flex;
	flex-wrap:wrap;
	}

.single-history article .side .thumbnail li {
 	width: calc((100% - 20px) / 5) !important;
	margin:5px 5px 0 0!important;
 	vertical-align:top;
	opacity: .3;
	transition: opacity .3s linear;
	}

.single-history article .side .thumbnail li:nth-child(5n) {
	margin:3px 0 0!important;
	}

.single-history article .side .thumbnail li img {
	cursor:pointer;
	}

.single-history article .side .thumbnail li:hover,
.single-history article .side .thumbnail li.current {
	opacity: 1;
	}

.single-history article .side .thumbnail li.current img {
	cursor:auto;
	}

.single-history article .side .thumbnail li .slick-track {
	transform: unset !important;
	width: 100% !important;
	}



/*　　写真ギャラリー　　*/

#gallery .section .frame {
	padding:50px;
	}

.foogallery.fg-masonry.fg-captions-bottom .fg-item-inner .fg-caption-inner {
	padding:6px 8px 7px;
	background-color:#eee;
	}

.fg-masonry.fg-captions-bottom .fg-caption {
	border-width:inherit;
	}

.foogallery .fg-caption-title {
	margin:0;
	font-size:12px;
	}


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

#about .section,
#history .section,
#gallery .section,
.single-history main .section {
	margin-top:-10vw;
	}

#about .section .frame,
#history .section .frame,
#gallery .section .frame,
.single-history main .section .frame {
	padding:6vw;
	}

#about .greeting .wrapper > div {
	display:block;
	}

#about .greeting .wrapper .body {
	width:100%;
	margin-bottom:5vw;
	padding-right:0;
	}

#about .greeting .wrapper .figure {
	width:100%;
	}

#about .greeting .wrapper .figure > div {
	display:flex;
	}

#about .greeting .wrapper .figure figure {
	width:200px;
	}

#about .greeting .wrapper .figure p {
	width:calc(100% - 200px);
	padding-left:5vw;
	}



#history .section .intro {
	margin:0 auto 4vw;
	}

#history .section article .head {
	margin:3vw 0 2vw;
	}

.single-history .frame .links {
	position:relative;
	margin-bottom:8vw;
	}

.single-history .frame .links .open {
	display:block;
	position:relative;
	width:100%;
	height:65px;
	line-height:63px;
	text-align:center;
	color:#666;
	border:1px solid #aaa;
	}

.single-history .frame .links .open::after {
	position:absolute;
	top:50%;
	right:0;
	width:65px;
	content:"\f078";
	font-family:'Font Awesome 5 Free';
	font-weight:900;
	text-align: center;
	transform:translateY(-50%);
	}

.single-history .frame .links.active .open::after {
	content:"\f077";
	}

.single-history .frame .links ul {
	display:none;
	position:absolute;
	width:100%;
	padding:2px 0 0;
	font-size:1.1em;
	background-color:#fff;
	border:1px solid #aaa;
	border-top:none;
	z-index:2;
	}

.single-history .frame .links li {
	width:auto;
	margin:0 2px 2px;
	padding:0;
	}

.single-history .frame .links li:nth-child(3n) {
	margin-right:0;
	}

.single-history .frame .links li a {
	display:block;
	height:65px;
	line-height:65px;
	font-size:0.9em;
	color:#839b5c;
	text-decoration:none;
	text-align: center;
	background-color:#e6ebde;
	}

.single-history article .container {
	display:block;
	margin:0 2vw;
	}

.single-history article .main {
	width:100%;
	padding-right:0;
	}

.single-history article .head {
	margin-bottom:4vw;
	padding-left:7.5vw;
	}

.single-history article .head:before {
	width:6vw;
	height:6vw;
	border-radius:50%;
	}

.single-history article .head .kana {
	margin-top:1.5vw;
	}

.single-history article .main .block {
	margin-left:0;
	}

.single-history article .side {
	width:100%;
	margin-top:5vw;
	}

}

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

#about .section,
#history .section,
.single-history main .section {
	margin-top:-6vw;
	}

.single-history .frame .links .open {
	height:12vw;
	line-height:12vw;
	}

.single-history .frame .links .open::after {
	width:12vw;
	}

.single-history .frame .links li a {
	height:10vw;
	line-height:10vw;
	font-size:1em;
	}

#about .greeting .wrapper .body p {
	margin-bottom:3vw;
	}

#about .greeting .wrapper .figure > div {
	display:block;
	}

#about .greeting .wrapper .figure figure {
	width:100%;
	}

#about .greeting .wrapper .figure p {
	width:100%;
	padding-left:0;
	}


}