@charset "UTF-8";
/* CSS Document */
body{
	-webkit-text-size-adjust: 100%;
	background-color: #F9F4F0;
	  font-feature-settings : "palt";
}
* {
margin: 0;
padding: 0;
}
#header {
	z-index : 10;  
	margin:30px 0 0 40px;
	padding:0; 
	font-family:'Helvetica',"YakuHanJP","游ゴシック",YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-weight: 600;
    font-size:24px;
	letter-spacing: 0.03em;
}
.sub{ display:inline;font-size:13px; letter-spacing: 0.15em;color: #666666;font-weight: 300;margin:0 0 0 8px; }
::selection {
    background: #000;
    color: #fff;
}
//Firefox
::-moz-selection {
    background: #000;
    color: #fff;
}


#menu{
	font-family:'Helvetica',"YakuHanJP","游ゴシック",YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-weight: 400;
	color: #666666;
	font-size:12px;
    letter-spacing: 0.12em;
	z-index : 9;
	margin:20px 0 0 40px;
	transition: 0.5s;
	line-height: 3em;
}
#header a { color: #000; text-decoration: none;transition: 0.5s;}
#header a:link { color: #000; text-decoration: none;}
#header a:visited { color: #000000;text-decoration: none;}
#header a:hover {  color: #999; text-decoration: none; /*background-color: #cdffed;*/}
#header a:active { color: #000000; text-decoration: none;}
#menu a { color: #000; text-decoration: none; transition: 0.5s;}
#menu a:link { color: #999; text-decoration: none;cursor: pointer;}
#menu a:visited { color: #999;text-decoration: none; }
#menu a:hover { color: #000000; text-decoration: none;/*background-color: #f2f2f2;*/}
#menu a:active { color: #999; text-decoration: none;}
.clear {
    clear:both;
	}
#wrapper {
max-width: 1280px; 
margin: 0 auto;
} 
#masonry {  
max-width:100%;
margin: 0 auto;
overflow:auto; 
margin-top:-80px;
padding-top:0px;
}  

.grid {
width:200px;
margin:20px;
float:left;
color:#fff;
display:inline;
}
.grid a {
overflow: hidden;
float: left;
transition:0.3s;
	filter: none;
}
.grid a:hover { 
opacity:0.4;
transition:0.3s; 
    -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -o-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     filter: grayscale(100%);
}
.grid img{ width:200px;}

#container {
  max-width: 540px;
  margin: -104px auto;
}
#mainphoto {
  width: 100%;
	float: left;
}
.workphoto img{ width:540px;}

#main {
max-width: 700px; 
margin: 0 auto;
		margin-bottom: 140px;
} 
#textarea {  
max-width:100%;
margin: 0 auto;
overflow:auto; 
margin-top:-107px;
}  
.area {
		  font-family: "游ゴシック",YuGothic,'Helvetica',"YakuHanJP","メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  font-feature-settings : "palt";
}
	
.area p {
margin-top:0px;
	margin-bottom:22px;
text-align:left;
vertical-align: top;
font-size:16px;
	font-weight: 600;
	letter-spacing:0.05em;
		color: #000;
}
.area a{
text-align:right;
vertical-align: top;
font-size:16px;
	font-weight:200;
	color: #4c4c4c;
	letter-spacing:0.08em;
}
.profilearea {
		  font-family: "游ゴシック",YuGothic,'Helvetica',"YakuHanJP","メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  font-feature-settings : "palt";
}
	
.profilearea p {
margin-top:60px;
	margin-bottom:0px;
text-align:left;
vertical-align: top;
font-size:16px;
	font-weight: 600;
	letter-spacing:0.05em;
		color: #000;
}
.profilearea a{
text-align:right;
vertical-align: top;
font-size:16px;
	font-weight:200;
	color: #4c4c4c;
	letter-spacing:0.08em;
}

#worktext{
	font-family:'Helvetica',"YakuHanJP","游ゴシック",YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-weight: 400;
	color: #666666;
	font-size:14px;
    letter-spacing: 0.12em;
	z-index : 9;
	margin:40px 0 0 40px;
	transition: 0.5s;
	line-height: 2em;
}
.worktextline{	
	margin-top: 40px;
border-top: 1px #C1BDB9 solid;
padding-top: 20px;
}

.work_close{
	position: fixed;
	top: 24px;
    right:30px;
}

.dli-close {
  display: inline-block;
  vertical-align: middle;
  color: #333;
  line-height: 1;
  width: 2em;
  height: 0.1em;
  background: currentColor;
  border-radius: 0.1em;
  position: relative;
  transform: rotate(45deg);
}

.dli-close::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}



.fadein {
	opacity: 0;
	animation: fadein 3s ease forwards;
}
@keyframes fadein {
	100% {	opacity: 1;}
}

/*以下遅延の指定*/
.txt01 {animation-delay: 0.05s;}
.txt02 {animation-delay: 0.5s;}
.txt03 {animation-delay: 1s;}
.txt04 {animation-delay: 1.3s;}
.txt05 {animation-delay: 1.6s;}
.txt06 {animation-delay: 16s;}

.footer{  
width: 100%; 
margin: 0 auto;
}
.contact{
text-align:center;
margin: 80px 0 80px 0 ;
	font-family:'Helvetica',"YakuHanJP","游ゴシック",YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-weight: 400;
	color: #999999;
	font-size:16px;
    letter-spacing: 0.12em;
	z-index : 9;
	line-height: 1.8em;
}
.contact a { color: #999; text-decoration: none; transition: 0.5s;}
.contact a:link { color: #999; text-decoration: none;}
.contact a:visited { color: #000000;text-decoration: none; }
.contact a:hover { color: #000; text-decoration: none;/*background-color: #f2f2f2;*/}
.contact a:active { color: #000000; text-decoration: none;}
.totop{  
text-align:center;
margin: 0 0 40px 0 ;
} 
.totop a:link { color: #999; text-decoration: none;transition: 0.5s;}
.totop a:visited { color: #000000;text-decoration: none;transition: 0.5s; }
.totop a:hover { opacity:0.5;color: #af1010; text-decoration: none;}
.totop a:active { color: #000000; text-decoration: none;}

@media screen and (min-width: 751px) {
 .pc_non {
    display: none;
}

	}

@media screen and (max-width: 750px) {
 .sp_non {
    display: none;
}
#header {
	z-index : 10;  
	margin:30px 0 0 20px;
	padding:0; 
	font-family:'Helvetica',"YakuHanJP","游ゴシック",YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-weight: 600;
    font-size:30px;
	letter-spacing: 0.01em;
	line-height: 0.4em;
}
.sub{ display:inline;font-size:13px; letter-spacing: 0.1em;color: #666666;font-weight: 300;margin: 0 0 0 1px;}
#wrapper {
max-width: 100%; 
margin: 0 auto;
	font-family:'Helvetica',"YakuHanJP","游ゴシック",YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
} 
#masonry {  
max-width:100%;
margin: 0 auto;
overflow:auto; 
margin-top:-180px;
padding-top:140px;
}  

.grid {
width:140px;
margin:20px;
float:left;
color:#fff;
display:inline;
}
.grid img{ width:100%;}
	
#container {
  max-width: 335px;
  margin: 30px auto;
}
#mainphoto {
  width: 100%;
	float: left;
}
.workphoto img{ width:335px;}
	
#main {
max-width: 100%; 
margin: 0 auto;
margin-bottom: 140px;
} 
#textarea {  
max-width:100%;
margin: 0 auto;
overflow:auto; 
margin-top:-107px;
}  
.area {
  font-family: "游ゴシック",YuGothic,'Helvetica',"YakuHanJP","メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  font-feature-settings : "palt";
	margin: 0 22px;
	line-height: 1.6em;
}
	
.area p {
margin-top:100px;
	margin-bottom:22px;
text-align:left;
vertical-align: top;
font-size:14px;
	font-weight: 600;
	letter-spacing:0.05em;
		color: #000;
}
.area a{
text-align:right;
vertical-align: top;
font-size:14px;
	font-weight:200;
	color: #4c4c4c;
	letter-spacing:0.08em;
}
.profilearea {
  font-family: "游ゴシック",YuGothic,'Helvetica',"YakuHanJP","メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  font-feature-settings : "palt";
		margin: 0 22px;
	line-height: 1.6em;
}
	
.profilearea p {
margin-top:60px;
	margin-bottom:0px;
text-align:left;
vertical-align: top;
font-size:14px;
	font-weight: 600;
	letter-spacing:0.05em;
		color: #000;
}
.profilearea a{
text-align:right;
vertical-align: top;
font-size:14px;
	font-weight:200;
	color: #4c4c4c;
	letter-spacing:0.08em;
}
#worktext{
	font-family:'Helvetica',"YakuHanJP","游ゴシック",YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-weight: 400;
	color: #666666;
	font-size:14px;
    letter-spacing: 0.12em;
	z-index : 9;
	margin:30px 0 0 20px;
	transition: 0.5s;
	line-height: 2em;
}
.worktextline{	
	margin-top: 40px;
border-top: 1px #C1BDB9 solid;
padding-top: 20px;
}
.work_close{
	z-index: 100;
	position: fixed;
	top: 22px;
    right:20px;
}
	
	
	
	
}

.menu-btn {
    position:relative;
    top: -66px;
    left: 81%;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 2px;
    width: 25px;
    border-radius: 3px;
    background-color: #000000;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
#menu-btn-check {
    display: none;
}

.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #FFFFFF;
    transition: all 0.5s;/*アニメーション設定*/
}
.menu-content ul {
    padding: 200px 0 0 0;
}
.menu-content ul li {
    list-style: none;
}

.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 18px;
    box-sizing: border-box;
    color: #7C7C7C;
    text-decoration: none;
    padding: 9px 15px 30px 0;
    position: relative;
	text-align: center;
	font-family:'Helvetica',"YakuHanJP","游ゴシック",YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-weight: 200;
	letter-spacing: 0.2em;
}
#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}