@charset "UTF-8";

@font-face {
  font-family: 'makinasscrap_5';
  src: url("../font/makinas_web.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
html {
  font-size: 62.5%;
  font-family: Gill Sans,Helvetica,Arial,YuGothic,'游ゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
  height: 100%;
   -webkit-font-smoothing: antialiased;
}

body {
  font-size: 62.5%;
  font-family: Gill Sans,Helvetica,Arial,YuGothic,'游ゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
  color:#000;
  font-size: 1.4rem;
  line-height:1.8rem;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
  margin: 0;
  padding: 0;
  background-color: #fff;
}

a {
  -webkit-transition: all .2s ease-in-out 0s;
  transition: all .2s ease-in-out 0s;
  text-decoration: none;
  color: #000;
  display: block;
}

a:hover {
  -webkit-transition: all .2s ease-in-out 0s;
  transition: all .2s ease-in-out 0s;
  text-decoration: none;
  opacity: 0.7;
}

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

.sp_only{
	display:none !important;
}


@media (max-width: 768px) {
  body {
    font-size: 1.8rem;
  }
  
  .pc_only{
	  display:none !important;
  }

  .sp_only{
	  display:block !important;
  }
  
}
/*+*+*+*+**+*+*+*+**+*+*+*+* *+*+*+*+**+*+*+*+**+*+*+*+*

Common

*+*+*+*+**+*+*+*+**+*+*+*+**+*+*+*+**+*+*+*+**+*+*+*+*/
header{
	width: 100%;
    height: 80px;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 3%;
}
	
header svg{
	height: 16px;
	width: auto;
}

	
#menu ul{
	font-size:18px;
    display: flex;
    justify-content: flex-end;
}
#menu li{
	position: relative;
    display: block;
    padding: 10px 1.5em;
    font-size: 14px;
}
#menu li:first-child{
	    padding-left:0; 
}

#menu li:last-child{
	padding-right:0; 
}

.main{
	display: block;
}

.inner{
	max-width: 1280px;
	padding: 0 3%;
	margin: 0 auto;
}

.inner h1{
	font-size: 32px;
	font-weight: 400;
	letter-spacing: .5rem;
	text-align: center;
	margin:180px 0 80px;
}

.footer {
	width: 100%;
	display: flex;
	flex-direction: row-reverse;
	align-items:flex-start;
	box-sizing: border-box;
	justify-content: space-between;
    margin-top: 10rem;
    padding: 40px 3%;
    background-color: #111;
    color: #fff;
}

.footer_nav, .address{
	display: inline-block;
}

.footer_nav ul{
	font-size:18px;
    display: flex;
    justify-content: flex-end;
}
.footer_nav li{
	position: relative;
    display: block;
    padding: 0 1.5em;
    font-size: 14px;
}
.footer_nav li:first-child{
	    padding-left:0; 
}

.footer_nav li:last-child{
	padding-right:0; 
}

.footer a{
	color: #fff;
}

.footer .address {
	
	font-size: 1.2rem;
    line-height: 2rem;
}

.footer .address b {
	font-size: 1.4rem;
	font-weight: bold;
	display: block;
	margin-bottom: .5rem;
}

.footer .address b span{
	font-weight: 600;
	letter-spacing: .2rem;
}

.copyright{
	font-size: 1rem;
	opacity: .5;
	margin-top: 1rem;
	display: block;
	letter-spacing: .2rem;
}

#toggle {
	display:none; /*通常時は非表示にしておきます*/
	position:fixed; /*bodyに対しての絶対位置指定です*/
	right:5%;
	top:20px;
	width:30px;
	height:25px;
	z-index:2;}
	
#toggle div {position:relative} /*spanの絶対位置指定の親にします*/
#toggle span {
	display:block;
	position:absolute; /*#navToggle div に対して*/
	width:100%;
	border-bottom:solid 1px #000;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
	  -webkit-backface-visibility:hidden;
	  backface-visibility:hidden;
}
	
#toggle span:nth-child(1) {top:0;}
#toggle span:nth-child(2) {top:11px;}
#toggle span:nth-child(3) {top:22px;}	



.scr_event {
    display: none;
}

.h1_animete{
	opacity:0;
		animation:H1IMG 1.5s ease  forwards;
	}
	
	@keyframes H1IMG {
		0% { opacity:0;
			-webkit-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);
		}
		100% { opacity:1;
			-webkit-transform: none;
			transform: none;
		}
		}
		
	
@media (max-width: 768px) {
	
header{
	position:static;
	height:44px;
	padding: 0;
}
	
.header_logo{
	position:absolute;
	text-align:left;
    left: 5%;
    top: 25px;}



	#menu{
		display: none;
		width:100%;
		position:fixed;
		top:0;
		z-index:1;
		text-align: center;
		height:100vh;
		background: rgba(0,0,0,0.6);
	  }
	  
	#menu a {
		margin-left: 0px;
		border-bottom: 1px solid #eee;
		width:70%;
		padding:4vh 0;
		margin: 0 auto;
	
	}
	
	#menu li:first-child{
		padding-top:1vh;
	}
	
	#menu li:last-child{
		padding-bottom:1vh;
	}
	
	#menu li:last-child a{
		border-bottom:none;
	}
	
	
	#menu li {
		display: block;
		margin:0 auto;
		padding: 0;
		font-size:16px;
	}
	
	#menu ul{
		background:#fff;
		width:70%;
		display:block;
		margin:0 auto;
		margin-bottom:0;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
	}
	
	#toggle{
	  display: block;
	}
	
	
	.openNav #toggle span {
		border-bottom:solid 1px #fff;
	}
		
	
	.openNav #toggle span:nth-child(1) {
		top: 11px;
		-webkit-transform:rotate(-45deg);
		-moz-transform:rotate(-45deg);
		transform:rotate(-45deg);}
	
	.openNav #toggle span:nth-child(2) {
		top: 11px;
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
		transform:rotate(45deg);}
	 
	.openNav #toggle span:nth-child(3) {
		top: 11px;
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
		transform:rotate(45deg);}	
	
	.inner{
		padding: 0 5%;
	}	

	.footer {
		padding: 60px 5%;
		display: block;
		margin-top: 20px;
	}

	.footer_nav {
		display: block;
	}

	.footer_nav li {
		padding: 0 1.5em;
		font-size: 18px;
	}

	.footer_nav ul {
		justify-content: normal;
	}


	.footer .address{
		margin-top: 40px;
	}

	.footer .address b {
		margin-bottom: 0;
	}

	.inner h1{
		margin:80px 0 60px;
	}
		
}
/*+*+*+*+**+*+*+*+**+*+*+*+* *+*+*+*+**+*+*+*+**+*+*+*+*

TOP

*+*+*+*+**+*+*+*+**+*+*+*+**+*+*+*+**+*+*+*+**+*+*+*+*/


#top .wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
  flex-direction: column;
  background-color: #000;
  color:#fff;
  }

#top header{
	position: relative;
	display: block;
	width: auto;
    height: auto;
	padding: 0;
}

#top h1{
	display:block;
	text-align: center;
	margin-bottom: 32px;
	margin-top: 80px;
}

#top .main_img{
	width: calc(100% - 40px);
	max-width: 540px;
	height: auto;
	display: block;
	margin: auto;
	opacity:0;
	animation:TOPIMG 3s ease  forwards ;
	animation-delay: 1s;
}


#top h2{
	font-size: 20px;
	letter-spacing: .2rem;
	font-weight: 600;
	margin-bottom: 25px;
	opacity:0;
	animation:TOPIMG 3s ease  forwards ;
	animation-delay: 1s;
}


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


#top #menu ul{
	margin-top: 60px;
    display: flex;
    justify-content: flex-end;
	opacity:0;
	animation:TOPIMG 3s ease  forwards ;
	animation-delay: 1.5s;	
}

#top #menu li{
	position: relative;
    display: block;
    padding: 0 2.5em;
	border-right: 1px solid;
}

#top #menu li a{
	font-size:24px;
	color: #fff;
	letter-spacing: 0.3rem;
}

#top #menu li:first-child{
	    padding-left:0; 
}
#top #menu li:last-child{
	padding-right:0; 
	border-right: none;
}

#top #toggle span {
	border-bottom:solid 1px #fff;
}

/*bg image animation*/	
/* 複数画像切り替え---------------------------------------------- */


/*画像の配置*/
.slideimg {
	position: absolute; /* 位置を絶対指定で重ねて配置 */
 	inset: 0; /* top: 0; left: 0; right: 0; bottom: 0 と同義 */
	width: 100vw; /* スライド画像の幅を100%に */
	height: 100vh; /* スライド画像の高さを100%に */
	opacity: 0; /* 初期状態で透明に */
	background-size: cover; /* 画像をスライド全体にカバー */
	background-position: center;
	animation: slideAnime 20s infinite; /* 1サイクル15秒を無限ループ */
}

/* スライド個別設定 */
.slideimg:nth-of-type(1) { background-image: url('../images/top/img01.jpg'); animation-delay: 0s; }
.slideimg:nth-of-type(2) { background-image: url('../images/top/img02.jpg'); animation-delay: 4s; }
.slideimg:nth-of-type(3) { background-image: url('../images/top/img03.jpg'); animation-delay: 8s; }
.slideimg:nth-of-type(4) { background-image: url('../images/top/img04.jpg'); animation-delay: 12s; }
.slideimg:nth-of-type(5) { background-image: url('../images/top/img05.jpg'); animation-delay: 16s; }

/*タイミング設定*/
@keyframes slideAnime {
	0%, 30%, 100% { opacity: 0; } /* 非表示のタイミング */
	10%, 20% { opacity: 0.4; } /* 表示されるタイミング */
}

@media (max-width: 768px) {

	#top h2 {
		margin-bottom: 0;}
	
.wrap {
	height: 100svh;
}

#top .wrap {
	height: 100svh;
  }

#top header{
	width: 100%;
	position:static;
	height:44px;
	padding: 0;
}


#top #menu{
	display: none;
	width:100%;
	position:fixed;
	top:0;
	z-index:1;
	text-align: center;
	height:100vh;
	background: rgba(0,0,0,0.3);
  }
  
  #top #menu li a {
	margin-left: 0px;
	border-bottom: 1px solid #eee;
	width:70%;
	padding:4vh 0;
	margin: 0 auto;
	color: #000;
	font-size:16px;
	letter-spacing: 0.06rem;
}

#top #menu li:first-child{
	padding-top:1vh;
}

#top #menu li:last-child{
	padding-bottom:1vh;
}

#top #menu li:last-child a{
	border-bottom:none;
}


#top #menu li {
	display: block;
	margin:0 auto;
	padding: 0;
	font-size:16px;
	border-right: none;
}

#top #menu ul{
	background:#fff;
	width:70%;
	display:block;
	margin:0 auto;
	margin-bottom:0;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	animation:none ;
	opacity: 1;
}


#toggle{
	display: block;
  }
  
  
#top .openNav #toggle span {
	  border-bottom:solid 1px #fff;
  }
	  
  
#top .openNav #toggle span:nth-child(1) {
	  top: 11px;
	  -webkit-transform:rotate(-45deg);
	  -moz-transform:rotate(-45deg);
	  transform:rotate(-45deg);}
  
#top .openNav #toggle span:nth-child(2) {
	  top: 11px;
	  -webkit-transform:rotate(45deg);
	  -moz-transform:rotate(45deg);
	  transform:rotate(45deg);}
   
 #top .openNav #toggle span:nth-child(3) {
	  top: 11px;
	  -webkit-transform:rotate(45deg);
	  -moz-transform:rotate(45deg);
	  transform:rotate(45deg);}	

	  .slideimg {
		width: 100svw; /* スライド画像の幅を100%に */
		height: 100svh; /* スライド画像の高さを100%に */
	}	  
}

/*+*+*+*+**+*+*+*+**+*+*+*+* *+*+*+*+**+*+*+*+**+*+*+*+*

WORK

*+*+*+*+**+*+*+*+**+*+*+*+**+*+*+*+**+*+*+*+**+*+*+*+*/

.work_sec{
	margin-bottom: 60px;
	opacity: 0;
	animation:TOPIMG 3s ease forwards;
	animation-delay: 0.5s;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
}

.gallery li {
    width: calc(50% - 0.3vw); 
}

.gallery li:nth-of-type(n+2) {
	margin-bottom:0.6vw;
  }

.gallery figure {
    position: relative;
    padding-top: 60%;
}

.gallery li img {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	object-fit: cover;
}

.work_sec .note{
	text-align: right;
	margin: 10px 0;
}
.work_sec .note p{
	color: rgba(0,0,0,0.6);
	margin-top: 5px;
	font-size: 1.2rem;
}

@media (max-width: 768px) {
	.work_sec .note p{
		margin-top: 8px;
		font-size: 1.4rem;
		line-height: 2.2rem;
	}	
	.work_sec {
		margin-bottom: 60px;
	}	

	.work_sec .note{
		text-align: left;
		margin: 18px 0;
	}

	.gallery ul{
		display: block;
	}

	.gallery li{
		margin-bottom: 0.6vw;
		width: 100%;
	}
}


/*+*+*+*+**+*+*+*+**+*+*+*+* *+*+*+*+**+*+*+*+**+*+*+*+*

concept

*+*+*+*+**+*+*+*+**+*+*+*+**+*+*+*+**+*+*+*+**+*+*+*+*/

.concept_sec{
	text-align: center;
	margin-bottom: 60px;
	opacity: 0;
	animation:TOPIMG 3s ease forwards;
	animation-delay: 0.5s;
}

.concept_sec p{
	margin-bottom: 30px;
	line-height: 2.5rem;
	letter-spacing: .15rem;
}

.concept_image{
	display: block;
	width: 100%;
	margin-top: 80px;
}

.concept_image picture {
    position: relative;
    padding-top: 40%;
	display: block;
}

.concept_image picture img {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	object-fit: cover;
}

@media (max-width: 768px) {
	.concept_sec p{
		margin-top: 5px;
		font-size: 1.4rem;
		line-height: 2.4rem;
	}	
	.concept_sec {
		margin-bottom: 60px;
	}	

	.concept_image picture {
		position: relative;
		padding-top: 50%;
		display: block;
	}

	.concept_image{
		margin-top: 60px;
	}
}

/*+*+*+*+**+*+*+*+**+*+*+*+* *+*+*+*+**+*+*+*+**+*+*+*+*

ABOUT

*+*+*+*+**+*+*+*+**+*+*+*+**+*+*+*+**+*+*+*+**+*+*+*+*/

.about_sec{
	margin-bottom: 60px;
	opacity: 0;
	animation:TOPIMG 3s ease forwards;
	animation-delay: 0.5s;
}

.outline {
    font-size: 1.4rem;
    line-height: 2.8rem;
    table-layout: fixed;
    width: 640px;
	display: table;
    box-sizing: border-box;
    text-indent: initial;
	margin: 0 auto;
	border-spacing: 0;
}

.outline th {
    width: 32%;
    padding: 30px 0 30px 30px;
    box-sizing: border-box;
    font-weight: 700;
    text-align: left;
	border-bottom: 1px solid #dedede;
}

.outline td {
    padding: 30px 30px ;
	border-bottom: 1px solid #dedede;
}

.border_none th,.border_none td{
	border-bottom: none;
}

@media (max-width: 768px) {
	.about_sec {
		margin-bottom: 60px;
	}		
	.outline {
		width: 100%;
		line-height: 2.4rem;
	}

	.outline th {
		width: 40%;
		padding: 30px 0 30px 20px;
	}

	.border_none td br{
		display: block;
		content: "";
		margin: 10px 0;
	}
	.outline td {
		padding: 30px 20px;
	}	
}