@charset "UTF-8";
/*デスクトップファースト*/
/*1920px--10px=0.523vw*/
/*1080px--10px=0.93vh*/
/* Body */
body {
	font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	/*background-color: pink;*/
	margin:0; padding:0;
	line-height:1.4;
	color:#333;
	font-size: 0.9rem;
	/*background-image:url(../images/bk4.jpg);*/
	overflow-y: scroll;
}

/* Container */
#main {
	width: 78.6vw;
	margin: 0 auto;
	background-color: #fff;
}

/* Header */
.header {
	width: 50%;
	height: 5%;
	background-color: #FFFFFF;
}
logo {
	color: #262626;
	font-weight: bold;
	margin-left: auto;
	letter-spacing: 4px;
	margin-right: auto;
	text-align: left;
	padding-top: 15px;
	line-height: 2em;
	font-size: 22px;
}
.logo img { 
	width: 100%;
	margin-bottom: 0px;
}

#main .nmenu{
	width: 78.6vw;
	height:5vh;
	line-height: 5vh;
	margin: 0 auto;
	background-color: #000;
	/*background-image:  url("../images/bk4.jpg");*/

}

#main .nmenu ul{
	width: 100%;
	margin:0 auto;
	/*background-color: aqua;*/
}




#main .nmenu ul li {
  	display: inline-block;
  	vertical-align: middle;
  	font-family: "Source Sans Pro";
	/*background-color: #ccc;*/
  	/*padding: 10px;*/
	width:12.1vw;
	/*border-left: #5E5A5A dotted 1px;*/
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}

#main .nmenu .non {
	border: none;
}
 
#main .nmenu a {
  	text-align: center;
  	display: table;
  	width: 100%;
	height:5vh;
	font-size: 1.2rem;
  	vertical-align: middle;
	text-decoration: none;
	color: #FFFFFF;
}
 


#main .nmenu ul li:hover {
	color: #717070;
	cursor: pointer;
	background-color:crimson;
}



#main_g img{
	width: 100%;
}


#main .section_area{
	margin: 5vh auto;
	/*background-color: aqua;*/
	height: 30vh;
	width: 78.6vw;
}

#main .section_area .cetro {
	list-style: none;
	max-width: 50%;
	margin: 0 auto;
	
	/*background-color: greenyellow*/
}

#main .section_area ul li{
	display: inline-block;
	overflow: hidden;
	margin: 0 auto;
	/*background-color: greenyellow*/
}



/*hoverの処理-画像拡大-*/

#main .section_area ul li img{	
	width:17.5vw;
	/*background-color: darkblue;*/
	/*float: left;*/
	/*padding: 0.2vw;*/
	border: 1px #ccc solid;
	margin: 0 auto;

}


footer img {
	width: 78.6vw;
}

/*-------------------------------------------*/

#main .section_contents .name{
	float: right;
}
#main .section_contents .content{
	clear:both;
	margin-bottom: 5vw;
}


#main .section_contents{
	margin: 0 auto;
	width:60vw;
	/*background-color: aquamarine;*/
}

#main .section_contents ul{
	margin-top: 2vw;
	margin-bottom: 5vw;
	font-size: 1.2rem;
}

#main .section_contents dl{
	clear: both;
	margin-top: 2vw;
	margin-bottom: 18vw;
	font-size: 1.2rem;
}

#main .section_contents a{
	/*text-decoration: none;*/
	color: #333;
}

#main .section_contents a:hover{
	color: rgb(0,112,192);
}

.r_pic img{
	float: right;
	width:18vw;
}


.obi_ao{
	background-color: rgb(0,112,192);
	color: #fff;
	display:inline;
	padding: 0.5vw;
	
}

.obi_orange{
	background-color: rgb(228,108,10);
	color: #fff;
	display:inline;
	padding: 0.5vw;
}
.obi_ygreen{
	background-color: rgb(146,208,80);
	color: #fff;
	display:inline;
	padding: 0.5vw;
}
.obi_pink{
	background-color: rgb(225,0,102);
	color: #fff;
	display:inline;
	padding: 0.5vw;
}

#main .section_contents .obi_back a{
	background-color: #1D1919;
	color: #fff;
	display:inline;
	padding: 0.5vh 1vw;
	float: right;
	text-decoration: none;
	margin-bottom: 5vw;
}


/*マウスオーバー*/

.mouse_a {
	overflow: hidden;

}

.mouse_a img{
    opacity: 1.0;
	transition-duration: 0.3s;
}
.mouse_a img:hover{
    opacity: 0.7;
	animation: gradation 1s;
}


/*----------------------------自己紹介*/

.ind{
	background-color: #CFCCCC;
	padding: 0.1vw 2vw 3vw 2vw;
	margin-top: 2vw;
	
}
.ind_name{
	font-size: 3rem;
}
.ind_pos{
	font-size: 2rem;
}
.ind_rep {
	text-decoration: underline;
	font-size: 2rem;
}
.ind_pic{
	float: right;
}