@font-face {
	font-family: "Nikumaru";
	src: url('../font/07にくまるフォント.otf') format("woff"),
		 url('../font/07にくまるフォント.ttf') format("truetype");
}

body *{
	font-family: "Nikumaru";
}

/* スマホの幅 */
@media (min-width: 576px) {
	.title {
		top:  -20px;
		height: 40px;
		line-height: 40px;
	}
	.img-name img {
		width: 100%;
	}
	.img-clock img{
		width: 80%;
	}
	.paddington img {
		width:  100%;
		height: 50%;
	}
	.date {
		font-size: 1em;
	}
	.frame > p,
	.tk-text > p,
	.title,
	.about p,
	.about ul:not(.about ul ul),
	.about summary {
		font-size: 1.7em;
	}
}

/* タブレットの幅 */
@media (min-width: 768px) {
	.title {
		top:  -15px;
		height: 30px;
		line-height: 30px;
	}
	.img-name img {
		width: 100%;
	}
	.img-clock img{
		width: 80%;
	}
	.paddington img {
		width:  100%;
		height: 90%;
	}
	.date {
		font-size: 1.2em;
	}
	.frame > p,
	.tk-text > p,
	.title,
	.about p,
	.about ul:not(.about ul ul),
	.about summary {
		font-size: 1.5em;
	}
}

/* これより上はPCの幅 */
@media (min-width: 992px) {
	.title {
		top:  -13px;
		height: 26px;
		line-height: 26px;
	}
	.img-name img {
		width: 100%;
	}
	.img-clock img{
		width: 80%;
	}
	.paddington img {
		max-width:  90%;
		max-height: 100%;
	}
	.date,
	.frame > p,
	.tk-text > p,
	.title,
	.about p,
	.about ul:not(.about ul ul),
	.about summary {
		font-size: 1.2em;
	}
}

@media (min-width: 1280px) {
	.tk-text > p {
		font-size: 1em;
	}
}

/* 左上から右下に向けて、1色目→2色目のグラデーション */
body {
	background: linear-gradient(to bottom right, #ff8c00, #9f166a) !important;
	/* background: linear-gradient(to bottom right, #e39914, #8d1e5d) !important; */
}

.contents {
	margin: 80px 50px 100px 50px;
	background-color: #fefefe;
	border-radius: 30px;
}

.title-image {
	width:  80%;
	height: auto;
}

.bold {
	font-weight: bold;
}

.about {
	background-color: #F0F5F9;
}

.about:not([open]) {
	margin-bottom: 7px;
}

.about summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding: 0.5em 1em;
	border-radius: 5px;
	background: #A41963;
	color: white;
	font-weight: bold;
	cursor: pointer;
}

/* .about summary::-webkit-details-marker { */
    /* display: none; */
/* } */

.about summary::after {
	transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
    transition: transform 0.3s;
}

/* 開く・しまう時に矢印が回る */
.about[open] summary::after {
    transform: rotate(225deg);
}

.about p,
.about ul:not(.about ul ul) {
    transform: translateY(-10px);
    opacity: 0;
    margin-bottom: 10px;
    padding: 1em 2em 2em 2em;
    color: #333333;
    transition: transform 1s, opacity 1s;
}

.about[open] p,
.about[open] ul:not(.about ul ul) {
    transform: none;
    opacity: 1;
}

.frame {
	position: relative;
	margin: 2em 0;
	padding: 1.5em;
	border-radius: 8px;
}

.title {
	position: absolute;
	display: inline-block;
	left: 10px;
	width: auto !important;
	padding: 0 9px;
	font-weight: bold;
	border-radius: 5px;
}

.title img{
	height: auto;
	text-align: center;
}

.frame-next {
	position: relative;
	border: solid 3px #AF0082;
	height: 50%;
	margin-top: 5px;
	margin-bottom: 10px;
}

.frame-next img,
.frame-stream img {
	position: absolute;
	top: 0px;
	left: 0px;
	width:  100%;
	height: 100%;
	opacity: 0.7;
}

.title-next {
	background: #AF0082;
	color: white;
}

.frame-stream {
	position: relative;
	border: solid 3px #e87019;
	height: 40%;
}

.title-stream {
	background: #e87019;
	color: white;
}

.title-center {
	position: absolute;
	display: inline-block;
	top:  -13px;
	left: 0;
	width: auto !important;
	margin: 0;
	padding: 0;
	line-height: 25px;
	font-size: 1em;
	font-weight: bold;
	border-radius: 10px;
}

.frame-tk {
	border: solid 3px #D70035;
}

.title-tk {
	background: #D70035;
	color: white;
}

.frame > p {
	margin:  0;
	padding: 0;
}

.img-clock img{
	vertical-align: center;
	height: auto;
}

/* 元のセレクタにtransitionを指定すると、マウスが離れた時にアニメーション表示する */
/* .tk-circle img { */
	
/* } */

/* 誕生日キャラにマウスを合わせると、ちょっとズームする */
.tk-circle img:hover{
	transform:scale(1.1, 1.1);
	/* transition:0.2s all; */
}

/* 上下方向に中央に揃えて、サイズを自動で変える */
.paddington img {
	vertical-align: center;
	height: auto;
}

.hashtag {
	text-align: center;
	/* margin-top: 10px; */
}
.hashtag p {
	margin: 6px;
}

.stream-url {
	z-index: 5;
}
.end-image {
	z-index: 1;
}