@charset "UTF-8";
.timeline {
	display: none;
}

@media screen and (min-width: 768px) {
	.timeline {
		display: block;
	}
	
	.background-layer .timeline__default, 
	.background-layer .mail {
		background: transparent !important;
	}
	
	.section.timeline {
		overflow: hidden;
	}
	
	.timeline .title-optionable {
		display: block;
		padding: 0 0 0 40px;
	}
	
	.timeline .title-optionable .headline {
		margin-bottom: 24px;
	}
	
	.timeline__default::before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: inherit;
	}

	.timeline__default .mail {
		max-width: 880px;
		margin: 0 auto;
		padding: 40px;
	}

	.title-optionable ~ .timeline__default .mail {
		max-width: 1120px;
	}

	.timeline__default .mail__inner {
		padding: 0;
	}

	.timeline__default .mail__group {
		float: left;
		width: calc(100% - 400px);
	}

	.timeline__default .mail-grid__inner {
		float: right;
		width: 360px;
		margin-top: 0;
	}

	.timeline__default .mail__title {
		font-size: 20px;
	}

	.timeline__default .mail__text {
		font-size: 16px;
	}

	.timeline__default .mail__date {
		padding-bottom: 24px;
	}
	
	.timeline__default .mail__action {
		text-align: left;
	}

	.timeline__default .mail__favorite,
	.timeline__default .mail__reply,
	.timeline__default .mail__replied {
		width: auto;
		margin-right: 40px;
		font-size: 18px;
	}

	.mail-favorite__txt::before,
	.mail-reply__text::before {
		font-size: 24px;
	}

	.timeline__default .mail-favorite__txt::before {
		font-size: 26px;
	}
	
	.timeline__default a.text {
		display: block;
	}
	
	.timeline__default a.text:hover {
		opacity: .7;
		transition: .3s ease;
	}
}