@charset "UTF-8";

.frontPageSection {
	padding: 100px 0;
}

.frontPageSection__header2 {
	position: relative;
	margin: 0 0 50px;
	text-align: center;
	letter-spacing: 3px;
	font-weight: 700;
	font-size: 30px;
	color: var(--navy);
}

.frontPageSection__header2:before {
	content: "";
	transform: rotate(23deg);
	display: inline-block;
	position: relative;
	top: 9px;
	width: 24px;
	height: 30px;
	border-left: solid 2px var(--navy);
}

.frontPageSection__header2:after {
	content: "";
	transform: rotate(23deg);
	display: inline-block;
	position: relative;
	top: -1px;
	width: 27px;
	height: 30px;
	border-right: solid 2px var(--navy);
}

.frontPageSection__short {
	width: 1160px;
	padding: 0 10px;
	margin: auto;
}

/* Kodawari Works
------------------------- */
#kodawariWorks__menulist {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.kodawariWorks__menuItem {
	transition: 0.4s;
	aspect-ratio: 1 / 0.28;
	overflow: hidden;
	position: relative;
	display: block;
	width: 440px;
	height: auto;
	margin: 0 30px 30px 0;
	background-color: var(--navy);
}

.kodawariWorks__menuItem:nth-child(3n) {
	margin: 0 0 30px 0;
}

.kodawariWorks__menuItem:nth-last-child(2) {
	margin: 0 30px 0 0;
}

.kodawariWorks__menuItem:last-child {
	margin: 0;
}

.kodawariWorks__menuItem a {
	aspect-ratio: 1 / 0.28;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	width: 440px;
	height: auto;
	text-decoration: none;
	color: #fff;
}

.kodawariWorks__photo {
	opacity: 0.75;
	transition: 0.4s;
	aspect-ratio: 1 / 0.28;
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 440px;
	height: auto;
}

.kodawariWorks__menuItem:hover {
	background-color: #fff;
}

.kodawariWorks__menuItem:hover .kodawariWorks__photo {
	opacity: 1.0;
	filter: brightness(1.1);
	transform: scale(1.1);
}

.kodawariWorks__menuItem--name {
	letter-spacing: 3px;
	text-shadow:
		0px 0px 5px rgba(32, 36, 51, 0.75),
		0px -0px 5px rgba(32, 36, 51, 0.75),
		-0px 0px 5px rgba(32, 36, 51, 0.75),
		-0px -0px 5px rgba(32, 36, 51, 0.75),
		1px 1px 10px rgba(32, 36, 51, 0.5),
		1px -1px 10px rgba(32, 36, 51, 0.5),
		-1px 1px 10px rgba(32, 36, 51, 0.5),
		-1px -1px 10px rgba(32, 36, 51, 0.5);
	font-weight: 700;
	font-size: 24px;
}

/* Pickup Contents
------------------------- */
#pickupContents__menulist {
	list-style-type: none;
	display: flex;
	justify-content: space-between;
}

.pickupContents__menuItem {
	transition: 0.4s;
	overflow: hidden;
	position: relative;
	flex: 0 0 440px;
	aspect-ratio: 1 / 1;
	width: 440px;
	height: auto;
}

.pickupContents__disc h3 {
	margin: 0 0 20px;
	text-align: center;
	line-height: 1.3;
	font-weight: 500;
	font-size: 24px;
}

.pickupContents__photo {
	opacity: 0.8;
	transition: 0.4s;
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
}

.pickupContents__photo.hovered {
	opacity: 1.0;
	filter: brightness(1.1);
	transform: scale(1.1);
}

.pickupContents__disc {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40%;
	padding: 0 25px;
	background-color: rgba(16, 15, 76, 0.5);
	text-decoration: none;
	color: #fff;
}

.viewDetails {
	width: 157px;
	height: 25px;
	margin: auto;
}

.viewDetails .viewDetails__button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 157px;
	height: 25px;
	padding: 0 0 0 30px;
	background-color: #fff;
	color: var(--navy);
}

.viewDetails .viewDetails__button span {
	position: relative;
	display: block;
	font-size: 13px;
}

.viewDetails span:after {
	position: relative;
	display: inline-block;
	content: "";
	top: -2px;
	width: 20px;
	height: 6px;
	margin: 0 0 0 9px;
	background-image: url("../img/icon/arrow_navy.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

/* Whats New
------------------------- */
.topicsList__item {
	list-style-type: none;
	display: flex;
	padding: 0 0 20px;
	margin: 0 0 20px;
	border-bottom: solid 1px var(--gray);
}

.topicsList__item a {
	text-decoration: none;
	color: #000;
}

.topicsList__date {
	display: block;
	flex: 0 0 150px;
	width: 150px;
	height: 34px;
	background-color: var(--light-gray);
	border-radius: 50vh;
	line-height: 34px;
	letter-spacing: 3px;
	text-align: center;
	font-weight: 500;
	color: var(--navy);
}

.topicsList__title {
	display: block;
	flex: 1 1 250px;
	padding: 4px 0 0 30px;
	font-size: 17px;
}

.viewDetails__outer {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

.viewDetails a {
	text-decoration: none;
}

#whatsNew .viewDetails {
	width: 240px;
	height: 40px;
	margin: 0;
}

#whatsNew .viewDetails .viewDetails__button {
	transition: 0.4s;
	width: 240px;
	height: 40px;
	padding: 0 0 0 30px;
	background-color: var(--navy);
	color: #fff;
}

#whatsNew .viewDetails .viewDetails__button:hover {
	background-color: var(--blue);
}

#whatsNew .viewDetails .viewDetails__button span {
	font-size: 15px;
}

#whatsNew .viewDetails span:after {
	top: -3px;
	width: 20px;
	height: 6px;
	margin: 0 0 0 12px;
	background-image: url("../img/icon/arrow_white.svg");
}

#whatsNew .wp-block-group__inner-container,
#whatsNew .wp-block-group {
	margin: 0;
	padding: 0;
}

/* Banner
------------------------- */
.banSection {
	margin: 0 auto 100px;
}

.banSection.first {
	margin: 0 auto;
}

.banSection.first .frontBan {
	margin: 0 auto;
}

.banSection.last,
.last .frontBan {
	margin: 0 auto;
}

.frontBan {
	transition: 0.4s;
	overflow: hidden;
	position: relative;
	width: 760px;
	height: 185px;
	margin: 0 auto 100px;
}

.frontBan .frontBan__menuItem {
	width: 760px;
	height: 185px;
}

.frontBan .frontBan__photo {
	opacity: 1.0;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.frontBan .frontBan__anchor {
	width: 100%;
}

.frontBan .frontBan__name {
	width: 100%;
	text-align: center;
}

.frontBan__menulist {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.frontBan__menuItem {
	transition: 0.4s;
	overflow: hidden;
	position: relative;
	flex: 0 0 675px;
	width: 675px;
	height: 185px;
	background-color: var(--navy);
}

.frontBan__anchor {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	width: 675px;
	height: 185px;
	text-decoration: none;
	color: #fff;
}

.frontBan__photo {
	opacity: 0.75;
	transition: 0.4s;
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.frontBan__menuItem:hover {
	background-color: #fff;
}

.frontBan__menuItem:hover .frontBan__photo {
	opacity: 1.0;
	filter: brightness(1.1);
	transform: scale(1.1);
}

.frontBan__announce {
	margin: 0 auto;
	display: block;
  max-width: 100%;
}

.frontBan__anchor .frontBan__announce:hover {
	transform: scale(1.1);
	transition: 0.4s;
}

.frontBan__menuItem .frontBan__name {
	display: block;
	margin: auto;
	text-shadow:
		0px 0px 5px rgba(32, 36, 51, 0.75),
		0px -0px 5px rgba(32, 36, 51, 0.75),
		-0px 0px 5px rgba(32, 36, 51, 0.75),
		-0px -0px 5px rgba(32, 36, 51, 0.75),
		1px 1px 10px rgba(32, 36, 51, 0.5),
		1px -1px 10px rgba(32, 36, 51, 0.5),
		-1px 1px 10px rgba(32, 36, 51, 0.5),
		-1px -1px 10px rgba(32, 36, 51, 0.5);
	font-weight: 700;
	font-size: 24px;
}

.frontBan__name--inner {
	flex: 0 0 379px;
	width: 379px;
}

.frontBan__name--j {
	display: block;
	width: 100%;
	padding: 0 0 10px;
	margin: 0 0 15px;
	border-bottom: solid 1px #fff;
	letter-spacing: 4px;
	text-align: center;
	font-size: 27px;
}

.frontBan__name--e {
	display: block;
	width: 100%;
	letter-spacing: 2px;
	text-align: center;
	font-weight: 400;
	font-size: 20px;
}

.frontBan__menulist .frontBan__name {
	display: flex;
}

.frontBan__menulist .frontBan__name:before {
	display: block;
	content: "";
	flex: 0 0 70px;
	padding: 0 20px;
}

.frontBan__menulist .frontBan__name:after {
	display: flex;
	justify-content: center;
	align-items: center;
	content: "ITEM";
	flex: 0 0 70px;
	padding: 0 20px;
	vertical-align: center;
	font-weight: 500;
	font-size: 26px;
}

/* panel 4
------------------------- */
#panel4 .pickupContents__menuItem {
	flex: 0 0 calc(100% / 4.2);
	aspect-ratio: 1 / 1;
	width: calc(100% / 4.2);
	border-left: solid 1px #fff;
}

#panel4 .pickupContents__menuItem:first-child {
	border-left: 0;
}

#panel4 .pickupContents__disc h3 {
	margin: 0 0 5px;
	letter-spacing: 2px;
	font-weight: 500;
	font-size: 21px;
}

#panel4 .pickupContents__disc p {
	margin: 0 0 10px;
	letter-spacing: 1px;
	line-height: 1.4;
	font-size: 14px;
}

#panel4 .pickupContents__photo.hovered {
	opacity: 1.0;
	filter: brightness(1);
	transform: scale(1.1);
}

/* Instagram
------------------------- */
#instagram__outer {
	overflow: hidden;
}

#instagram.frontPageSection {
	padding: 100px 0 0;
}

.instagram__item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.instagram__item figure {
	flex: 0 0 calc(25% - 30px);
	margin: 0 0 30px;
}

.instagram__item figure img {
	object-fit: cover;
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
}

/* Access
------------------------- */
#access .flexbox {
	justify-content: space-between;
}

#access .flexbox section {
	flex: 0 0 calc(50% - 15px);
}

.frontPageSection__header2a {
	position: relative;
	margin: 0 0 30px;
	font-size: 24px;
	color: var(--navy);
}

.frontPageSection__header2a:before {
	transform: skewX(-23deg);
	position: relative;
	display: inline-block;
	content: "";
	top: 5px;
	width: 6px;
	height: 30px;
	margin: 0 17px 0 0;
	background-color: var(--pale-blue);
}

/* Calendar
------------------------- */
.xo-months {
	display: flex;
	justify-content: space-between;
	margin: 0 0 20px;
}

.xo-month-wrap {
	flex: 0 0 calc(50% - 10px);
}

/* End of front-page.css */