@charset "utf-8";
/* /support/mocopi/download/index.css */


#contens section{
	margin: 0 0 4em 1em;
}

#contents .appArea {
	display: flex;
	margin: 1em 0;
	padding: 1em 0;
}

#contents .txt span.annotation{
	display: inline-block;
	padding-left: 1em;
	text-indent: -1em;
}

#contents .appArea .img {
	display: inline-block;
	margin-right: 2em;
}

#contents .appArea ul.linkList{
	display: flex;
	margin-top: 3em;
	padding-left: 0;
	list-style-type: none;
}

#contents .appArea ul.linkList > li{
	margin-bottom: 0;
}

#contents .appArea ul.linkList > li a{
	display: block;
}

a.btn {
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    font-size: 1.3rem;
    letter-spacing: 0.1em;
    padding: 0.5em 0;
    margin: 1em 0;
    font-weight: bold;
    border: 2px solid #74c3d5;
    background: #74c3d5;
    color: #000;
    border-radius: 100vh;
    transition: 0.5s;
	position: relative;
}

a.btn:hover {
    transition: .5s;
	text-decoration: underline;
}

a.btn:after {
    display: block;
    position: absolute;
    top: calc(50% - 8px);
    right: calc(50% - 145px);
    border-top: 7.5px solid transparent;
    border-bottom: 7.5px solid transparent;
    border-left: 10px solid #000;
    transition: .5s;
    content: "";
}

@media (min-width: 641px){
	#contents .appArea ul.linkList > li + li{
		margin-left: 10px;
	}
}

@media (max-width: 640px){
	#contents .appArea {
		margin-left: 0;
	}
	
	#contents .appArea .img {
		margin-right: 1em;
	}
	
	#contents .appArea ul.linkList{
		flex-direction: column;
		margin-top: 1em;
	}
	
	#contents .appArea ul.linkList > li + li{
		margin-left: 0;
		margin-top: 10px;
	}
	
	a.btn {
		font-size: 1rem;
		letter-spacing: normal;
	}
	
	a.btn:after {
		right: calc(50% - 94px);
	}

}

@media (max-width: 360px){
	a.btn {
		text-align: left;
		padding-left: 0.8em;
	}
}

@media (max-width: 330px){
	a.btn {
		padding-left: 0.2em;
	}
	
		a.btn:after {
		right: calc(50% - 86px);
	}
}