@charset "UTF-8";

/* ============================================================ */
/*　											 見出しなどの装飾											 　*/
/* ============================================================ */
h1 {
	font-size: 20px;
	float: none;
  padding: 0.85em;/*文字周りの余白*/
  color: #010101;/*文字色*/
  background: #71d2ff;/*背景色*/
  border-bottom: solid 3px #516ab6;/*下線*/
	background-repeat: no-repeat;
	text-align: center;
	line-height: 0;
	margin: 0;

}

/*----------------------------------------------------------*/
/*												 年の見出し												 */
/*----------------------------------------------------------*/
h2 {
	font-size: 20px;
	background-color: #ffc1e0;
	width: 200px;
	height: auto;
	margin: 10px auto;
	padding-top: 2px;
	border-width: 5px 15px;
	border-style: double solid;
	border-color: #800080;
	font-weight: normal;
	text-align: center;
	line-height: 1.2;
}

/*----------------------------------------------------------*/
/*											 各月の見出し											 */
/*----------------------------------------------------------*/
h3 {
	text-align: left;
	display: flex;
	align-items: center;
	margin: 10px 0;
	font-size: 100%; 
	line-height: 1;
	background: linear-gradient(#e0e0e0, snow, #e0e0e0);/*グラデーション*/
	border: 1px #c0c0c0 solid; /* 見出しエリアの境界線 */
	padding: .3em .5em;
	color: #333333;
}

h3::before {
	display: inline-block;
	width: 5px;
	height: 1.35em;
	margin-right: .5em;
	background-color: darkorange;
	content: '';
}

/*
a {
	outline: none;
	text-decoration: none;
	-webkit-transition: all 2s ease-out;
	-moz-transition: all 2s ease-out;
	-o-transition: all 2s ease-out;
	transition: all 2s ease-out;
	overflow: hidden;
}
*/

/*----------------------------------------------------------*/
/*				 年月選択ドロップダウンメニューを最上部に固定 				*/
/*----------------------------------------------------------*/
/*
#fixed-box {
	top: 0;
	width: 100%;
}
*/
.fixed {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}

.clearfix::after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

div.doodles-toptitle {
	text-align: center;
}

/* ============================================================ */
/*											年別のDoodleページ											*/
/* ============================================================ */

/*----------------------------------------------------------*/
/*							 年月選択ドロップダウンメニュー							 */
/*----------------------------------------------------------*/
div.ym-menu {
	display: flex;
	margin-top: 10px;
	margin-bottom: 10px;
	z-index: 10;
}

div.ym-menu ul {
	margin: 0;
	padding: 0;
}

div.ym-menu ul li {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
	float: left;
	position: relative;
	width: 70px;	/*親メニューの幅*/
	height: 40px;	/*親メニューの高さ*/
	line-height: 40px;
/* 	background:#FF818D;*//*親メニューの背景色*/
/* 	background:#81FF8D;*//*親メニューの背景色*/
	background-color: rgba(255, 129, 141, 0.90);
	color: #4D4D4D;/*親メニューの文字色*/
	text-align: center;
	font-weight: bold;
	z-index: 20;
}

div.ym-menu ul li a {
	color: #4D4D4D;
	display: block;
	text-decoration: none;
}

div.ym-menu ul li:hover,
div.ym-menu ul li a:hover {
/* 	background:#EA2839;*//*ホバー時の親メニューの背景色*/
/* 	background:#28EA39;*//*ホバー時の親メニューの背景色*/
	background-color: rgba(234, 80, 57, 0.90);
	color: #ffffff;			/*ホバー時の親メニューの文字色*/
	z-index: 30;
}

div.ym-menu ul li ul {
	position: absolute;
	top: 40px;						/*親メニューの高さと同じにする*/
	width: 70px;
	z-index: 40;
}

div.ym-menu ul li ul li {
	visibility: hidden;
	overflow: hidden;
	width: 70px;/*サブメニューの幅*/
	height: 0;
/*	background:#FFDAD7;*//*サブメニューの背景色*/
/*	background:#DAFFD7;*//*サブメニューの背景色*/
	background-color: rgba(255, 218, 215, 0.90);
	z-index: 50;
}

div.ym-menu ul li ul li:hover, 
div.ym-menu ul li ul li a:hover {
	background: #FFAFA9;/*ホバー時のサブメニューの背景色*/
/*	background:#AFFFA9;*//*ホバー時のサブメニューの背景色*/
	background-color: rgba(255, 175, 169, 0.90);
	z-index: 60;
}

div.ym-menu ul li:hover ul li, 
div.ym-menu ul li a:hover ul li {
	visibility: visible;
	overflow: visible;
	height: 30px;					/*サブメニューの高さ*/
	line-height: 30px;
	z-index: 70;
}

div.ym-menu ul li.stay-year {
	background-color: rgba(57, 234, 72, 0.9);
	color: #ffffff;
}

div.ym-menu ul li.doodle-home {
	background-color: rgba(175, 238, 238, 0.9);
}

div.ym-menu * {
	-webkit-transition: 0.0s;
	-moz-transition: 0.0s;
	-ms-transition: 0.0s;
	-o-transition: 0.0s;
	transition: 0.0s;
}


/*----------------------------------------------------------*/
/*											Doodleボックス											*/
/*----------------------------------------------------------*/
div.contents {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px 20px;
	padding: 20px 0;/*20px;*/
	max-width: 850px;
	place-content: center;
	place-items: center;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
/*	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;*/
}

/* doodle ボックス */
div.doodle-box {
	box-sizing: border-box;
	border: 1px solid #0000cc;
	border-radius: 4px;
	background-color: #ffffff;
	width: 270px;
	height: 300px;
	font-size: 1rem;
	vertical-align: top;
	text-align: center;
	padding: 0;
	transition: all 0.25s ease-out;
}

div.doodle-box:hover {
	border: 1px solid #cc0000;
	box-shadow: 0 0 8px gray;
}

div.doodle-box a {
	text-decoration: none;
}

/* イメージエリア */
div.image-area {
	box-sizing: border-box;
	border-radius: 4px 4px 0 0;
	width: 100%;
	height: 200px;
/*	padding: 0rem;**/
/*	position: relative;*/
	display: flex;
	justify-content: center;
}

div.image-area img {
	width: 100%;
	height: auto;
	margin: auto;
	padding: 1rem;
}

/*
div.image-area {
	display: flex;
	height: 200px;
	margin-left: auto;
	margin-right: auto;
}
*/

/* キャプションエリア */
div.caption-area {
	box-sizing: border-box;
	border-radius: 0 0 4px 4px;
	width: 100%;
	height: 98px;
	background-color: #cccccc;
	font-size: small;
	line-height: 120%;
	padding: 0.25rem 0.5rem;
	display: flex;
	flex-direction: column;
}

/*
div.caption-area {
	height: 98px;
	background-color: #cccccc;
	line-height: 120%;
	font-size: small;
	padding-top: 2.5px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 0 0 4px 4px;
}
*/

div.date {
/*	font-family: "Georgia", sans-serif;*/
/*	font-family: "Montserrat", sans-serif;*/
/*	font-family: "Mochiy Pop One", sans-serif;*/
	font-family: "Kiwi Maru", sans-serif;
	color: black;
	text-align: left;
	font-weight: 500;
}

div.title {
	font-weight: bold;
	color: blue;
	text-align: left;
}

div.title2 {
	font-weight: bold;
	color: blue;
	font-size: 90%;
	line-height: 90%;
	text-align: left;
}

div.country {
	color: black;
	text-align: left;
}


/*---------------------------------------------------------*/
/*										フッターエリアを装飾										*/
/*---------------------------------------------------------*/

.footer {
	border-top: 1px #000000 solid;	/*上枠線_(太さ、色、スタイル)*/
	padding-top: 10px;
	padding-bottom: 10px;
	color: #000000;
}

.footer a {
	color: #0000ff;
	text-decoration: none;
}

.footer a:hover {
	color: #ff0000;
	text-decoration: underline;
}


/* 幅が1100px以下の場合、年月選択メニューを縦に表示、 */
@media screen and (max-width: 1100px) {
/*
	div.ym-menu {
		display: flex;
		margin-top: 0;
		margin-bottom: 10px;
		margin-left: 10px;
		z-index: 10;
	}

	div.ym-menu ul {
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
	}

	div.ym-menu ul li {
		list-style: none;
		margin: 0;
		padding: 0;
		font-size: 14px;
		float: left;
		position: relative;
		width: 70px;
		height: 40px;
		line-height: 40px;
		background-color: rgba(255, 129, 141, 0.90);
		color: #4D4D4D;
		text-align: center;
		font-weight: bold;
		z-index: 10;
	}

	div.ym-menu ul li a {
		color: #4D4D4D;
		display: block;
		text-decoration: none;
	}

	div.ym-menu ul li:hover,
	div.ym-menu ul li a:hover {
		background-color: rgba(234, 80, 57, 0.90);
		color: #ffffff;
	}

	div.ym-menu ul li ul {
		position: absolute;
		top: 0;
		z-index: 10;
		left: 70px;
		display: flex;
		flex-direction: row;
		width: 500px;
}	

	div.ym-menu ul li ul li {
		visibility: hidden;
		overflow: hidden;
		height: 0;
		background-color: rgba(255, 218, 215, 0.90);
		z-index: 10;
	}

	div.ym-menu ul li ul li:hover, 
	div.ym-menu ul li ul li a:hover {
		background: #FFAFA9;
		background-color: rgba(255, 175, 169, 0.90);
	}

	div.ym-menu ul li:hover ul li,
	div.ym-menu ul li a:hover ul li {
		visibility: visible;
		overflow: visible;
		height: 40px;
		line-height: 40px;
		z-index: 10;
	}

	div.ym-menu ul li.stay-year {
		background-color: rgba(57, 234, 72, 0.9);
		color: #ffffff;
	}

	div.ym-menu ul li.doodle-home {
		background-color: rgba(175, 238, 238, 0.9);
	}

	div.ym-menu * {
		-webkit-transition: 0.0s;
		-moz-transition: 0.0s;
		-ms-transition: 0.0s;
		-o-transition: 0.0s;
		transition: 0.0s;
	}
*/


}

@media screen and (max-width: 900px) {
/*----------------------------------------------------------*/
/*											Doodleボックス											*/
/*----------------------------------------------------------*/
	div.contents {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		padding: 20px 0;/*20px;*/
		max-width: 600px;
		place-content: center;
		place-items: center;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
	}
}

@media screen and (max-width: 650px) {
/*----------------------------------------------------------*/
/*											Doodleボックス											*/
/*----------------------------------------------------------*/
	div.contents {
		display: grid;
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 20px 0;/*20px;*/
		max-width: 800px;
		place-content: center;
		place-items: center;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
	}
}