Newer
Older
kensho2 / first.css
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&display=swap'); 

body {
	background: white
}
title_container {
	text-align: center;
}

.swiper-button-prev,
.swiper-button-next{
	display: none;
}

.swiper-container {
	text-align: center;
}

h1{
	text-align: center;
	color: rgb(70, 130, 180);
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-weight: bold;
}

p{
	text-align: center;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	
}

ul{
	list-style: none;
}

.game{
	display: flex;
	justify-content: center;
}


li{
	list-style: none;
}


.idou{
	line-height: 50px;
	justify-content: center;
}

/*.game1, .game2, .map {
	flex: 1 1 0;
	text-align: center;
	border-radius: 10px;
	background-color: #add8e6;
	box-shadow: 0 5px 0 #bbe2f1;
	min-width: 0;
	white-space: nowrap;
	width:150px;
}*/

 .wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

button {
  width: auto;
  min-width: 8em;
  height: 3em;
  margin: 0.5em;
}

.map,
.game1,
.game2 {
  display: inline-block;
  background-color: #add8e6;
  border-radius: 10px;
  box-shadow: 0 5px 0 #bbe2f1;
  padding: 10px;
  text-align: center;
  margin: 10px;
}

/* img には背景色をつけず、サイズだけを調整 */
.map img{
  display: block;
  width: 125px;
  height: auto;
  border-radius: 10px;
}
.game1 img {
  display: block;
  width: 160px;
  height: auto;
  border-radius: 10px;
}
.game2 img {
  display: block;
  width: 208px;
  height: auto;
  border-radius: 10px;
}

.calendar {
	border-collapse: collapse;
	margin: 2em auto;
	width: 80%;
	max-width: 600px;
	box-shadow: 0 0 10px;
	font-size: 1rem;
}

.calendar th{
	background-color: #f0f8ff;
	padding: 0.5em;
	text-align: center;
	color: #333;
}

.calendar td{
	border: 1px solid#ddd;
	padding: 0.75em;
	text-align: center;
	height: 3em;
}

.calendar td.today{
	background-color: #ffcccb;
	font-weight: bold;
	color: #000;
}

.calendar td.off{
	background-color: #f5f5f5;
	color: #666;
}

.calendar td.mute{
	color:#bbb;
}

.calendar th .日,
.calendar td:nth-child(1){
	color: red;
}

.calerndar th .土,
.calendar td:nth-child(7){
	color: blue;
}

.calheader{
	justify-content: space-between;
	align-items: center;
	display:flex;
}