@charset "UTF-8";
/* CSS Document */
/* ========================================
    リセットcss
========================================= */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-style:normal;
	font-weight: normal;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
html{overflow-y: scroll;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
input, textarea{margin: 0; padding: 0;}
ol, ul{list-style:none;}
table{border-collapse: collapse; border-spacing:0;}
caption, th{text-align: left;}
a:focus {outline:none;}

/* ========================================
フロートの解除 (class=“clearfix”を使う時のためのCSS)
========================================= */

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}


html {
	font-size: 25px;
/*ちらつきここから*/	
	visibility: hidden;
}


html.wf-active,
html.loading-delay {
    visibility: visible;
}
/*ちらつきここまで*/



/*ここからbody*/

body {
	width: 1100px;
	max-width: 100%;
	margin: 0 auto;
	font-family: kozuka-gothic-pr6n, sans-serif;
	font-weight: 200;
	font-style: normal;
	color: #606060;
}

header {
	width: 1100px;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

header nav {
	max-width: 100%;
	float: right;
}

header nav li {
	float: left;
	font-size: 15px;
	color: #606060;
	padding-left: 30px;
	padding-top: 48px;
}

header nav li:last-child {
	padding-right: 10px;
}

header nav li a{
	text-decoration: none;
	color: #606060;
	
}

header nav ul li a {
  position: relative;
}
/*ホバーエフェクト*/
header nav ul li a::after {
  /*アンダーラインのスタイル*/
  position: absolute;
  content: "";
  display: block;
  height: 1px;
  background-color: #9A9999;
  bottom: -10px;
  left: 0;
  /*幅を0に設定*/
  width: 0;
  /*アニメーションの速度設定*/
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
header nav ul li a:hover::after {
  /*幅を100%に設定*/
  width: 100%;
}

/*ここから追記*/

/*
header nav {
	display: flex;
	align-items: center;
}*/

div#mb{
		display: none;
	}



div#wrapper {
	width: 1100px;
	max-width:100%;
	height: auto;
	margin: 0 auto;
}



h1 {
    writing-mode: vertical-rl;
    text-orientation: sideways;
	font-size: 1rem;
	font-family: "hiragino-mincho-pron", sans-serif;
	font-weight: 300;
	font-style: normal;	
	margin-left: 5%;/*55px*/
	float: left;
}


h1 span {
	font-size: 0.6rem;
	padding-top: 20px;
	font-family: kozuka-gothic-pr6n, sans-serif;
}

button {
	display: none;
}



main.fadein { 
	width: 100%;
	/*width: 1100px;ピクセルにすると横揺れ*/
	height: auto;
	padding-top: 5%;
	padding-bottom: 5%;
}

.fadein div#main_image {
	width: 80%;/*ここを変えるとメディアクエリがおかしくなる*/
	float: left;
	text-align: center;
	animation: fadein 4s;
}
	

@keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

footer {
	width: 100%;
	max-width:100%;
	height: auto;
}

footer p {
	font-size: 10px;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;
	margin-top: 60px;
}


/*ここからworkのCSS*/

div#work {
	width: 83%;
	/*width: 921px;*//*autoだとフロートが効かないので上に余白が入る*/
	max-width: 83%;
	height: auto;
	padding: 30px 0 0 0;
	/*padding: 0 300px 0 0;*/
	float: right;
}

.slider_3 {
	width: 100%;
}

div#work ul .slider_3 li img {
	width: auto;/*921px直した*/
	max-width: 100%;
	height: auto;/*921px直した*/
}


.slider_3 .slick-next{
    right:0!important;
}
.slider_3 .slick-prev{
    left:0!important;
}
.slider_3 .slick-arrow{
    width: initial!important;
    height: initial!important;
    z-index:2!important;
}

.slick-dots li button:before{
  content: ''!important;
  height:100%!important;
  width: 100%!important;
}

.slick-dots li{
  width: 60px!important;
  height:60px!important;
  margin: 0!important;
}
.slick-dots li button{
  width:100%!important;
  height:100%!important;
}

.slick-dots{
  bottom: initial!important;
  margin-top:20px!important;
}

.slick-dots li:nth-of-type(1) button:before{
  background: url("images/work_01.jpg") no-repeat;
  background-size: contain!important;
}
.slick-dots li:nth-of-type(2) button:before{
  background: url("images/work_02.jpg") no-repeat;
  background-size: contain!important;
}
.slick-dots li:nth-of-type(3) button:before{
  background: url("images/work_03.jpg") no-repeat;
  background-size: contain!important;
}

.slick-dots li:nth-of-type(4) button:before{
  background: url("images/work_04.jpg") no-repeat;
  background-size: contain!important;
}
.slick-dots li:nth-of-type(5) button:before{
  background: url("images/work_05.jpg") no-repeat;
  background-size: contain!important;
}
.slick-dots li:nth-of-type(6) button:before{
  background: url("images/work_06.jpg") no-repeat;
  background-size: contain!important;
}

.slick-dots li:nth-of-type(7) button:before{
  background: url("images/work_07.jpg") no-repeat;
  background-size: contain!important;
}
.slick-dots li:nth-of-type(8) button:before{
  background: url("images/work_08.jpg") no-repeat;
  background-size: contain!important;
}

.slick-dots li:nth-of-type(9) button:before{
  background: url("images/work_9.jpg") no-repeat;
  background-size: contain!important;
}
.slick-dots li:nth-of-type(10) button:before{
  background: url("images/work_10.jpg") no-repeat;
  background-size: contain!important;
}


div#responshive_work {
	width: 100%;
}

div#responshive_work div.slider_4 {
	width: 40%;
	margin:  0 auto;
	}
	



/*ここからpersonalのCSS*/

div#personal {
	width: auto;
	max-width: 100%;
	height: auto;
	margin-left: 12%;
}


ul.slider_1 li img,ul.slider_2 li img {
	width: 300px;
	max-width: 100%;
	height: auto;
	margin-left: 10px;
}

ul.slider_1 {
	width: 100%;
	max-width: 100%;
	padding-top: 100px;
}


ul.slider_2 {
	width: 100%;
	margin-top: 90px;
	padding-bottom: 90px;
	max-width: 100%;
}


/*ここからプロフィールのCSS*/


div#profile {
	width: 250px;/*%にすると段落がおかしくなる*/
	height: auto;
	margin-top: 135px;
	margin-left: 17%;
	float: left;
}
/*margin-left: 160px;*/
/*margin-left: 14%;*/

div#profile p {
	font-size: 0.6rem;/*15px*/
	font-family: "Hiragino Mincho ProN";
}

div#profile h2 {
	margin-bottom: 50px;
	font-size: 0.7rem;/*18px*/
	font-family: "Hiragino Mincho ProN";
}


div#my_photo {
	width: 32%;/*360px*/
	height: auto;/*240px 21%*/
	margin-top: 80px;
	margin-right: 9%;/*105px;*/
	margin-bottom: 323px;
	float: right;
}

div#my_photo img {
	width: 100%;/*360px*/
	height: auto;/*240px 21%*/
}




/*ここからcontactのCSS*/

div#contact_form {
	width: 55%;
	height: auto;
	margin-right: 16%;/*180px*/
	/*margin: 0 auto;*/
	margin-top: 20px;
	padding: 40px;
	border: 1px solid #B1B0B0;
	float: right;
}



div#contact_form h3 {
	font-size: 18px;
	font-family:"Hiragino Mincho ProN";
	margin-bottom: 40px;
}

label {
	font-size:15px; 
	font-family: "Hiragino Mincho ProN";
}

div#contact_form form div {
	padding-bottom: 40px;
}

div#contact_form input#name,div#contact_form input#mail,div#contact_form input#phone {
	width: 70%;/*410px*/
	height: 32px;
	
}

label[for="name"] {
	padding-right: 80px;
}

label[for="mail"] {
	padding-right: 22px;
}

label[for="phone"] {
	padding-right: 50px;
}

label[for="message"] {
	padding-right: 50px;
	display: block;
	width: 80px;
	padding-top: 0;
	float: left;
}

textarea {
	width: 70%;
	height: 185px;
	float: left;
	font-size: 15px;
	line-height: 20px;
	padding-left: 5px;
}



input[type="submit"] {
	width: 150px;
	height: 35px;
	background-color:#ececec;
	margin-left: 240px;
}

input [value="送信する"] {
	font-family: "Hiragino Mincho ProN";
}


.slider_3,.slider_4,slider_1,slider_2 {
	visibility: hidden;
}

.slider_3.slick-initialized,.slider_4.slick-initialized,
.slider_1.slick-initialized,.slider_2.slick-initialized
{
	visibility: visible;	
}



@media (max-width: 1009px){
	div#work {
		display:none;
}
	div#responshive_work {
		display: block;
	}
	div#responshive_work div.slider_4 {
	width: 40%;
	margin:  0 auto;
	}
	
	div#responshive_work div.slider_4 div img{
		width: 100%;
	}
	
	footer p {
	padding-top: 30px;
	padding-bottom: 30px;
	margin-top: 0;
	}
	
	
	
}

/*タブレットサイズ(画面サイズが995pxまで適用*/
@media (max-width: 995px){
	h1 {
		padding: 0;
		font-size: 0.9rem;
	}
	
	main.fadein img {
		width: 80%;
		height: 80%;
	}
	
	div#responshive_work div.slider_4 {
	width: 60%;
	margin:  0 auto;
	}
	
	div#profile {
	margin-left: 10%;
	}
	
	div#contact_form {
	width: 70%;
	margin: 0 auto;
	}
	
	
	
	
	
	}

@media screen and (max-width: 768px){
	h1 {
		padding: 0;
		font-size: 0.8rem;
	}
	
	
	main.fadein img {
		width: 80%;
		height: 80%;
	}
	
	div#responshive_work div.slider_4 {
	width: 75%;
	margin:  0 auto;
	}
	
	div#profile,div#my_photo {
		float: none;
	}
	
	div#profile {
		margin: 0 auto;
		padding: 5% 0;
	}
	
	div#my_photo,div#profile {
	width: 45%;/*360px*/
	height: auto;/*240px 21%*/
	margin: 0 auto;
	}
	
	div#my_photo img {
	width: 100%;/*360px*/
	height: auto;/*240px 21%*/
	margin: 0 auto;
}
	
	div#profile h2 {
	margin-bottom: 30px;
	}
	
	div#contact_form {
	width: 80%;
	padding: 20px 10px 20px 20px;
	margin-left: 0;
	}
	
	
		
	input[type="submit"] {
	display: block;
	margin: 0 auto;
}
	
	div#contact_form input#name,div#contact_form input#mail,div#contact_form input#phone {
	/*width: 52%;*//*410px*/
	height: 32px;
	width: 60%;	
	
}
	
	textarea {
	width: 60%;
	}
	

	
	

	
}



/*モバイルサイズ(画面サイズが468pxまで適用)*/

@media screen and (max-width: 468px){

	h1 {
		padding: 0;
		font-size: 0.8rem;
		margin-top: 20px;
		margin-left: 5px;
	}
	
	main.fadein img {
		width: 70%;
		height: 70%;
		margin-top: 30px;
		margin-right: 10px;
	}
	
	ul.slider_1 li img,ul.slider_2 li img {
	margin-left: 0;
	}
	 
	div#personal {
		margin-left: 40px;
	}
	header nav li {
		padding-left: 20px;
	}
	
	header nav li:last-child {
	padding-right: 0px;
}
	ul.slider_1 li img,ul.slider_2 li img {
	width: 200px;
	max-width: 100%;
	height: auto;
}
	
	div#responshive_work div.slider_4 {
	width: 90%;
	margin:  0 auto;
	margin-top: 40px;
	}
	
	div#work {
		margin-top: 20px;
	}
	
	div#my_photo,div#profile {
	width: 60%;/*360px*/
	height: auto;/*240px 21%*/
	margin: 0 auto;
	}
	
	div#profile {
		margin-top: 60px;
	}
	
	div#profile h2 {
	font-size: 15px;/*0.4rem*/
}
	
	div#profile p {
	font-size: 13px;
}
	
	div#contact_form input#name,div#contact_form input#mail,div#contact_form input#phone {
	width: 90%;/*410px*/
	height: 32px;
		
	}
	
	div#contact_form {
		padding: 10px 0 10px 10px;
		margin-top: 20px;
	}
	
	label{
		font-size: 13px;
		display: block; 	
		}
	
	label[for="message"] {
		float: none;
		margin-bottom: 10px;
	}
	
	
	input,textarea{
		display: block;
		margin-top: 10px;
		width: 90%;
	}
	
	textarea{
		font-size: 13px;
		float: none;
	}
	
	
	input[type="submit"] {
	width: 80px;
	height: 30px;
	font-size: 12px;
}
	
	
	div#contact_form h3 {
		font-size: 15px;
	}
	
	/*ここから追記*/
	
	
	nav {
		display: none;
	}
	
	div#mb {
		display: block;
	}
		
	ul.menu {
	  position: fixed;
	  right: -40%;
	  width: 40%;
	  height: 100vh;
	  margin-left: auto;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  background-color:rgba(221,219,219,0.8); 
	  align-items: center; 
	  transition: .3s;
	}
	
	ul.menu li a {
	text-decoration: none;
	color: #606060;
	font-size: 15px;
	}
	
	button {
	display: block;
}

	 
	/* ボタンの配置位置  */
	
	
	.btn {
	  position: fixed;
	  top: 20px;
	  right: 10px;
	  /* ボタンの大きさ  */
	  width: 35px;
	  height: 35px;
	  /* 最前面に */
	  z-index: 10;
	}
	
	.btn-line {
	display: block;
	position: relative;  /* バーガー線の位置基準として設定 */
	width: 100%;  /* 線の長さと高さ */
	height: 4px;
	background-color: #606060;  /* バーガー線の色 */
	transition: .2s;
}
	/****** 上下のバーガー線 *****/
	.btn-line::before,
	.btn-line::after {
	  content: "";
	  position: absolute;
	  right: 0px;
	  width: 100%;
	  height: 100%;
	  background-color: #606060;
	  transition: .5s;
	}
	.btn-line::before {
	  /* 上の線の位置 */
	  transform: translateY(-10px);
	}
	.btn-line::after {
	  /* 下の線の位置 */
	  transform: translateY(10px);
	}
	
	.menu.open {
	  right: 0;
	  z-index: 8;
	}
	
	/***** メニューオープン時 *****/
	.btn-line.open {
		background-color: transparent;  	/* 真ん中の線を透明に */
	}
	.btn-line.open::before ,
	.btn-line.open::after {
		content: "";
		background-color: #606060;  /* 上下の線の色を変える */
		transition: .2s;
	}
	.btn-line.open::before {
		transform: rotate(45deg);  /* 上の線を傾ける */
	}
	.btn-line.open::after {
		transform: rotate(-45deg);  /* 下の線を傾ける */
	}

	
	}