@import url(kaereba.css);

/* Tips */
#tips .tips-list.grid {
	margin-bottom:var(--margin);
}
#tips .tips-list.grid a {
	padding:20px;
	display:block;
	height:100%;
}
#tips .tips-list.grid a figure p {
	aspect-ratio:1 / 1;
	overflow:hidden;
}
#tips .tips-list.grid a figure p img {
	object-fit:cover;
	width:100%;
	height:100%;
}
#tips .tips-list.grid a figure figcaption {
	color:var(--color-black);
	font-weight:bold;
	text-align:center;
	font-size:1.2em;
}
#tips .tips-list.grid a figure figcaption span {
	display:block;
	font-size:0.7em;
	line-height:1em;
	background:var(--color-gray);
	color:var(--color-white);
	border-radius:20px;
	padding:5px;
	margin-bottom:10px;
}

#tips.tips-list {
	padding:40px 0;
}
#tips-detail {
	position:relative;
}
#tips-detail h1 {
	font-family: var(--font-1);
}
#tips-detail h1 span {
	display:block;
	max-width:400px;
	font-size:16px;
	line-height:16px;
	background:var(--color-gray);
	color:var(--color-white);
	border-radius:20px;
	padding:5px;
	margin:10px auto;
}
#tips-detail h2 {
	text-align:justify;
	padding-bottom:20px;
}
#tips-detail h3 {
    padding:0 0 10px 0;
    border-bottom:dotted 4px var(--color-gray);
	color:var(--color-blue);
}

#tips-detail .index-menu {
	background:var(--color-superwhite);
	padding:var(--padding);
	margin:60px 0;
	border-radius:var(--radius);
}
#tips-detail .index-menu li {
	padding:0;
	list-style:none;
}
#tips-detail .index-menu ul {
	margin-top:0;
}
#tips-detail .index-menu li a {
	padding:5px 0;
	display:block;
}

#tips-detail figure {
    background:var(--color-lightgray);
    padding:20px;
    border-radius:8px;
    margin:20px auto;
    max-width:600px;
}
#tips-detail figure figcaption {
    text-align:center;
    font-weight:bold;
	color:var(--color-black);
}

#tips-detail p:last-of-type:not(:first-of-type) {
    padding-top:40px;
}

#tips-detail h1 + figure {
	background:none;
	max-width:400px;
}
#tips-detail h1 + figure img {
	border-radius:var(--radius);
}

@media (prefers-color-scheme: dark){

}


/** Media Query **/
@media (max-width : 920px) {

}
@media (max-width : 520px) {

}