@charset "UTF-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

.background{
	background-color: #FEFAF6;
}

/*=== 9-1-4 矢印が動いてスクロールを促す  ====*/

/*スクロールダウン全体の場所*/
.scrolldown4{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:1%;
	right:50%;
    /*矢印の動き1秒かけて永遠にループ*/
	animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }

/*Scrollテキストの描写*/
.scrolldown4 span{
    /*描画位置*/
	position: absolute;
	left:-20px;
	bottom:10px;
    /*テキストの形状*/
	color: #ffffff;
	font-size: 0.9rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 1.3px;
    height: 20px;
    background: #ffffff;
    transform: skewX(-31deg);
}

.scrolldown4:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	right:0;
    /*矢印の形状*/
	width:1.3px;
	height: 50px;
	background:#ffffff;
}

.wrapper{
	width: 1200px;
	margin: 0 auto;
}

/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in {
	overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
  from {
	transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}


/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box{
	opacity: 0;
}

/*==================================================
動かしたい動き（今回は” ふわっ” を採用）
===================================*/

.fadeUp {
animation-name:fadeUpAnime;
animation-duration:1.8s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}




* {
	margin: 0;
	padding: 0;
	 /* outline:  2px solid blue;   */
}


body {
	font-family: 'Noto Sans Japanese', sans-serif;
	background-color: #FEFAF6;
}

.w100 {
	font-weight: 100;
}

html {
	font-size: 100%;

}

body {
	color: #3D1E26;
	font-size: 0.9rem;
}

img {
	max-width: 100%;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
	
}

a:visited {
	color: #C47E7E;
	text-decoration: underline;
}


.section-title {
	font-weight: 300;
	color: #C47E7E;
	display: inline-block;
	font-size: 4rem;
	text-align: center;
	margin-bottom: 45px;
	-webkit-text-stroke: 1.5px #3d1e26
}

.section-title-work {
	color: #C47E7E;
	display: inline-block;
	font-size: 20px;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 5px;
	-webkit-text-stroke: 0.7px #3d1e26
}

.content-title {
	font-size: 1.5rem;
	margin-bottom: 35px;
	font-weight: 300;
}
.skills{
	font-size: 1.5rem;
	margin-bottom: 35px;
	font-weight: 300;
}


.fix_menu{
	position: fixed;
	width: 100%;
	
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 999;
	padding: 23px 0;
	
	

}
#navwrap{
	position: absolute;
	top: 0;
	right: 0;
	padding: 15px 30px 15px 0;
	background-color: #C47E7E;
	width: 100%;
	
}
.header_menu{
	display: flex;
}
ul,li{
	list-style: none;
	margin: 0;
	justify-content: right;
}
.header_menu li a{
	cursor: pointer;
	padding: 0 20px;
	text-decoration: none;
	color: #fff;
}

.header_menu li a:hover {
	opacity: 0.5;
}
#switch{
	display: none;
}
.main p{
	padding: 500px 0;
	text-align: center;
}
#mainvisual img {

	width: 100%;
	max-width: 1920px;
	height: 1200px;
	object-fit: cover;
}










#about .section-title {
	width: 1200px;
	margin: 150px auto 65px auto;
	display: flex;
	justify-content: space-between;
	border-bottom: solid 2.5px #3d1e26;
}


.flex{
	width: 1200px;
	display: flex;
	margin: 0 auto;
	justify-content: space-between;
	
	}
	
	@keyframes fadeUpAnime{
		
		
		from {
		  opacity: 0;
		  transform: translateY(200px);
		}
	  
		to {
		  opacity: 1;
		  transform: translateY(0);
		}}

	  
	
	.about-text {
		width: 800px;
		text-align: left;
	}
	.about-image {
		width: 300px;
		height: 300px;
		border-radius: 50%;
		/* 円形にする */
		position: relative;
		/* 基準値とする */
		overflow: hidden;
		margin-bottom: 100px;
		
	}


	



/*-------------------------------------------
skills
-------------------------------------------*/

#skills {
	background-color: #FEFAF6;
	padding-top: 100px;
}

#skills .content-title {
	width: 1200px;
	margin: 0 auto;
	padding-bottom: 50px;
	display: flex;
	justify-content: space-between;
}

#skills .content-left {
	text-align: left;


}

#skills .content-right {
	text-align: left;
}

#skills .section-title {
	width: 1200px;
	margin: 0 auto 65px auto;
	display: flex;
	justify-content: space-between;
}

.content-wrap {
	width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;

}

.skills-01 {
	position: relative;
}

.skills-02 {
	position: relative;
}

.skills-text-box01 {
	position: absolute;
	bottom: -216px;
	left: 0px;
}

.skills-text-box02 {
	position: absolute;
	bottom: -216px;
	left: 0px;
}

.skills-01-title {

	color: #FEFAF6;
	font-size: 20px;
	font-weight: 200;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	display: inline;
	padding: .2em;
	line-height: 2.2;
	background-color: #3d1e26;

}

.skills-02-title {
	color: #FEFAF6;
	font-size: 20px;
	font-weight: 200;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	display: inline;
	padding: .2em;
	line-height: 2.2;
	background-color: #3d1e26;
}

.content-left {
	width: 43%;
	margin-bottom: 174px;
}

.content-left img {
	width: 90%;
	margin-left: 30px;
}

.content-right img {
	width: 90%;
	margin-left: 30px;
}

.content-right {
	width: 43%;
	margin-bottom: 174px;
}

.skills-text {
	margin-top: 30px;
}


/*========= レイアウトのためのCSS ===============*/

.bgextend{
	width: 100%;
	
	box-sizing:border-box;
}


/*========= 背景色の動きのCSS ===============*/

/*背景色が伸びて出現 共通*/
.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
	
	
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.7s;
	animation-fill-mode:forwards;
	opacity: 0;
	
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}
/*--------- 上から --------*/
.bgUDextend::before{
	animation-name:bgUDextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #C47E7E;/*伸びる背景色の設定*/
	
	
}



@keyframes bgUDextendAnime{
	0% {
		transform-origin:top;
		transform:scaleY(0);
	}
	50% {
		transform-origin:top;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:bottom;
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger{
    opacity: 0;
}



/*-------------------------------------------
work
-------------------------------------------*/
#work {
	background-color: #FEFAF6;
}

#work .section-title {
	width: 1200px;
	margin: 150px auto 65px auto;
	display: flex;
	justify-content: space-between;
	border-bottom: solid 2.5px #3d1e26;
}


/*==================================================
ギャラリーのためのcss
===================================*/

.gallery {
	columns: 3;
	/*段組みの数*/
	padding: 0 15px;
	/*ギャラリー左右に余白をつける*/
	width: 1200px;
	margin: 0 auto;

}

.gallery li {
	margin-bottom: 20px;
	/*各画像下に余白をつける*/
}

/*ギャラリー内のイメージは横幅100%にする*/
.gallery img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
	/*画像の下にできる余白を削除*/
}

/*　横幅900px以下の段組み設定　*/
@media only screen and (max-width: 900px) {

	.gallery {
		columns: 3;
		width: 95%;
		margin: 0 auto;
	}
}

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

	.gallery {
		columns: 1;
		width: 95%;
		margin: 0 auto;
	}
}


/*========= レイアウトのためのCSS ===============*/

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: #333;
}

a:hover,
a:active {
	text-decoration: none;
}

h1 {
	text-align: center;
	font-size: 6vw;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 30px 0;
}

p {
	margin: 0 10px 10px 10px;
	word-wrap: break-word;
}

/*画像を出現させるアニメーションCSS*/

.flipLeft {
	animation-name: flipLeft;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	perspective-origin: left center;
	opacity: 0;
}

@keyframes flipLeft {
	from {
		transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
		opacity: 0;
	}

	to {
		transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
		opacity: 1;
	}
}

/* 背景が下から出現＋テキスト */

.bgDU {
	position: relative;
	/*テキストの基点となる位置を定義*/
}

.bgDU span.mask {
	position: relative;
	/*背景色の基点となる位置を定義*/
	display: block;
	line-height: 0;
	/*行の高さを0にする*/
	overflow: hidden;
	/*拡大してはみ出る要素を隠す*/
}

.bgDU span.mask::before {
	content: "";
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	opacity: 0;
	/*透過0*/
	transition: .3s ease-in-out;
	/*移り変わる速さを変更したい場合はこの数値を変更*/
	transform: translateY(100%);
	background: #C47E7E;
	/*背景色*/
	width: 100%;
	height: 100%;
}

.bgDU:hover span.mask::before {
	/*hoverした時の変化*/
	opacity: 0.9;
	/*透過なしに変化*/
	transform: translateY(0);
}

.bgDU span.cap {
	/*画像の上のテキスト*/
	position: absolute;
	opacity: 0;
	/*透過0*/
	transition: .5s ease-in-out;
	/*移り変わる速さを変更したい場合はこの数値を変更*/
	z-index: 3;
	/*テキストを前面に出す*/
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/*テキストの位置中央指定*/
	color: #fff;
	/*テキストの色を変えたい場合はここを修正*/
	line-height: 1.5;
	/*行の高さを1.5にする*/
}

.bgDU:hover span.cap {
	/*hoverした時の変化*/
	opacity: 1;
	/*透過なしに変化*/
}

/*-------------------------------------------
contact
-------------------------------------------*/
#contact .wrapper {
	width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	background-color: #FEFAF6;

}

#contact .section-title {
	width: 1200px;
	padding-top: 30px;
	margin: 60px auto 45px auto;
	display: flex;
	justify-content: space-between;
	border-bottom: solid 2.5px #3d1e26;
}


.contact-form dl {
	width: 1200px;
	margin: 0 auto;
	text-align: left;
}

#contact .contact-form input,
#contact .contact-form textarea {
	width: 48%;
	background-color: #ffffff;
	border: solid 1.3px #3d1e26;
	padding: 10px;
	margin-bottom: 20px;
}

.submit {
	width: 1200px;
	margin-left: auto;
}

#contact .contact-form .button input {
	width: 177px;
	color: #FEFAF6;
	background-color: #C47E7E;
	border: solid 1.3px #3d1e26;
	padding: 12px 0;
	margin-bottom: 0;


}



/*-------------------------------------------
footer
-------------------------------------------*/
#footer {

	background-color: #FEFAF6;
	padding-top: 95px;
	padding-bottom: 28px;

}

.footer {
	width: 1200px;
	display: flex;
	border-top: solid 0.7px #3d1e26;
	margin-bottom: 10px;
	position: center;
	justify-content: center;
	margin: 0 auto;


}

.pagetop {
	margin-left: auto;
	margin-top: 10px;
}

.copyright {
	padding-top: 10px;
}





#flex delayScroll work-main-visual {
	width: 60%;
	margin: 0 auto;
	justify-content: center;
}

.section-title-worktitle {
	font-size: 45px;
	font-weight: 300;
	margin-bottom: 25px;
}

.work-main-text {
	width: 1200px;
	margin: 30px auto 30px auto;
	text-align: left;
}

#work-text {
	width: 60%;
	margin: 124px auto;
	justify-content: left;
	text-align: left;
}

.work-visual-01 {
	width: 1200px;
	margin: 0 auto;
	display: flex;

}

.works-visual-1 {
	width: 41%;
	margin-right: 10px;
	margin-top: 15px;
}

.works-visual-2 {
	width: 41%;
	margin-left: 10px;
	margin-top: 15px;
}

.work-visual-02 {
	width: 1200px;
	margin: 0 auto;
	display: flex;

}
.work-visual-103{
	width: 1200px;
	margin: 0 auto;
	
}
.work-visual-103{
	width:70%;
	
	margin-top: 15px;
	margin-bottom: 70px;
}


.works-visual-3 {
	width: 41%;
	margin-right: 10px;
	margin-top: 15px;
	margin-bottom: 70px;
	
}

.works-visual-4 {
	width: 41%;
	margin-left: 10px;
	margin-top: 15px;
	margin-bottom: 70px;
}

.work-main-visual-04{
	width: 35%;
}


	
	.work-visual-15{
		
		display: flex;
		margin: 0 auto;
	}
	.works-visual-105{
		width: 50%;
		margin-right: 10px;
		margin-top: 20px;
	}
	.works-visual-106{
		width: 50%;
		margin-left: 10px;
		margin-top: 20px;
	}
	.work-visual-08{
		width: 1200px;
		display: flex;
		margin-top: 60px;
	}

	.works-visual-9{
		margin-right: 80px;
		margin-top: 100px
	}
	.works-visual-10{
		width: 20%;
		margin-left: 80px;
	}
	.work-visual-09{
		margin-top: 50px;
		display: flex;
		
	}
	.works-visual-11{
		margin-top: 30px;

	}

	.sizen-design{
		display: flex;
	}

	.works-visual-162{
		width: 100%;
		margin-right: 500px;
	}
	.works-visual-16{
		width: 100%;
		
	}
	.works-visual-16 p{
		margin-bottom: 0px;
	}

	.work-visual-16{
		width: 1200px;
		display: flex;
		
	}
	.work-visual-107{
		width: 1200px;
		display: flex;
	}
	.works-visual-107{
		width: 50%;
		
	}
	.works-visual-127{
		width: 50%;
		margin-right: 300px;
		margin-left: 50px;
	}

	.work-visual-18{
		width: 1200px;
	}
	.works-visual-18{
		width: 100%;
	}

	.work-visual-109{
		width: 1200px;
    }
	.works-visual-109{
		width: 30%;
	}

	#work-text p{
		margin-top: 0px;
		margin-bottom: 50px;
	}

	

	table{
		margin-top: 50px;
		margin-bottom: 80px;
	}



#footer-w-01 {
	background-color: #FEFAF6;
	padding-top: 95px;
	position: center;
	margin: 0 auto;
	text-align: center;
	justify-content: center;
	padding-bottom: 30px;
}



table th,
table td {
	padding: 20px;
	vertical-align: top;
}

table tr th:first-child {
	width: 120px;
}






/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 600px) {

	.background{
		background-color: #FEFAF6;
	}
	
	/*=== 9-1-4 矢印が動いてスクロールを促す  ====*/
	
	/*スクロールダウン全体の場所*/
	.scrolldown4{
		/*描画位置※位置は適宜調整してください*/
		position:absolute;
		bottom:1%;
		right:50%;
		/*矢印の動き1秒かけて永遠にループ*/
		animation: arrowmove 1s ease-in-out infinite;
	}
	
	/*下からの距離が変化して全体が下→上→下に動く*/
	@keyframes arrowmove{
		  0%{bottom:1%;}
		  50%{bottom:3%;}
		 100%{bottom:1%;}
	 }
	
	/*Scrollテキストの描写*/
	.scrolldown4 span{
		/*描画位置*/
		position: absolute;
		left:-20px;
		bottom:10px;
		/*テキストの形状*/
		color: #FEFAF6;
		font-size: 0.7rem;
		letter-spacing: 0.05em;
		/*縦書き設定*/
		-ms-writing-mode: tb-rl;
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
	}
	
	/* 矢印の描写 */
	.scrolldown4:before {
		content: "";
		/*描画位置*/
		position: absolute;
		bottom: 0;
		right: -6px;
		/*矢印の形状*/
		width: 1px;
		height: 20px;
		background: #FEFAF6;
		transform: skewX(-31deg);
	}
	
	.scrolldown4:after{
		content:"";
		/*描画位置*/
		position: absolute;
		bottom:0;
		right:0;
		/*矢印の形状*/
		width:1px;
		height: 50px;
		background:#FEFAF6;
	}
	
	

	#switch ~ label {
		padding: 12px 12px;
		width: 60px;
		height: 60px;
		background: #C47E7E;
		position: fixed;
		box-sizing: border-box;
		top: 0;
		right: 0;
		z-index: 999;
		cursor: pointer;
	}
	#switch ~ label span{
		display: block;
		width:22px;
		height:2px;
		top: 50%;
		left: 0;
		right: 0;
		margin:auto;
		background: #fff;
		position: absolute;
		-webkit-transition: 0.2s transform;
		transition: 0.2s transform;
	}
	#switch ~ label span:before,
	#switch ~ label span:after{
		content: "";
		display: block;
		background: #fff;
		position: absolute;
		width:22px;
		height:2px;
		left: 0;
		right: 0;
		margin: auto;
	}
	#switch ~ label span:before{
		top: -9px;
	}
	#switch ~ label span:after{
		top: 9px;
	}
	#navwrap{
		padding-top: 0;
		position: fixed;
		top: -100%;
		left: 0;
		width: calc(100% - 60px);
		height: 100%;
		background: rgba(196,126,126,0.9);
		transition: all 0.4s;
		padding: 30px;
		box-sizing: border-box;
	}
	#switch:checked ~ #navwrap { 
		display: block; 
		top: 0;
	}
	.header_menu{
		display: flex;
		flex-direction: column;
	}
	.header_menu li{
		margin: 0 auto 30px;
	}
	.header_menu li a{
		color: #fff;
	}
	.scroll-prevent {
		position: fixed;
		z-index: -1;
		width: 100%;
		height: 100%;
	}

	#switch:checked ~ label span{
		-webkit-transform:rotate(-45deg) ;
		transform:rotate(-45deg) ;
	}
	#switch:checked ~ label span:before{
		top:0;
	}
	#switch:checked ~ label span:after{
		-webkit-transform:rotate(270deg);
		transform:rotate(270deg);
		top:0;
		margin-top:0;
	}

	
.wrapper{
	width: 95%;
	
	margin: 0 auto;
}

 

#about .section-title {
	font-size: 3.0rem;
	width: 100%;
	padding-top: 30px;
	margin: 200px auto 45px auto;
	text-align: center;
	display: inline-block;
	
	border-bottom: solid 1.5px #3d1e26;
}
	
	
	

	.about-image {
		margin: 0 auto;
		margin-bottom: 30px;
	}


	#header {
		padding: 20px 16px;
	}

	#mainvisual {
		width: 100%;
		
		object-fit: cover;
}
#mainvisual img{
	width: 100vw;
	height:177vw;
}


	

	

	.flex{
		width: 95%;
		flex-direction: column;
		margin: 0px auto;
		justify-content: space-between;
		
	}

	.about-image {
		margin: 0 auto;
		margin-bottom: 30px;
	}


	
	

	.about-text {
		width: 95%;
		margin: 0 auto 50px auto;
		justify-content: space-between;
		order: 2;

	}
	
	

	.content-title {
		width: 95%;
		margin: 0 auto 20px auto;
		text-align: center;
		padding: 0px;
	}

	



	.content-wrap {
		flex-direction: column;
		margin: 0 auto;

	}

	.content-left {
		width: 100%;
	}

	.skills-01-title {

		color: #FEFAF6;
		font-size: 20px;
		font-weight: 200;
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
		display: inline;
		padding: .2em;
		line-height: 2.2;
		background-color: #3d1e26;
	}

	.content-right {
		width: 100%;
	}

	.skills-01 {
		margin-bottom: 200px;
	}

	.skills-text-box01 {

		position: absolute;
		bottom: -235px;

	}

	.skills-text-box02 {
		position: absolute;
		bottom: -235px;
		left: 0px;
	}

	.skills-text {
		width: 95%;
		margin: 0 auto;
		justify-content: space-between;

	}

	.content-wrap {
		width: 95%;
	}


	#work .section-title {
		width: 100%;
		font-size: 3rem;
		text-align: center;
		display: inline-block;
		
		border-bottom: solid 1.5px #3d1e26;
		padding-top: 30px;

	}

	

	

	.contact-form {
		width: 95%;
		margin: 0 auto;
		justify-content: space-between;

	}

	.section-title-worktitle {
		font-size: 2rem;
	}

	.work-main-visual {
		width: 100%;
		margin-right: 90px;
		margin-bottom: -70px;
	}

	.footer {
		width: 95%;
		flex-direction: column;
		border-top: solid 0.7px #3d1e26;
		margin-bottom: 0px;
		position: center;
		justify-content: center;
		margin: 0 auto;


	}

	#contact .wrapper {
		width: 95%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		background-color: #FEFAF6;

	}

	#contact .section-title {
		font-size: 3.0rem;
		width: 100%;
		padding-top: 30px;
		margin: 60px auto 45px auto;
		text-align: center;
		display: inline-block;
		
		border-bottom: solid 1.5px #3d1e26;
	}


	.contact-form dl {
		width: 95%;
		margin: 0 auto;
		text-align: left;
	}

	#contact .contact-form input,
	#contact .contact-form textarea {
		width: 95%;
		background-color: #ffffff;
		border: solid 1.3px #3d1e26;
		padding: 0px;
		margin-bottom: 20px;
	}

	.submit {
		width: 95%;
		margin: 3%;
	}

	.button{
		width: 95%;
		
	    
	}

	



	#mainwork {
		width: 95%;
		margin: 0 auto;
		justify-content: center;
	}

	.section-title-worktitle {
		font-size: 30px;
		font-weight: 300;
		margin-bottom: 10px;
	}

	.work-main-text {
		width: 95%;
		margin: px auto 50px auto;
		text-align: left;
	}

	#work-text {
		width: 95%;
		margin: 124px auto 50px;

		justify-content: left;
		text-align: left;
	}

	.work-visual-01 {
		width: 95%;
		margin: 0 auto;
		flex-direction: column;

	}

	.works-visual-1 {
		width: 100%;
		margin-right: 0px;
		margin-top: 50px;
	}

	.works-visual-2 {
		width: 100%;
		margin-left: 0px;
		margin-top: 0px;
	}

	.work-visual-02 {
		width: 95%;
		margin: 0 auto;
		flex-direction: column;

	}

	.works-visual-3 {
		width: 100%;
		margin-right: 0px;
		margin-top: 0px;
		margin-bottom: 0px;
	}

	.works-visual-4 {
		width: 100%;
		margin-left: 0px;
		margin-top: 0px;
		margin-bottom: 50px;
	}

	.works-visual-101 {
		width: 100%;
		padding-top: 50px;
	}

	.work-visual-100 {
		width: 1200px;
		margin: 0 auto;

	}

	#footer-w-01 {
		background-color: #FEFAF6;
		padding-top: 95px;
		position: center;
		margin: 0 auto;
		text-align: left;
		justify-content: center;
		padding-bottom: 30px;
	}



	table th,
	table td {
		padding: 20px;
		vertical-align: top;
	}

	table tr th:first-child {
		width: 120px;
	}


	.work-main-visual-04 {
		margin: 0 auto;
		justify-content: center;
		width: 70%;
	}

	

	.work-visual-11 {
		width: 80%;
		margin: 0 auto;
		margin-top: -150px;
	}

	.work-visual-08 {
		width: 95%;
		flex-direction: column;
		margin: 0 auto;
	}

	.works-visual-9 {
		width: 100%;
		margin-top: 50px;
		margin-bottom: 30px;
		margin-left: 30px;
	}

	.works-visual-10 {
		width: 60%;
		margin: 0 auto;
		margin-bottom: 50px;
	}
	.work-visual-09{
		flex-direction: column;
	}

	.work-visual-15{
flex-direction: column;
margin: 0 auto;
	}
	.works-visual-105{
		width: 100%;
		margin-right: 0px;
		margin-top: 20px;
	}
	.works-visual-106{
		width: 100%;
		margin-left: 0px;
		margin-top: 20px;
	}

	.works-visual-162{
		width: 100%;
		padding-top:  50px;
		text-align: center;
	}
	.works-visual-16{
		width: 100%;
		padding-bottom: 10px;
		padding-top:  50px;
		text-align: center;
	}

	.work-visual-16{
		width:95%;
		flex-direction: column;
		
	}

	.work-visual-109{
		width: 95%;
    }
	.works-visual-109{
		width: 100%;
		
	}
	.work-visual-18{
		width: 95%;
	}
	.works-visual-18{
		width: 100%;
	}
	.work-visual-107{
		width: 95%;
		flex-direction: column;
	}
	.works-visual-107{
		width: 100%;
		
	}
	.works-visual-127{
		width: 100%;
		margin-right: 0px;
		margin-left: 0px;
	}
	.work-visual-103{
		width: 95%;
		margin: 0 auto;
		
	}
	.work-visual-103{
		width:100%;
		
		margin-top: 15px;
		margin-bottom: 70px;
	}


}