@charset "utf-8";
/* CSS Document */
/*---------------
 *html
----------------*/
html{
	font-size: 40%;
	scroll-behavior: smooth;
	}

/*---------------------------------
 *header
----------------------------------*/
/*-title-*/
header{
	border-bottom: 1rem groove #CF1337;
	margin: 1% 0% 0% 0%;
	padding: 0% 0% 0% 0%;
	width: 100%;
	height: auto;
	}

.post{
	margin: 0% 0% 0% 0%;
	padding: 0% 0% 0% 0%;
	width: 10vw;
	height: auto;
	}

h1{
	font-family: 'Nothing You Cold Do','Ink Free','Bradley Hand ITC','Noto Sans CJK JP';
	font-size: 5vw;
	font-weight: bold;
	color: #0000BC;
	text-align: center;
	margin: 3% 0% 0.8% 0%;
	padding: 0% 0% 0% 0%;
	width: 100%;
	height: auto;
	}
/*-title-*/
/*---------------------------------
 *body
----------------------------------*/
/*-main-*/
main{
	display: block;
	margin: 0.2%;
	padding: 0.2%;
}
/*-contents-*/
.bigimg{
	margin: 0% 0% 0% 0%;
	padding: 0% 0% 0% 0%;
	width: 90vw;
	height: auto;
	}

.minicon{
	margin: 0% 0% 0% 0%;
	padding: 0% 0% 0% 0%;
	width: 10.5vw;
	height: auto;
	}

.select_box{
	display: grid;
	grid-template-columns: 20% 20% 20% 20% 20%;
	margin: 0.5% 0% 0.5% 0%;
	padding: 0.5% 0% 0.5% 0%;
	width: 100%;
	height: auto;
	}


/*-contents-*/
/*-main-*/
/*-select_guide_bar-*/
.guide_line{
	display: flex;
	border-width: 0.63vw;
	border-style: solid none solid none;
	border-color: #A6AAAD;
	flex-direction: row;
	justify-content: center;
	margin: -1% 0% 2% 0%;
	padding: 0.5% 0% 0.5% 0%;
	}

.please{
	font-family: 'Nothing You Cold Do','Ink Free','Bradley Hand ITC','Noto Sans CJK JP';
	font-size: 1.9vw;
	font-weight: bold;
	letter-spacing: 0.1vw;
	margin: 0.4%;
	padding: 0.05%;
	}

.space{
	display: block;
	margin: -0.2% 0% 1.2% 0%;
	padding: 1%;
	}
/*-select_guide_bar-*/
/*-h2-*/
h2{
	display: block;
	border-width: 1.3vw;
	border-style: dashed none dashed none;
	border-top-color: #E2C42D;
	border-bottom-color: #6FF700;
	font-family: 'Noto Sans CJK JP';
	font-size: 2.25vw;
	line-height: 1.6;
	text-align: center;
	margin: 3% 0%;
	padding: 2% 0%;
	}

.line{
	border-bottom: #F98496;
	border-style: none none dotted none;
	border-width: 1vw;
	margin: 2% 0%;
	padding: 1% 0%;
	}

/*-h2-*/
/*-announce-*/
.announce{
	display: block;
	border-width: 1.3vw;
	border-style: none none dashed none;
	border-bottom-color: #6FFCB5;
	margin: 0% 0% 4.5% 0%;
	padding: 0% 0% 3% 0%;
	}

.announce p{
	display: block;
	font-family: 'Noto Sans CJK JP';
	font-size: 2.6vw;
	line-height: 1.5;
	text-align: center;
	background: #E2C42D;
	color: #fff;
	margin: 0.4% 0%;
	padding: 0.4% 0%;
	}

.skill_list{
	display: grid;
	grid-template-columns: 33% 33% 33% ;
	}

.skill_list li{
	font-family: 'Noto Sans CJK JP';
	font-size: 1.6vw;
	line-height: 1.5;
	text-align: center;
	margin: 1% 0%;
	padding: 1% 0%;
	}
/*-announce-*/
/*-mail_form-*/
.to_message{
	display: block;
	font-family: 'Ink Free','Bradley Hand ITC','Noto Sans CJK JP';
  	font-weight: bold;
  	color: #703000;
	font-size: 5vw;
	margin: 0% 0% 1% 2%;
	padding: 0% 0% 0% 0%;
	}

.mail_illust{	
	display: block;
	margin:  0% 0% -0.5% 3%;
	padding: 0%;
	width: 13.5vw;
	height: auto;
	}


.access{
	display: block;
	font-family:'Noto Sans CJK JP';
	color: #0000BC;
	font-size: 4.8vw;
	text-decoration: underline;
	margin: 0% 0% 2% 0%;
	padding: 0% 0% 0.2% 0%;
	}
/*-mail_form-*/
/*---------------------------------
 *footer
background: #703000;
color: #fff;
----------------------------------*/
/*-footer-*/
footer{
	display: block;
	background: #703000;
	font-family: 'Source Sans Pro','Noto Sans CJK JP';
	margin: 0% 0% 0% 0%;
	padding: 4% 0% 6% 0%;
	height: auto;
	}


footer p{
	display: block;
	font-family:'Noto Sans CJK JP';
	font-size: 4.8vw;
	line-height: 1.5;
	letter-spacing: 0.5vw;
	text-align: center;
	color: #fff;
	margin: 1.5% 0%;
	padding: 0.5% 0%;
	}

small{
	display: block;
	font-family:'Noto Sans CJK JP';
	font-size: 1.4vw;
	line-height: 1.6;
	letter-spacing: 0.35vw;
	text-align: center;
	color: #fff;
	margin: 3% 0% 0% 0%;
	padding: 0.55% 0%;
	}

/*---------------------------------
 *no-js 
----------------------------------*/
/*-sub_spacing-*/
/*-access_spacing-*/
.no-js .access a:hover {
	transition-duration: 0.4s;
	transition-timing-function: ease;
	transition-delay: 0.2s;
	color: #FF0000;
	font-size: 4.85vw;
	letter-spacing: 0.5vw;
	}