:root{

	--color1: #fff;
	--color2: #000;
	--color3: #1B1464; /* blue */
	--color4: #FF0000; /* red */
	
	/* border-image */
	--grade0: linear-gradient(to bottom, #00B9EE, #1F2087) 1;
	--grade45: linear-gradient(to top right, #00B9EE, #1F2087) 1;
	--grade90: linear-gradient(to right, #00B9EE, #1F2087) 1;

	/* background */
	--grade0-bg: linear-gradient(to bottom, #00B9EE, #1F2087);
	--grade45-bg: linear-gradient(to top right, #00B9EE, #1F2087);
	--grade90-bg: linear-gradient(to right, #00B9EE, #1F2087);

}
*{
	color: var(--color2);
	font-family: "source-han-sans-japanese", sans-serif;
	font-weight: 500; /* 1,2,3,4,5,7,9 */
	font-style: normal;
	font-size: max(12px, 1.3vw);
	text-decoration: none;
	text-align: center;
	border: none;
	border-spacing: 0px;
	border-collapse: collapse;
	margin: 0px;
	padding: 0px;
	outline: none;
	line-height: 130%;
	letter-spacing: 0.1em;
	white-space: normal;
	list-style: none;

	font-size-adjust: 100%;
	-webkit-font-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	
	word-break: keep-all;
	overflow-wrap: anywhere;
}

html, body{
	background-color: var(--color1);
}
img{
	vertical-align:bottom;
}
a,a:link{
/*	color: ;*/
}
a:visited{
/*	color: ;*/
}
a[href]:hover{
/*	text-decoration: underline;*/
	cursor: pointer;
}
a{
	cursor: pointer;
}

h2{
	padding: 3vw;
	
}
h2 img{
	height: 3vw;
}

h3{
	padding: 2vw;
	margin: auto;
	background: var(--grade90-bg);
	color: var(--color1);
	font-size: 150%;
}

h4{
	color: var(--color3);
	font-size: 120%;
	letter-spacing: 1vw;
	margin-top: 6vw;
	margin-bottom: 1vw;
}
#top_sscroll_button{
	position: fixed;
	bottom: 1vw;
	right: 2vw;
	opacity: 0.3;
	display: inline-block;
	cursor: pointer;
	width: 4vw;
}


/********************
 * message
********************/
table.message{
	width: 80%;
	margin: auto;
}
a.message{
	border: 1px solid #000;
	padding: 1vw;
	margin: 1vw;
	display: inline-block;
	border-radius: 1vw;
}
table.message th{
	width: 10vw;
}
table.message th img{
	width: 10vw;
	border-radius: 50%;
}
table.message td.msg{
	vertical-align: top;
	text-align: left;
	padding-left: 3vw;
}
table.message td.msg div{
	color: var(--color3);
	text-align: left;
	margin-top: 1vw;
}


table.message td img{
	vertical-align: middle;
	margin: 3vw 0;
}

/********************
 * Q&A
********************/
table.qa{
	width: 69vw;
	margin: auto;
}
table.qa th{
	width: 3vw;
	vertical-align: top;
}
table.qa tr.q span{
	color: var(--color3);
}
table.qa tr.a span{
	color: var(--color4);
}
table.qa td{
	text-align: left;
	padding: 1vw 0;
}

table.qa th{
	padding: 1vw 0;
}

/********************
 * profile
********************/
article.profile{
	width: 75vw;
	margin: auto;
}
article.profile ruby{
	font-weight: 900;
	font-size: 210%;
}

article.profile div.career{
	text-align: left;
	background: var(--grade0-bg);
	background-repeat: no-repeat;
	background-size: 8vw;
	line-height: 300%;

}
article.profile div.career span{
    display: inline-block;
    width: 7vw;
    text-align: right;
    margin-right: 3vw;
    color: var(--color1);
    white-space: nowrap;
}

article.profile div.career img{
	width: 18vw;
}


/********************
 * top
********************/
article.greeting{
	margin: auto;
	margin-bottom: 6vw;
	width: 90vw;
}
article.greeting p{

}
article.pledge{
	border: 18px solid;
	border-image: var(--grade45);
	width: 90vw;
    margin: auto;
	padding: 3vw;
    box-sizing: border-box;
}
article.pledge img.pledge{
	width: 90%;
}
article.pledge img.pledge_list{
	margin-top: 6vw;
	margin-bottom: 1vw;
	
}
article.pledge p{
	text-align: left;
	    width: 90%;
    margin: auto;
}

article.pledge_all{
	width: 87vw;
	margin: auto;
}
article.pledge_all ol
,article.pledge_all li{
	list-style-type: decimal;
}
article.pledge_all ol{
	padding-left: 9vw;
	margin-bottom: 6vw;
}
article.pledge_all li{
	margin: 1vw 0;
	text-align: left;
	font-size: 150%;
	color: var(--color3);
}
article.pledge_all li small{
	color: var(--color3);
	font-size: 75%;
	opacity: 0.5;
}
article.pledge_all img.pledge_all{
	width: 50vw;
	margin: 6vw;
}

/********************
 * header
********************/
header{
	position: relative;
	margin-top: 1vw;
	padding-bottom: 3vw;
}
header h1{
	margin: 0 3vw 1vw 3vw;
}
header h1 a{
	display: block;
	width: 40vw;
}

header div.sns{
position: absolute;
    top: 1vw;
    width: 40vw;
     right: 3vw;
       text-align: right;
}
header div.sns a{
    width: 3vw;
    display: inline-block;
	margin-left: 3vw;
}

header ul{
position: absolute;
    top: 6vw;
    right: 3vw;
    width: 50vw;
        text-align: right;
}
header ul li{
	display: inline-block;
	margin-left: 5vw;
}
header ul li:first-child{
	margin-left: 0;
}

header ul li a{
	color: var(--color3);
}

header img{
width: 100%;
}
/********************
 * footer
********************/

footer{
	color: var(--color1);
	margin-top: 18vw;
	position: relative;
}
footer *{
	color: var(--color1);
}

footer img{
	width: 100%;
}

footer div.info{
	position: absolute;
	top: 29vw;
	left: 50vw;
}

footer address{
	text-align: left;
}

footer div.form{
    margin: 2vw 0 0 0;
}
footer div.form a{
border: 1px solid #fff;
    padding: 1vw;
    margin: 1vw;
    display: inline-block;
    border-radius: 1vw;
    box-shadow: 0px 0px 3px 0px #666;
    text-shadow: 0px 0px 1px #666;
}