@charset "utf-8";

/*リスト 必要に応じて*/
ul{
    list-style-type: none;
}

/*
div,img{
	border: solid 1px #000000;
}
*/

/*リンク 必要に応じて*/
/*a{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}*/

html{
    scroll-behavior: smooth;
}
body{
    margin-top: 50px;
}
header{
    top: 0px;
}
footer{
    bottom: 0px;
}
:root {
    --site-menu-font-c: #fff;
    --site-menu-back-c: #0271B8;
    --nav-tont-c: #fff;
    --nav-back-c: #000000;
    --header-banner-back-c: #00A0E9;
    --footer-R-font-c: #fff;
    --footer-back-c: #0271B8;
}


.header-banner{
    z-index: 1;
    position: fixed;
    width: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    background: var(--header-banner-back-c);
    font-size: 30px;
    color: #fff;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
    text-shadow: 
		1px  1px 1px #000000,
        -1px  1px 1px #000000,
        1px  -1px 1px #000000,
		-1px  -1px 1px #000000;
}

.chara-TOP{
    display: flex;
    justify-content: center;
    flex-direction: row;
	margin: 0 auto;
	text-align: center;
}
.chara-TOP-img{
    width: 50%;
}




.chara-grid{
	margin: 0 auto;
	width: 50%;
    display: grid;
	grid-template-columns: repeat(2,50%);
}
.chara{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 0 auto;
	margin-bottom: 4vw;
}
.chara-img{
	text-align: center;
}
.chara-img img{
	margin: 0 auto;
	width: 100%;
	height: 100%;
}
.chara ul li::before{
    content: '';
    border-radius: 50%;
    background: #00A0E9;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 10px 5px -1px 0px;
}
.chara-if p{
	text-align: center;
	margin-top: 5px;
	font-size: 2.5vw;
	font-weight: bold;
}
.chara-if-ul{
	width: fit-content;
	margin: 0 auto;
}



.movie{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
}



.footer-css{
    display: flex;
	align-items: center;
	justify-content: center;
    height: 20vw;
    background: var(--footer-back-c);
}
.footer-css div{
    width: 50vw;
}
.footer-L{
    display: flex;
    justify-content: center;
}
.footer-L a img{
    width: 100%;
}
.footer-R{
    display: flex;
    justify-content: center;
    color: var(--footer-R-font-c);
}
.footer-R ul{
    list-style-type: none;
    text-align: left;
}

@media (max-width: 800px) {
	.chara-TOP-img{
		width: 100%;
	}
	.header-banner{
		font-size: 5vw;
	}
	.chara-grid{
		width: 80%;
	}
	.chara-if p{
		font-size: 5vw;
	}
	.chara ul li::before{
		width: 3vw;
		height: 3vw;
		margin: 10px 2px -1px 0px;
	}
	.chara-if-ul{
		font-size: 3vw;
	}
	
	.movie iframe{
		width: 100%;
	}
	
    .footer-css{
        flex-direction: column;
        height: 250px;
    }
    .footer-css div{
        width: 80vw;
    }
    .footer-L{
        padding-bottom: 20px;
    }
}