@charset "UTF-8";
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{ background: #fff; color: #000; }
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, figure{ margin: 0; padding: 0; }
table{ border-spacing: 0; border-collapse: collapse; }
fieldset, img{ border: 0; }
address, caption, cite, code, dfn, em, strong, th, var{font-weight: 400; font-style: normal; }
ol, ul{ list-style: none; }
caption, th{ text-align: left; }
h1, h2, h3, h4, h5, h6{ font-weight: 400; font-size: 100%; line-height:1em;}
q:after, q:before{ content: ""; }
abbr, acronym{ border: 0; font-variant: normal; }
sup{ vertical-align: text-top; }
sub{ vertical-align: text-bottom; }
input, select, textarea{font-weight: inherit;font-size: inherit;  font-family: inherit; }
legend{ color: #000; }
#yui3-css-stamp.cssreset{ display: none; }

body, html{ font-size: 16px; color:#333333; font-family : 'EB Garamond', "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; }
a { text-decoration:none; color:#333;}
a:hover { text-decoration:none; color:#999;}
a:visited { text-decoration:none;}


/* common */
h1, h2, h3, h4, h5, h6, p{
	line-height:160%;
}
.reference { border-left:1px solid #DDD; padding-left:15px; color:#666; }

/* header */
.mainVisual { 
	position:relative;
	display:block;
	background: url(../img/imgMV202106.jpg) top center;
	background-size: cover;
	width:100vw;
	height:80vh;
}
.mainVisual h1 { 
	font-size:48px;
	color:#FFF;
	text-align:center;
	text-shadow:0 0 10px rgba(0,0,0,1.00);
	padding-top:50px;
}
.mainVisual h1 span { 
	display:block;
	font-size:20px;
	margin:0;
	padding:0;
	line-height:1;
}
.mainVisual nav {
	position:absolute;
	bottom:0px;
	width:100%;
}
.mainVisual nav ul {
	background:rgba(255,255,255,0.80);
	text-align:center;
	padding:10px 0;
}
.mainVisual nav ul li{
	display:inline-block;
	font-size:18px;
	margin-right:50px;
}
.mainVisual nav ul li:last-child{
	margin-right:0;
}
.exLink:after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url(../img/icon_external-link.svg) no-repeat top right;
	background-size: contain;
	vertical-align: middle;
	padding-left: 6px;
}
.mainVisual-pages{
	background: url(../img/imgMV202106.jpg) center 20%;
	background-size: cover;
	width:100%;
	height:400px;
}
.bgWorks {
	width:100%;
	margin:0;
}

.bgWorks img {
	width:100%;
}

/* contact */
#contact .textRequired {
	text-align: center;
}
#contact .btnSubmit {
	text-align: center;
}
#contact .textThanks {
	text-align: center;
	margin:50px 0 100px 0;
}
#contact .btnSubmit input {
	border:1px solid #CCC;
	padding: 10px 30px;
	text-align: center;
	background: #EEE;
	margin: 10px 0 30px 0;
}


/* footer */
footer{
	background:#F8F8F8;
	padding:10px 0;
}
.copyright { 
	color:#333;
	text-align:center;
	padding:10px 0;
}

@media screen and (max-width: 480px) {
		/* header */
		.mainVisual { 
			height:35vh;
		}
		.mainVisual nav ul li{
			margin-top:5px;
			margin-bottom:5px;
		}
		/* Layout */
		#profile, #works, #gallery, #contact {
			width:100%;
		}
	
		#profile h2, #works h2, #gallery h2, #contact h2 {
			font-size:30px;
			color:#666;
			text-align:center;
			margin:20px 0;
		}
	
		/* profile */
		#profile figure {
			display:none;
		}
		#profile h3 {
			font-size:20px;
			margin-bottom:10px;
		}
		#profile h4 {
			font-size:14px;
			margin-bottom:20px;
		}
		#profile .profileText {
			padding:0 20px;
		}
		#profile p {
			font-size:11px;
			margin-bottom:1em;
		}
		
		/* works */
		#works h2 {
			margin-bottom:46px;
		}
		#works h2 span {
				font-size:16px;
			display:block;
			margin:0;
			padding:0;
			line-height:1;
		}
		#works ul li h3 {
			font-size:24px;
			margin-bottom:20px;
		}
		#works ul li h3 span {
			font-size:13px;
			display:block;
			margin:0;
			padding:0;
			line-height:1.35;
		}
		#works ul li {
			font-size:10px;
			margin:20px 20px 40px 20px;
			word-break:break-all;
		}
		#works ul li figure {
			width:100%;
			margin-bottom:10px;
		}
		#works ul li figure img {
			width:100%;
			border-radius:5px;
		}
		#works ul li .textComments {
			margin-top:10px;
			font-size:13px;
		}

	/* separeteBG */
	.picture1, .picture2 {
		position: relative;
		width: 100%;
		min-height: 250px;
	}
	.picture2 {
		min-height: 250px;
	}
	.bgSeparate1 .picture1 {
		background:url(../img/bgWorks1.jpg) no-repeat top center;
		background-size:100%;
	}
	.bgSeparate2 .picture2 {
		background:url(../img/bgWorks2.jpg) no-repeat top center;
		background-size:100%;
	}
	.picture1 h1, .picture2 h1 {
			text-align:right;
			margin:10px;
			font-size:12px;
			color:rgba(255,255,255,0.70);
			text-shadow:0 0 10px rgba(0,0,0,0.60);
	}
		/* contact */
		#contact table  {
			margin: 0 20px;
			width: calc(100% - 60px);
		}
		#contact table th, #contact table td  {
			display: block;
		}
		#contact table td  {
			margin-bottom: 20px;
		}
		#contact table td input,  #contact table td textarea {
			width: 100%;
			padding: 10px;
			border-radius: 5px;
			border:1px solid #CCC;
			font-size: 20px;
		}
		#contact table td textarea {
			height: 5em;
		}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
		/* Layout */
		#profile, #works, #gallery, #contact {
			width:100%;
		}
	
		#profile h2, #works h2, #gallery h2, #contact h2 {
			font-size:30px;
			color:#666;
			text-align:center;
			margin:20px 0;
		}
	
		/* profile */
		#profile figure {
			display:none;
		}
		#profile h3 {
			font-size:20px;
			margin-bottom:10px;
		}
		#profile h4 {
			font-size:14px;
			margin-bottom:20px;
		}
		#profile .profileText {
			padding:0 20px;
		}
		#profile p {
			font-size:13px;
			margin-bottom:1em;
		}
		
		/* works */
		#works h2 {
			margin-bottom:46px;
		}
		#works h2 span {
			font-size:16px;
			display:block;
			margin:0;
			padding:0;
			line-height:1;
		}
		#works ul li h3 {
			font-size:24px;
			margin-bottom:20px;
		}
		#works ul li h3 span {
			font-size:13px;
			display:block;
			margin:0;
			padding:0;
			line-height:1.35;
		}
		#works ul li {
			font-size:13px;
			margin:20px 20px 40px 20px;
			word-break:break-all;
		}
		#works ul li figure {
			width:100%;
			margin-bottom:10px;
		}
		#works ul li figure img {
			width:100%;
			border-radius:5px;
		}
		#works ul li .textComments {
			margin-top:10px;
			font-size:13px;
		}
		/* contact */
		#contact table  {
			margin: 0 20px;
			width: calc(100% - 60px);
		}
		#contact table th  {
			width: 10em;
		}
		#contact table th, #contact table td  {
			padding-bottom: 20px;
		}
		#contact table td input,  #contact table td textarea {
			width: 100%;
			padding: 5px;
			border-radius: 5px;
			border:1px solid #CCC;
			font-size: 16px;
		}
		#contact table td textarea {
			height: 5em;
		}
	/* separeteBG */
	.picture1, .picture2 {
		position: relative;
		width: 100%;
		min-height: 480px;
	}
	.picture2 {
		min-height: 480px;
	}
	.bgSeparate1 .picture1 {
		background:url(../img/bgWorks1.jpg) no-repeat top center;
		background-size:100%;
	}
	.bgSeparate2 .picture2 {
		background:url(../img/bgWorks2.jpg) no-repeat top center;
		background-size:100%;
	}
	.picture1 h1, .picture2 h1 {
			text-align:right;
			margin:20px;
			font-size:16px;
			color:rgba(255,255,255,0.70);
			text-shadow:0 0 10px rgba(0,0,0,0.60);
	}
}

@media screen and (min-width: 769px) {
		/* Layout */
		#profile, #works, #gallery, #contact {
			max-width:1010px;
			margin:0 auto;
			padding: 50px;
		}	
		
		#profile h2, #works h2, #gallery h2, #contact h2 {
			font-size:48px;
			color:#666;
			text-align:center;
			margin-bottom:30px;
		}

		/* profile */
		#profile figure {
			float:left;
			width:525px;
			margin-right:30px;
			padding-bottom: 60px;
		}
		#profile figure img {
			width:100%;
			border-radius:5px;
		}
		#profile h3 {
			font-size:26px;
			margin-bottom:20px;
		}
		#profile h4 {
			font-size:20px;
			margin-bottom:20px;
		}
		#profile p {
			font-size:16px;
			margin-bottom:1em;
		}
		
		/* works */
		#works h2 {
			margin-bottom:46px;
		}
		#works h2 span {
			font-size:16px;
			display:block;
			margin:0;
			padding:0;
			line-height:1;
		}
		#works ul li h3 {
			font-size:28px;
			margin-bottom:20px;
		}
		#works ul li h3 span {
			font-size:13px;
			display:block;
			margin:0;
			padding:0;
			line-height:1.35;
		}
		#works ul li {
			font-size:14px;
			vertical-align:middle;
			margin-bottom:50px;
			display: flex;
		}
		#works ul li figure {
			width:525px;
			margin:0 30px 30px 0;
		}
		#works ul li figure img {
			width:525px;
			border-radius:5px;
		}
		#works ul li .dataWroks {
			width:50%;
		}
		#works ul li .textComments {
			margin-top:26px;
		}
		#contact table  {
			margin: 0 auto;
			width: 700px;
		}
		#contact table th  {
			width: 10em;
		}
		#contact table th, #contact table td  {
			padding-bottom: 20px;
		}
		#contact table td input,  #contact table td textarea {
			width: 100%;
			padding: 5px;
			border-radius: 5px;
			border:1px solid #CCC;
			font-size: 16px;
		}
		#contact table td textarea {
			height: 5em;
		}
		/* separeteBG */
		.picture1, .picture2 {
			position: relative;
			width: 100%;
			height: 700px;
			overflow: hidden;
		}
		.picture2 {
			height: 700px;
		}
		.bgSeparate1 .picture1 {
			background:url(../img/bgWorks1.jpg) no-repeat top center;
			background-size:cover;
		}
		.bgSeparate2 .picture2 {
			background:url(../img/bgWorks2.jpg) no-repeat top center;
			background-size:cover;
		}
		.picture1 h1, .picture2 h1 {
			text-align:right;
			margin:100px;
			font-size:16px;
			color:rgba(255,255,255,0.70);
			text-shadow:0 0 10px rgba(0,0,0,0.70);
		}
}