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

/*フォント*/
@import url('https://fonts.googleapis.com/css?family=Work+Sans:300');
@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');

/*共通*/
blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
	margin: 0;
	padding: 0;
}
.clearfix {
	clear: both;
}
.clearfix:before, .clearfix:after{
	content: "";
	display: table;
}
.clearfix:after{
	clear: both;
}
a {
	text-decoration: none;
	color: #000;
}
ul {
	list-style: none;
}
.center {
	text-align: center;
}
.SvgIcon {
	position: absolute;
	width: 0;
	height: 0;
}
.Svg01-front {
	fill: rgb(0,0,0);
}

/*パソコン用*/
@media only screen and (min-width: 769px) {
	html {
		background: #fff;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		}
	body {
		-webkit-tap-highlight-color: transparent;
		font-family: "Work Sans",Verdana,Arial,"Noto Sans Japanese","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
		font-size: 12px;
		line-height: 1em;
		letter-spacing: .1em;
		font-weight: 200;
		height:100%;
		}
	#hasigo {
		position:relative;
		min-height: 100%;
	}
	#hasigo header {
		width: auto;
		height: auto;
		position: fixed;
		top: 70px;
		left: 80px;
	}
	#hasigo .Svg01 {
		width: 128px;
		height: 30px;
	}
	#hasigo .side-menu {
		display: inline;
		float: left;
		z-index: 10;
		position: fixed;
		top: 163px;
		left: 80px;
	}
	#hasigo .side-menu ul li {
		margin-bottom: 14px;
		font-size: 14px !important;
		line-height: 2.14285714 !important;
	}
	#hasigo .side-menu ul li a {
		position: relative;
		overflow: hidden;
		display: block;
		color: #999;
	}
	#hasigo #content {
		position: relative;
		z-index: 10;
		width: auto;
		padding: 172px 80px 80px 395px;
	}
	#hasigo #content .profile {
		margin-bottom: 80px;
	}
	#hasigo #content .profile .portrait {
		float: right;
		margin-left: 20px;
	}
	#hasigo #content .profile .portrait {
		width: 200px;
	}
	#hasigo #content .profile .portrait img {
		width: 100%;
	}
	#hasigo #content .profile article {
		/*margin-bottom: 60px;*/
	}
	#hasigo #content .profile article p {
		font-size: 14px;
		font-weight: 200;
		line-height: 2.14285714;
		margin-top: -8px;
	}
	#hasigo #content .profile article p.name {
		font-size: 14px;
		line-height: 2.14285714;
	}
	#hasigo #content .contact .left-side {
		float: left;
		width: 110px;
	}
	#hasigo #content .contact .access .left-side {
		margin-top: -8px;
	}
	#hasigo #content .contact .right-side {
		margin-left: 110px;
	}
	#hasigo  #content .contact {
		font-size: 14px;
		line-height: 2.14285714;
		letter-spacing: .05em;
	}
	#hasigo #content .profile article p span,
	#hasigo #content .profile article p.name span,
	#hasigo  #content .contact span {
		font-size: 15px;
	}
	#hasigo #content .contact .maparea {
		/*margin-left: -110px;*/
	}
	#hasigo #content .contact .maparea iframe {
		width: 100%;
		height: 460px;
	}
	#hasigo #content .contact section {
		margin-bottom: 40px;
	}
	/*#hasigo #content .contact section:first-child {
		margin-bottom: 40px !important;
	}
	#hasigo #content .contact section:last-child {
		margin-bottom: 0 !important;
	}*/
	#hasigo .sp {
		display: none !important;
	}
	#hasigo footer {
		position: absolute;
		bottom: 0;
		padding: 5px 0;
		color: #fff;
		background: #000;
		width: 100%;
		z-index: 10;
	}
	.side-menu a:hover,#content a:hover {
		color: rgb(255,0,0) !important;
		fill: rgb(255,0,0);
	}
	.side-menu a,#content a {
		position: relative;
		display: inline-block;
		transition: .3s;
	}
	.side-menu a::after,#content a::after {
		position: absolute;
		bottom: 4px;
		left: 0;
		content: '';
		width: 0;
		height: 1px;
		background-color: rgb(255,0,0);
		fill: rgb(255,0,0);
		transition: .3s;
	}
	.side-menu a:hover::after,#content a:hover::after {
		width: 100%;
	}
	svg:hover {
		opacity: 0.5;
	}
}

/*スマートフォン用*/
@media only screen and (max-width: 768px) {
	body {
		-webkit-tap-highlight-color: transparent;
		font-family: "Work Sans",Verdana,Arial,"Noto Sans Japanese","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
		font-size: 3.73333333vw;
		line-height: 1.7142857;
		letter-spacing: .05em;
		font-weight: 200;
		word-break:break-all;
		height:100%;
	}
	#hasigo #content .profile article p span,#hasigo #content .profile article p.name span,#hasigo  #content .contact span {
		font-size: 4vw;
	}
	#hasigo {
		box-sizing: border-box;
		position:relative;
		min-height: 100%;
		padding-top: 6.66666666vw;
	}
	#hasigo header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 6.66666666vw 6.66666666vw 1.33333333vw;
		margin: 0;
	}
	#hasigo header div,
	#hasigo header a {
		font-size: 0;
		line-height: 0;
	}
	#hasigo .Svg01 {
		aspect-ratio: 4 / 1; /* 325 * 81.25 */
		width: 100%;
	}
	#hasigo .side-menu {
		position: fixed;
		top: calc(21.6666666666vw + 8vw);
		padding: 1.33333333vw 0 1.33333333vw 6.66666666vw;
		width: 100%;
		font-size: 3.2vw;
		list-style: 1;
	}
	#hasigo header,#hasigo .side-menu {
		background: rgba(255,255,255,0.9);
		z-index: 999;
	}
	#hasigo .side-menu ul li {
		display: inline-block;
		margin-right: 5.33333333vw;
	}
	#hasigo .side-menu ul li a {
		color: #999;
	}
	#hasigo #content {
		position: relative;
		z-index: 10;
		width: auto;
		padding: 40vw 6.66666666vw 0;
	}
	#hasigo #content .profile {
		margin-bottom: 16vw;
	}
	#hasigo #content .profile article p.name {
		margin-top: 2.66666666vw;
	}
	#hasigo #content .profile .portrait {
		float: right;
		margin-left: 5.33333333vw;
		margin-bottom: 8vw;
		width: 32vw;
	}
	#hasigo #content .profile .portrait img {
		width: 100%;
	}
	#hasigo #content .contact {
		padding-bottom: 16vw;
	}
	#hasigo #content .contact .left-side {
		float: left;
		width: 29.33333333vw;
	}
	#hasigo #content .contact .right-side {
		width: auto;
		margin-left: 29.33333333vw;
	}
	#hasigo #content .contact .right-side .maparea {
		margin-left: -29.33333333vw;
	}
	#hasigo #content .contact .right-side .maparea iframe {
		width: 100%;
		height: 64vw;
	}
	#hasigo #content .contact .access {
		position: relative;
	}
	#hasigo #content .contact .access .left-side {
		position: absolute;
		top: 65.86666666vw;
	}
	#hasigo #content .contact section {
		margin-bottom: 8vw;
	}
	/*#hasigo #content .contact section:first-child {
		margin-bottom: 10.66666666vw !important;
	}
	#hasigo #content .contact section:last-child {
		margin-bottom: 0 !important;
	}*/
	#hasigo #content .contact .access p {
		margin-bottom: 5.33333333vw;
	}
	#content .contact #map_canvas {
		height: 240px;
		width: 100%;
	}
	#hasigo .pc {
		display: none !important;
	}
	#hasigo footer {
		position: absolute;
		bottom: 0;
		padding: 2vw 0 3vw;
		color: #fff;
		background: #000;
		width: 100%;
		z-index: 10;
		font-size: 3vw;
	}
	/*.side-menu a:hover,#content a:hover {
		color: rgb(255,0,0) !important;
		fill: rgb(255,0,0);
	}
	.side-menu a,#content a {
		position: relative;
		display: inline-block;
		transition: .3s;
	}
	.side-menu a::after,#content a::after {
		position: absolute;
		bottom: 0;
		left: 0;
		content: '';
		width: 0;
		height: 1px;
		background-color: rgb(255,0,0);
		fill: rgb(255,0,0);
		transition: .3s;
	}*/
	.side-menu a:hover::after,#content a:hover::after {
		width: 100%;
	}
	svg:hover {
		opacity: 0.5;
	}
}