@charset "utf-8";
/* CSS Document */


@media screen and (min-width : 750px ) and ( max-width : 1920px ){

.contents {/* 詳細ページリンク */
	width: 70%;
	margin: 2em auto 2em auto;
	list-style: none;
	font-size: 1.2em;
	display: flex;
}
.contents li{	
	display: block;
	margin: .5em;
	width: 100%;
	text-align: center;
}
.contents li a{
    background:#E4E4E4;
    text-decoration: none;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 100%;
    padding:.3em 0 ;
    color:#515151;
    transition: 0.3s ease-in-out;
}
.contents li a:hover{	
    background:#B1A2D5;
    color: #FFF;
    opacity: 1;
}
.contents a:after {
    content: '';
    width: 15px;
    height:15px;
    border-top: 1px solid #515151;;
    border-right: 1px solid #515151;;
    border-radius: 0px;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 45%;
    right:4rem;/* 矢印の移動距離 */
    transition: 0.5s ease-in-out;
}
.contents a:hover:after {
    border-color: #FFF;
    right: 1rem;
} 
.color{/* リンクなし文字 */
    background:#B1A2D5;
    text-decoration: none;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 50%;
    padding:.3em 0 ;
    color: #fff;
    transition: 0.3s ease-in-out;
}

.p{
    width: 80%;
    font-size: 1.1em;
    margin: 0 auto;
}   

    
    
}


@media screen and (max-width : 750px ) {
.contents {/* 詳細ページリンク */
	width: 90%;
	margin: 2em auto 2em auto;
	list-style: none;
	font-size: 1.2em;
}
.contents li{	
	display: block;
	margin: .5em;
	width: 100%;
	text-align: center;
}
.contents li a{
    background:#E4E4E4;
    text-decoration: none;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 100%;
    padding:.3em 0 ;
    color:#515151;
    transition: 0.3s ease-in-out;
}
.contents li a:hover{	
    background:#B1A2D5;
    color: #FFF;
    opacity: 1;
}
.contents a:after {
    content: '';
    width: 15px;
    height:15px;
    border-top: 1px solid #515151;;
    border-right: 1px solid #515151;;
    border-radius: 0px;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 45%;
    right:4rem;/* 矢印の移動距離 */
    transition: 0.5s ease-in-out;
}   

.contents a:hover:after {
    border-color: #FFF;
    right: 1rem;
} 
.color{/* リンクなし文字 */
    background:#B1A2D5;
    text-decoration: none;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width:100%;
    padding:.3em 0 ;
    color: #fff;
    transition: 0.3s ease-in-out;
} 
.p{
    width: 80%;
    font-size: 1.1em;
    margin: 0 auto;
    }  
    
    
    
}