@charset "utf-8";
@import url('https://use.fontawesome.com/releases/v5.0.6/css/all.css');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
@import url('https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css');
@import url('https://fonts.googleapis.com/earlyaccess/sawarabigothic.css');

body, html, main, footer {
    /* important */
    height: 100%;
	width: 100%;
	margin: 0;
	font-family: "Sawarabi Gothic";
}

h1 {
	margin: 0;
	padding: 64px 0;
	font-family: 'Fredoka One', cursive;
	font-weight: 700;
	font-size: 8.0em;
	text-align: center;
}
  
.cd-fixed-bg {
    min-height: 100vh;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
}
  
.cd-fixed-bg.cd-bg-1 {
  background-image: url("../images/yuwinetcom_top.jpg");
}
.cd-fixed-bg.cd-bg-2 {
  background-image: url("../images/yuwinetcom_bg1.jpg");
}

.cd-scrolling-bg {
    min-height: 100%;
}

h2 {
	margin: 24px auto;
	font-size: 3em;
	text-align: center;
	font-family: "Rounded Mplus 1c";
	font-weight: 700;
}

h3 {
	margin: 8px auto;
	font-size: 2em;
	font-family: "Rounded Mplus 1c";
	font-weight: 700;
}

.color-wh {
	color: #ECECEC;
}

.color-bk {
	color: #171717;
}


.update-links {
	color: #FFFFFF;
}

.update-links dl{
	display: block;
	width: 60%;
	max-width: 80%;
	margin: 0 auto;
	font-size: 1.15em;
}

.update-links dt,
.update-links dd
{
	display: block;
	background: hsla(0,0%,0%,0.75);
	padding: 4px;
	margin: 8px 0;
	min-height: 30px;
}
.update-links dt{
	clear: left;
	float: left;
	min-width: 35%;
	width: 35%;
	font-weight: 700;
}

.update-links dd{
	float: left;
	content: "";
	font-size: 1.0em;
	max-width: 55%;
	width: 55%;
}

.update-links i{
	padding-right: 8px;
}

.update-links dt a,
.update-links dd a{
	color: #ECECEC;
	text-decoration: none;
	padding: 4px 8px;
}

.update-links dt a:hover,
.update-links dd a:hover{
    color: #DC8200;
}

.profile {
	width: 80%;
	margin: 0 auto 40px;
	text-align: center;
	font-size: 1.5em;
}

div.social-tl {
	display: block;
	margin: 0 auto;
	max-width: 80%; 
}

div.twitter-tl,
div.mastodon-tl
{
	float: left;
	display: block;
	width: 45%;
	height: 750px;
	padding: 0 2.5%;
}

div.social-tl:after {
	content: "";
	clear: both;
	display: block;
}

.contact {
	display: block;
	text-align: center;
}

.contact h2{
	padding: 16px 0;
	color: #171717;
}

.contact a{
	font-weight: 700;
	text-decoration: none;
	color: #171717;
}

.contact a:hover{
	color: #DC8200;
}

.last-link {
	display: block;
	margin: 0 10%;
	text-align: center;
}

.last-link a{
	font-weight: 700;
	color: #1D1D1D;
	text-decoration: none;
}

.last-link a:hover{
	color: #DC8200;
}

ul.sns-icon,
ul.text-link{
	padding: 0;
}

ul.sns-icon {
	font-size: 4em;
}

ul.sns-icon li{
	display: inline;
	list-style-type: none;
}

ul.text-link {
	font-size: 4em;
}

ul.text-link li{
	list-style-type: none;
	margin: 64px auto;
}

ul.text-link li img{
	max-height: 180px;
	max-width: 350px;
}

iframe[id^="twitter-widget"] {
    width: 100%!important;
}

h1.timeline-Header-title {
    padding: 0;
	font-family: "Sawarabi Gothic";
	font-weight: 600;
}

.timeline-Tweet-text {
    font-size: 1.2em !important;
    line-height: 1.4em !important;
    }

.MediaCard-media {
	max-width: 75%;
	max-height: 75%;
}

footer {
	display: block;
	padding-top: 64px;
	text-align: center;
	font-size: 1.5em;
	font-family: "Rounded Mplus 1c";
}
@media screen and (max-width: 1080px) {
	.update-links dt{
		font-size: 0.75em;
	}

}
@media screen and (max-width: 900px) {
	html{ font-size: 0.7em; }
	.cd-fixed-bg {
		width: 100%;
		background-size: cover;
		background-attachment: scroll;
	}
	
	h1 {
		font-size: 4.0em;
	}
	
	.update-links dl{
		width: 90%;
		max-width: 90%;
	}
	
	.update-links dt,
	.update-links dd
	{
		min-height: 12px;
	}
	
	.update-links dt{
		width: 100%;
		font-size: 1.3em;
		float: none;
		background: hsla(0,0%,0%,0.75);
		margin-top: 8px;
		padding: 16px 0;
		margin: 0;
	}
	.update-links dd{
		margin: 0 0 20px 0;
		font-size: 1.2em;
		padding: 8px 0;
		min-width: 100%;
	}
	.sp-none {
		display: none;
	}
	div.social-tl {
    display: block;
    margin: 0 auto;
    width: 95%;
    max-width: 95%;
	}
	
	div.twitter-tl,
	div.mastodon-tl
	{
		width: 95%;
		margin: 32px auto;
		height: 600px;
	}
	
	div.twitter-tl div {
	}
	
	ul.text-link {
		font-size: 2.5em;
	}
	
	.last-link{
		width: 100%;
		margin: 0;
	}
	
	ul.text-link li img {
    	max-width: 80%;
}
}