@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

/* mainVisual */
#mainVisual {
	display : flex;
	position : relative;
	overflow : hidden;
	justify-content : center;
	align-items : center;
	padding : 80px 0 120px;
	background-color : #cccccc;
	background-image: url("/wp/wp-content/themes/wraymer_com/common/img/img_main_01.png");
	background-position: center center;
}
#pageBody > section#mainVisual > .inner {
	padding : 60px 100px;
	text-align : center;
	color : #ffffff;
	background-color : #2483b2b2;
}
#pageBody > section#mainVisual > .inner > h1:first-child {
	margin-bottom : 24px;
}
/* pickup */
#pickup {
	background-color : #f2f2f2;
}
#pickup ul {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr 1fr 1fr;
	grid-gap : 16px;
	position : relative;
	margin-top : -40px;
}
#pickup ul > li {
	padding : 16px;
	text-align : center;
	background-color : #ffffff;
}
#pickup ul > li .img {
	margin-bottom : 16px;
}
#pickup ul > li .img img {
	width : 100%;
}
#pickup ul > li .name {
	margin-bottom : 8px;
}
#pickup ul > li .price {
	font-size : 1.275em;
	font-weight : bold;
	line-height : 1.2;
	margin-bottom : 16px;
}
#pickup ul > li .price span {
	font-size : 0.625em;
	font-weight : normal;
}
#pickup ul > li .button a {
	font-size : 0.925em;
	transition : background-color 0.3s;
	background-color : #2483b2;
}
#pickup ul > li .button a:hover {
	background-color : #3d9bca;
}

/* productList */
#productList {
	padding-top : 80px;
	padding-bottom : 80px;
	background-color : #f2f2f2;
}
#productList h2 {
	font-size : 1.6em;
	margin-bottom : 1em;
	text-align : center;
}
#productList h2 span {
	display : block;
	font-size : 0.587em;
	color : inherit;
}
#productList ul {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr 1fr 1fr;
	grid-gap : 24px;
	margin-bottom : 24px;
}
#productList ul > li a {
	display : block;
	height : 100%;
	padding : 16px;
	text-align : center;
	text-decoration : none;
	background-color : #ffffff;
}
#productList ul > li a .img {
	height : 160px;
	margin-bottom : 16px;
}
#productList ul > li a .img img {
	width : 100%;
	height : 100%;
	object-fit : contain;
}
#productList .link a {
	width : 100%;
	max-width : 300px;
	margin : 0 auto;
}

/* topContents */
#topContents {
	padding : 80px 0;
	background-color : #f2f2f2;
}
#topContents h2 {
	font-size : 1.6em;
	margin-bottom : 1em;
	text-align : center;
}
#topContents h2 span {
	display : block;
	font-size : 0.587em;
	color : inherit;
}
#topContents ul {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr;
	grid-gap : 24px;
	margin-bottom : 40px;
}
#topContents ul > li a {
	display : block;
	position : relative;
	height : 200px;
}
#topContents ul > li .img {
	height : 100%;
}
#topContents ul > li .img img {
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#topContents ul > li .content {
	display : grid;
	grid-template-columns : 5em 1fr;
	position : absolute;
	bottom : 0;
	width : 100%;
	padding : 12px 0;
	color : #ffffff;
	background : rgba(0, 0, 0, 0.5);
}

#topContents ul > li .content > p {
	display : flex;
	line-height : 1;
	align-items : center;
}
#topContents ul > li .content > p:first-child {
	display : flex;
	font-family : "Montserrat", sans-serif;
	line-height : 1;
	flex-direction : column;
	justify-content : center;
	align-items : center;
	margin : 0;
	letter-spacing : 0.2px;
}
#topContents ul > li .content > p:first-child > span:first-child {
	font-size : 0.625em;
	margin-bottom : 4px;
}
#topContents ul > li .content > p:first-child > span:last-child {
	font-size : 2.4em;
}
#topContents .link {
	display : flex;
	justify-content : center;
}
#topContents .link a {
	width : 100%;
	max-width : 300px;
}


/* about */
#about {
	padding : 80px 0;
	background-color : #aaaaaa;
}
#pageBody > section#about > .inner {
	display : grid;
	grid-template-columns : 30% 1fr;
	grid-gap : 40px;
	max-width : 1024px;
	padding : 40px;
	color : #ffffff;
	background-color : #2483b2;
}
#about > div {
	display : flex;
	justify-content : center;
	align-items : center;
}
#about .img img {
	width : 100%;
}
#about h3 {
	font-size : 1.2em;
	font-weight : bold;
	margin-bottom : 24px;
}
#about p {
	margin-bottom : 24px;
}
#about ul {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr 1fr;
}
#about ul > li > a {
	display : flex;
	font-size : 0.785em;
	flex-direction : column;
	justify-content : space-around;
	align-items : center;
	height : 100%;
	padding : 16px;
	text-align : center;
	text-decoration : none;
}
#about ul > li:not(:last-child) {
	border-right : 1px solid #d9d9d980;
}
#about ul > li > a img {
	margin-bottom : 12px;
}

/* companyInfo */
#companyInfo {
	padding : 80px 0;
	color : #ffffff;
	background-color : #333333;
}
#pageBody > section#companyInfo > .inner {
	display : grid;
	grid-template-columns : 1fr 1fr;
	grid-gap : 40px;
}
#companyInfo h2 {
	font-size : 1.6em;
	margin-bottom : 1em;
}
#companyInfo h2 span {
	display : block;
	font-size : 0.587em;
	color : #ffffff;
}

/* calendar */
#calendar .img img {
	width : 100%;
}


#calendar .month-header {
	margin : 0;
	color : #ffffff;
}
#calendar .xo-months {
	display : grid;
	grid-template-columns : 1fr 1fr;
	grid-gap : 12px;
	margin-bottom : 8px;
}
#calendar .xo-months thead th {
	background-color : #eeeeee;
}
#calendar .xo-months thead th.sunday {
	color : #ffffff;
	background-color : #804040;
}
#calendar .xo-months thead th.saturday {
	color : #ffffff;
	background-color : #003366;
}
#calendar .xo-event-calendar table {
	margin : 0;
	background-color : transparent;
}
#calendar .xo-months .xo-month-wrap {
	display : flex;
}
#calendar .xo-event-calendar table.xo-month {
	flex-grow : 1;
}
#calendar .xo-event-calendar table.xo-month .month-dayname td {
	background-color : #ffffff;
}
#calendar .xo-event-calendar table.xo-month .month-dayname-space {
	height : 1.2em;
}
#calendar .xo-event-calendar p.holiday-title {
	padding : 0;
}
#calendar .xo-event-calendar table.xo-month .month-dayname td div.today {
	color : #222222;
	background-color : #ffdf30;
}

/* information */
#information ul {
	overflow-y : auto;
	height : 200px;
}
#information ul > li {
	display : flex;
	justify-content : flex-start;
}
#information ul > li:not(:last-child) {
	margin-bottom : 1.45em;
}
#information ul > li .date {
	flex-shrink : 0;
	margin-right : 1em;
}
#information ul > li .category {
	flex-shrink : 0;
	margin-right : 1em;
}
#information ul > li .category span {
	display : inline-block;
	line-height : 1.75;
	width : 6em;
	padding : 0.25em 0.5em;
	text-align : center;
	letter-spacing : 0.1em;
	color : #ffffff;
	background-color : #2483b2;
}
#information ul > li .category span.news {
	background-color : #cc5f29;
}
#information ul > li a {
	display : inline-block;
	line-height : 1.45;
	flex-grow : 1;
}

/* map */
#map {
	position : relative;
	padding : 80px 0;
	background-color : #333333;
}
#pageBody > section#map > .inner {
	max-width : 1254px;
}
#pageBody > section#map > .inner::after {
	display : block;
	clear : both;
	content : "";
}
#map .content {
	z-index : 1;
	position : relative;
	float : right;
	width : 488px;
}
#map .content a {
	text-decoration : none;
}
#map .content .img {
	overflow : hidden;
	height : 266px;
}
#map .content .img img {
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#map .content p {
	padding : 1em;
	background-color : #ffffff;
}
#map iframe {
	z-index : 0;
	position : absolute;
	top : 0;
	right : 0;
	width : 100%;
	height : 100%;
	opacity : 0.8;
}


@media screen and (min-width: 768px) and (max-width: 1380px) {
	#pickup ul {
		grid-template-columns : 1fr 1fr 1fr;
	}
	#productList ul {
		grid-template-columns : 1fr 1fr 1fr;
	}
}

@media screen and (max-width: 767px) {
	#pageBody > section#mainVisual > .inner {
		padding : 40px;
		max-width: 320px;
	}
	#mainVisual h1 img {
		width : 100%;
	}
	#mainVisual h2 {
		font-size : 1em;
	}

	#pickup ul {
		grid-template-columns : 1fr;
		grid-gap : 8px;
	}
	#pickup ul > li {
		display : grid;
		grid-template-columns : 140px 1fr;
		grid-gap : 8px;
		padding : 8px;
	}
	#pickup ul > li .img {
		display : flex;
		grid-column : 1/2;
		grid-row : 1/3;
		justify-content : center;
		align-items : center;
		margin-bottom : 0;
	}
	#pickup ul > li .name {
		grid-column : 2/3;
		grid-row : 1/2;
		margin-bottom : 0;
		text-align : left;
	}
	#pickup ul > li .price {
		grid-column : 2/3;
		grid-row : 2/3;
		margin-bottom : 0;
		text-align : left;
	}
	#pickup ul > li .button {
		grid-column : 1/3;
		grid-row : 3/4;
	}

	#productList ul {
		grid-template-columns : 1fr 1fr;
		grid-gap : 8px;
	}
	#productList ul > li a .img {
		height : 100px;
	}

	#topContents ul {
		grid-template-columns : 1fr;
	}

	#pageBody > section#about > .inner {
		grid-template-columns : 1fr;
		grid-gap : 24px;
	}
	#about ul {
		grid-template-columns : 1fr 1fr;
	}
	#about ul > li:not(:last-child) {
		border-right : none;
	}
	#about ul > li:nth-child(1),
	#about ul > li:nth-child(2) {
		border-bottom : 1px solid #d9d9d980;
	}
	#about ul > li:nth-child(2n) {
		border-left : 1px solid #d9d9d980;
	}
	#about .content {
		padding : 0;
	}
	#about .content h2 {
		font-size : 1.2em;
	}
	#about .content .button {
		display : flex;
		justify-content : center;
	}
	#calendar .xo-months {
		grid-template-columns : 1fr;
	}
	#companyInfo {
		padding : 40px 0;
	}
	#pageBody > section#companyInfo > .inner {
		grid-template-columns : 1fr;
	}
	#information ul > li {
		display : block;
	}
	#information ul > li .date,
	#information ul > li .category {
		display : inline-block;
	}
	#information ul > li:not(:last-child) {
		margin-bottom : 1.25em;
	}
	#pageBody > section#map > .inner {
		padding : 0;
	}
	#map {
		padding : 0;
	}
	#map .content {
		position : static;
		float : none;
		width : auto;
	}
	#map iframe {
		position : static;
		height : 200px;
		opacity : 1;
	}
}