@charset "utf-8";

main,
#a-billboard {
	display: block;
	background: #ebeae4;
	color: #333;
	font-size: 16px;
	font-family: Verdana, "sans-serif";
	line-height: 1.75;
	letter-spacing: 0.02em;
}
main h1,main h2,main h3,main h4,main h5,main h6 {
	margin: 0;
	font-size: 100%;
	font-weight: normal;
	line-height: 1.3;
}
main img,
#a-billboard img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
main a,
main .a,
#a-billboard .a {
	opacity: 1;
	color: #333;
	text-decoration: none;
	cursor: pointer;
	transition: 0.4s ease;
}
main a:hover,
main .a:hover,
#a-billboard .a:hover {
	opacity: 1;
}
main p {
	margin: 0;
}
main ul, 
main li {
	margin: 0;
	padding: 0;
}
.layout {
	position: relative;
	max-width: 1168px;
	margin: 0 auto;
	padding: 0 24px;
}
article.area {
	background: #fff;
}
img.sp {
	display: none;
}
#headerBlock {
	position: relative;
	height: 63px;
}
@media (max-width: 767px) {
main,
#a-billboard {
	font-size: 13px;
}
.layout {
	padding: 0 20px;
}
img.pc {
	display: none;
}
img.sp {
	display: inline-block;
}
#headerBlock {
	height: auto;
}
#headerBlock .likebtn_area {
	display: none !important;
}
}



/* ---------------- header */
.header {
	position: absolute;
	top: 10px;
	right: 24px;
}
.header .title {
	display: inline-block;
	margin-right: 30px;
	font-family: Verdana, "sans-serif";
	font-size: 22px;
	font-weight: 700;
	vertical-align: middle;
}
.header .btnNav {
	display: inline-block;
	width: 21px;
	vertical-align: middle;
}
@media (max-width: 767px) {
.header {
	position: static;
	text-align: right;
}
.header .title {
	margin-right: 8px;
	font-size: 12px;
	line-height: 60px;
}
.header .btnNav {
	position: relative;
	top: -2px;
	width: 29px;
	padding: 8px;
}
}



/* ---------------- navArea */
body.nav {
	overflow: hidden;
	position: fixed;
	width: 100%;
}
.navArea {
	opacity: 0;
	visibility: hidden;
	overflow-y: auto;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: 0.4s ease;
}
.navArea.on {
 	opacity: 1;
	visibility: visible;
 }
.navArea .over {
	position: fixed;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #ebeae4;
}
.navArea .layout {
	max-width: 1008px;
	padding: 120px 20px;
}
.navArea .itemGroup {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 24px;
}
.navArea .item {
	position: relative;
	width: 49.79%;
	margin-bottom: 4px;
	padding: 8px;
}
.navArea .item::after {
	content: '';
	opacity: 0;
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	width: calc(100% - 16px);
	height: calc(100% - 16px);
	border: 1px solid #e98f0d;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	transition: 0.2s ease;
}
.navArea .item.cr::after,
.navArea .item:hover::after {
	opacity: 1;
	width: 100%;
	height: 100%;
}
.navArea .item a {
	display: table;
	position: relative;
	z-index: 3;
	width: 100%;
	height: 100%;
	border: 1px solid #000;
	transition: 0.2s ease;
}
.navArea .item.cr a,
.navArea .item:hover a {
	border-color: transparent;
}
.navArea .item .img {
	overflow: hidden;
	display: table-cell;
	position: relative;
	width: 160px;
	background-size: cover;
	background-position: center center;
}
.navArea .item .img img {
	display: none;
}
.navArea .item .body {
	display: table-cell;
	padding: 40px 16px;
	text-align: left;
	line-height: 1.3;
	vertical-align: middle;
}
.navArea .item .no {
	display: inline-block;
	margin-right: 16px;
	color: #e98f0d;
}
.navArea .item .title {
	display: inline-block;
}
.navArea .item.home {
	width: 100%;
}
.navArea .item.home .body {
	text-align: center;
}
.navArea .item.home .title::after {
	content: '';
	display: inline-block;
	position: relative;
	top: -2px;
	width: 5px;
	height: 5px;
	margin-left: 16px;
	border-right: 1px solid #333;
	border-top: 1px solid #333;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: 0.4s ease;
}
.navArea .btn {
	text-align: center;
}
.navArea .btn a {
	display: inline-block;
	width: 100%;
	max-width: 462px;
	background: #fff;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	line-height: 80px;
}
.navArea .btn a:hover {
 	opacity: 0.6;
 }
.navArea .btn a::after {
	content: '';
	display: inline-block;
	position: relative;
	top: -2px;
	width: 5px;
	height: 5px;
	margin-left: 16px;
	border-right: 1px solid #333;
	border-top: 1px solid #333;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: 0.4s ease;
}
.navArea .btnClose {
	position: absolute;
	top: 40px;
	right: 20px;
	width: 38px;
	height: 38px;
}
.navArea .btnClose::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 2px;
	background: #333;
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
	transform: translate(-50%, -50%) rotate(45deg);
}
.navArea .btnClose::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 2px;
	background: #333;
	-webkit-transform: translate(-50%, -50%) rotate(-45deg);
	transform: translate(-50%, -50%) rotate(-45deg);
}
@media (max-width: 767px) {
.navArea .layout {
	padding: 80px 15px;
}
.navArea .itemGroup {
	display: block;
}
.navArea .item {
	width: auto !important;
	padding: 5px;
}
.navArea .item::before {
	width: calc(100% - 5px);
	height: calc(100% - 5px);
}
.navArea .item::after {
	width: calc(100% - 11px);
	height: calc(100% - 11px);
}
.navArea .item .img {
	width: 66px;
}
.navArea .item .body {
	padding: 24px 16px;
}
.navArea .item .no {
	font-size: 11px;
}
.navArea .item .title {
	padding: 4px 0 0;
	font-size: 14px;
}
.navArea .btn a {
	font-size: 13px;
	line-height: 48px;
}
.navArea .btnClose {
	top: 32px;
	right: 20px;
	width: 25px;
	height: 25px;
}
}



/* ---------------- footer */
.footer {
	padding: 24px 0 64px;
	text-align: center;
}
.footer .monocle {
	display: inline-block;
	width: 212px;
}
@media (max-width: 767px) {
.footer {
	padding: 24px 0 56px;
}
.footer .monocle {
	width: 160px;
}
}



/* ---------------- headArea */
.headArea {
	padding-bottom: 80px;
}
.headArea .group {
	display: flex;
	border: 1px solid #000;
}
.headArea .img {
	width: 55.35%;
	background-size: cover;
	background-position: center center;
}
.headArea .img img {
	display: none;
}
.headArea .body {
	flex: 1;
	padding: 56px 24px;
	text-align: center;
}
.headArea .no {
	margin-bottom: 24px;
	color: #e98f0d;
	font-size: 22px;
}
.headArea .no span {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 1px solid #e98f0d;
}
.headArea .title {
	margin-bottom: 24px;
	font-size: 34px;
	font-weight: 400;
}
.headArea .lead {
	max-width: 340px;
	margin: 0 auto;
	font-size: 18px;
	text-align: left;
}
@media (max-width: 767px) {
.headArea {
	padding-bottom: 0;
}
.headArea .layout {
	padding: 0;
}
.headArea .group {
	display: block;
	border-width: 1px 0 1px 0;
}
.headArea .img {
	width: auto;
	background: none !important;
}
.headArea .img img {
	display: inline-block;
}
.headArea .body {
	padding: 24px 20px 32px;
}
.headArea .no {
	font-size: 15px;
}
.headArea .title {
	font-size: 22px;
}
.headArea .lead {
	font-size: 14px;
}
}



/* ---------------- bodyArea */
.bodyArea {
	padding-bottom: 40px;
}
.bodyArea .group {
	display: flex;
	justify-content: space-between;
}
.bodyArea .head {
	width: 33.92%;
}
.bodyArea .head .name {
	margin-bottom: 16px;
	padding: 12px 0;
	border-top: 3px solid #000;
	border-bottom: 1px solid #000;
	font-size: 22px;
	font-weight: 700;
}
.bodyArea .head ul {
	list-style: none;
	margin-bottom: 16px;
	font-size: 18px;
}
.bodyArea .body {
	width: 60.71%;
}
.bodyArea .body p {
	margin-bottom: 20px;
}
@media (max-width: 767px) {
.bodyArea {
	padding-bottom: 32px;
}
.bodyArea .group {
	display: block;
}
.bodyArea .head {
	width: auto;
	margin-bottom: 24px;
}
.bodyArea .body {
	width: auto;

}
.bodyArea .head .name {
	font-size: 16px;
}
.bodyArea .head ul {
	font-size: 13px;
}
}



/* ---------------- imgArea */
.imgArea {
	padding-bottom: 72px;
}
.imgArea .columnGroup {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.imgArea .column {
	width: 49.1%;
	margin-top: 20px;
}
.imgArea .column.s {
	width: 39.28%;
}
.imgArea .column.l {
	width: 58.92%;
}
.imgArea .column.col2 {
	width: 100%;
}
.imgArea img {
	margin-top: 20px;
}
.imgArea img:first-child {
	margin-top: 0;
}
.imgArea .caption {
	padding-top: 8px;
	font-size: 12px;
	line-height: 1.3;
}
@media (max-width: 767px) {
.imgArea .columnGroup {
	display: block;
}
.imgArea .column {
	width: auto !important;
}
.imgArea .caption {
	font-size: 11px;
}
}



/* ---------------- artileArea */
.articleArea {
	border-top: 1px solid #000;
	padding-top: 56px;
}
.articleArea h2 {
	margin-bottom: 40px;
	font-size: 28px;
	font-weight: 700;
	text-align: center;
}
.articleArea .itemGroup {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.articleArea .item {
	width: 32.32%;
	margin-bottom: 40px;
}
.articleArea .item a {
	display: block;
	position: relative;
	padding: 9px;
}
.articleArea .item a::after {
	content: '';
	position: absolute;
	top: 8px;
	left: 8px;
	width: calc(100% - 16px);
	height: calc(100% - 16px);
	border: 1px solid transparent;
	transition: 0.2s ease;
}
.articleArea .item.cr a::after,
.articleArea .item a:hover::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-color: #e98f0d;
}
.articleArea .item .img {
	margin-bottom: 16px;
}
.articleArea .item .body {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0;
	border-bottom: 1px solid #000;
	font-size: 20px;
	line-height: 1.2;
	text-align: right;
	transition: 0.2s ease;
}
.articleArea .item.cr a .body,
.articleArea .item a:hover .body {
	border-bottom-color: transparent;
}
.articleArea .item .no {
	color: #e98f0d;
	font-size: 18px;
}
.articleArea .btnHome {
	padding: 24px 0 40px;
	text-align: center;
}
.articleArea .btnHome a {
	display: inline-block;
	width: 100%;
	max-width: 320px;
	background: #fff;
	color: #333;
	font-weight: 700px;
	text-align: center;
	line-height: 56px;
}
.articleArea .btnHome a:hover {
	opacity: 0.6;
}
.articleArea .btnHome a::after {
	content: '';
	display: inline-block;
	position: relative;
	top: -2px;
	width: 5px;
	height: 5px;
	margin-left: 16px;
	border-right: 1px solid #333;
	border-top: 1px solid #333;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: 0.4s ease;
}
@media (max-width: 767px) {
.articleArea {
	padding-top: 40px; 
}
.articleArea h2 {
	margin-bottom: 24px;
	font-size: 16px;
}
.articleArea .itemGroup {
	display: block;
	max-width: 256px;
	margin: 0 auto;
}
.articleArea .item {
	width: auto;
	margin-bottom: 24px;
}
.articleArea .item .img {
	margin-bottom: 8px;
}
.articleArea .item .body {
	padding: 8px 0;
	font-size: 14px;
}
.articleArea .item .no {
	font-size: 12px;
}
.articleArea .btnHome a {
	max-width: 280px;
	line-height: 50px;
}
}



/* ---------------- heroArea */
.heroArea {
	padding: 44px 0;
	border-top: 1px solid #000;
}
@media (max-width: 767px) {
.heroArea {
	padding: 30px 0;
}
}



/* ---------------- infoArea */
.infoArea {
	padding: 60px 0;
	border-top: 1px solid #000;
}
.infoArea .group {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
}
.infoArea .txtBlock {
	flex: 1;
	border-left: 1px solid #000;
	padding: 24px 0 0 40px;
	font-size: 20px;
}
.infoArea .txtBlock p {
	max-width: 409px;
	margin: 0 auto;
}
.infoArea .txtBlock .img {
	padding-top: 56px;
}
.infoArea .mapBlock {
	flex: 1;
	padding-right: 40px;
}
.infoArea .map {
	position: relative;
}
.infoArea .map .note {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 260px;
	background: #f4bd6d;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	line-height: 56px;
}
.infoArea .map .marker {
	list-style: none;
}
.infoArea .map .marker li {
	position: absolute;
	z-index: 1;
}
.infoArea .map .marker li:hover {
	z-index: 2;
}
.infoArea .map .marker01 {
	width: 47.3%;
	top: 1.31%;
	left: 37.01%;
}
.infoArea .map .marker02 {
	width: 28.07%;
	top: 19.6%;
	left: 37.01%;
}
.infoArea .map .marker03 {
	width: 26.73%;
	top: 31.21%;
	left: 64.42%;
}
.infoArea .map .marker04 {
	width: 25.96%;
	top: 52.88%;
	left: 51.53%;
}
.infoArea .map .marker05 {
	width: 24.23%;
	top: 36.49%;
	left: 29.61%;
}
.infoArea .map .marker06 {
	width: 33.26%;
	top: 59.3%;
	left: 21.73%;
}
.infoArea .map .marker a {
	display: block;
}
.infoArea .map .marker a img {
	transition: 0.2s ease;
}
.infoArea .map .marker a:hover img {
	transform: scale(1.1);
}
.infoArea .map .marker .txt {
	display: none;
}
@media (max-width: 1279px) {
.infoArea .map .note {
	width: 128px;
	font-size: 14px;
	line-height: 40px;
}
}
@media (max-width: 767px) {
.infoArea {
	padding: 0;
}
.infoArea .group {
	display: block;
}
.infoArea .txtBlock {
	margin: 0 20px;
	padding: 32px 0;
	border: none;
	border-bottom: 1px solid #000;
	font-size: 14px;
	text-align: center;
}
.infoArea .txtBlock .img {
	padding-top: 20px;
}
.infoArea .mapBlock {
	padding: 32px 0;
}
.infoArea .map .note {
	display: none;
}
.infoArea .map .img {
	margin-bottom: 24px;
}
.infoArea .map .marker {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.infoArea .map .marker li {
	position: static;
	width: 49.28%;
	margin-bottom: 4px;
}
.infoArea .map .marker a {
	display: block;
	border: 1px solid #000;
	padding: 0 8px;
	text-align: center;
	line-height: 30px;
}
.infoArea .map .marker img {
	display: none;
}
.infoArea .map .marker .txt {
	display: inline;
}
}





/*------------------------ relatedlinks */
.relatedlinks {
	padding: 64px 0 72px;
	background: #fff;
}
.relatedlinks h2 {
	margin-bottom: 32px;
	font-size: 28px;
	font-weight: 700;
	text-align: center;
}
.relatedlinks .itemGroup {
	display: flex;
	justify-content: space-between;
}
.relatedlinks .item {
	width: 31.42%;
}
.relatedlinks .item a:hover {
	opacity: 0.6;
}
@media (max-width: 767px) {
.relatedlinks {
	padding: 32px 0 56px;
}
.relatedlinks h2 {
	margin-bottom: 24px;
	font-size: 16px;
}
.relatedlinks .itemGroup {
	display: block;
	padding: 0 20px;
}
.relatedlinks .item {
	width: auto;
	margin-bottom: 16px;
}
}