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

@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,400;8..144,600;8..144,800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@400;600;800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Texturina:ital,opsz,wght@0,12..72,400;0,12..72,500;0,12..72,600;0,12..72,800;1,12..72,400&display=swap');

@import url('../img/fa/css/font-awesome.min.css');
@import url('https://kit.fontawesome.com/017456029a.js');

@import url('https://fonts.googleapis.com/css2?family=Luxurious+Script&family=Noto+Sans+JP:wght@300;400;500;600;700;800;900&family=Noto+Serif:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Luxurious+Script&family=Noto+Sans+JP:wght@300;400;500;600;700;800;900&family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800&family=Noto+Serif:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');

/*  font-family: 'Luxurious Script', cursive;
    font-family: 'Noto Sans', sans-serif;
    font-family: 'Noto Sans JP', sans-serif;
    font-family: 'Noto Serif', serif;
    font-family: 'Roboto', sans-serif;

  */

* {
    padding: 0 0 0 0;
    box-sizing: border-box;
}

/*

body {
    background-image: url("../img/bg_2012.jpg");
    background-attachment: fixed;
    color: #333;
    font-size: 16px;
    font-family: 'Roboto', "sans-serif";
    overflow-y: auto !important;
}

div {
    font-size: 16px;
    font-family: 'Roboto', "sans-serif";;
}
*/







.detail-wrap {
		display: flex;
		justify-content: center;
		width: 100%;
		padding: 5px 0px 5px 0px;
	}

	.detail-butn  {
		box-shadow: 1px 1px 3px 1px #33333350, -1px -1px 3px 1px #33333340;
		display: flex;
		background: #382CA4;
		border: solid 2px #dddddd;
		border-radius: 10px;
		color: #dddddd;
		font-size: 1rem;
		margin: 5px 5px 5px 5px;
		width: 200px;
		
	}
	.detail-butn  .btn-roster {
		color: #ffffff;
		display: flex;
		justify-content: center;
		padding: 4px 8px 4px 8px;
		text-align: center;
		width: 100px;
		transition: all .5s ease-in-out;
	}
	.detail-butn  .btn-roster:hover {
		border-radius: 10px 0px 0px 10px;
		box-shadow: inset 1px 1px 3px 2px #33333370;
		background: #ff0000;
		color: #000000;
	}
.detail-butn   .btn-detail {
		border-radius: 0 10px 10px 0px;
		color: #ffffff;
		display: flex;
		justify-content: center;
		padding: 4px 8px 4px 8px;
		text-align: center;
		width: 100px;
		transition: all .5s ease-in-out;
	}
.detail-butn   .btn-detail:hover {
		border-radius: 0px 10px 10px 0px;
		box-shadow: inset 1px 1px 3px 2px #33333370;
		background: #ff0000;
		color: #000000;
	}
.detail-butn  .active-roster {
		color: #ffffff;
		background: #800000;
		border-radius: 10px 0 0 10px;
}	
.detail-butn  .active-detail {
		color: #ffffff;
		background: #800000;
		border-radius: 0px 10px 10px 0px;
}	





    
@media screen and (max-width:780px) {
    

    
}