@charset "utf-8";
/*
Theme Name:INNOVATE HACK new Child
Template:innovate_hack_tcd025
*/

/* web font adobe noto sans */
.notosans {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-style: normal;
}

#thin {
	font-weight: 100;
}

#demi {
	font-weight: 300;
}

#regular {
	font-weight: 400;
}
#bold {
	font-weight: 700;
}
#black {
	font-weight: 900;
}
/* 全体のフォント */
html body {
    font-family: noto-sans-cjk-jp, sans-serif;
	font-style: normal;
	font-weight: 300;
}



/* トップページロゴ */
#logo a img {
    width: 215px;
}

/* 今日覚えた韓国単語 のトップイメージ 単語をアイキャッチに */
.words-single .post_image{
	position: relative;
	overflow: hidden;
}
.words-single .post_image img{
	filter: blur(5px) brightness(110%);
	-webkit-filter: blur(5px) brightness(110%);
 	-moz-filter: blur(5px) brightness(110%);
  	-o-filter: blur(5px) brightness(110%);
  	-ms-filter: blur(5px) brightness(110%);
}
.words-single .post_title {
    font-size: 4em;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 50%;
	transform: translateY(-50%) translateX(-50%);
  	-webkit- transform: translateY(-50%) translateX(-50%);
    text-align: center;
	padding: 30px;
	background-color: rgba(256,256,256,0.9);
	line-height : 100%;
	outline: solid 1px rgba(256,256,256,0.9);
	outline-offset: 20px;
	font-family: noto-sans-cjk-kr, sans-serif;
	font-weight: 100;
	font-style: normal;
	white-space: nowrap; //自動改行しない
}
.speak-button {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    padding: 0;
    background: #fff;
    border-radius: 50%;
    -webkit-box-shadow: 0 3px 5px rgb(0 0 0 / 30%);
    box-shadow: 0 3px 5px rgb(0 0 0 / 30%);
    border: none;
	transition: all .3s;
}

.fa-volume-up {
	color: #888;
	line-height: 50px;
}
.speak-button:hover {
	opacity: .6;
}

/* 今日調べた韓国語 コンテンツのバックカラー */
.words-single .post_content {
	background-color: #fffef0;
}

.kanji {
	font-size: 0.7em;
	color: #767676;
}
/* 単語カード */
.tango-card {
    width: 85%;
    background-color: #fbf7da;
    border-radius: 5px;
    padding: 30px;
    box-shadow: 10px 10px 0 #dad3a4;
	position: relative;
	margin: 0 auto;
	box-sizing: border-box;
	margin-bottom: 50px;
}
.tango-card dl dt {
    font-weight: 300;
    font-size: 2em;
    border-bottom: 2px solid #eadeb0;
    line-height: 1.5em;
    margin-bottom: 30px;
}
/* .tango-card::before {
	content: "●";
	color: #dad3a4;
	position: absolute;
	top: 0;
	left: 0;
		
} */

#main_contents .post_content blockquote cite {
	padding: 20px 0 10px 0;
	color: #aaa;
	font-size: 70%;
}
span.trans {
    color: #06a7d4;
    font-size: 1.2em;
    font-style: italic;
}

.post_content p iframe {
	width: 100%;
	height: 450px;
}

/* -------------------------レスポンシブ---------------------------- */


@media screen and (max-width: 480px){
	
	.words-single .post_title {
    	font-size: 3em;
}
	.speak-button {
    	width: 35px;
		height: 35px;
		bottom: 7%;
		line-height: 35px;
}
	.speak-button i {
		line-height: 35px;
	}
}