@charset "UTF-8";
/* CSS Document */

body{
	font-family: 'Overlock', cursive;
}
/*========= 左固定レイアウトのためのCSS ===============*/

/*左と右を囲う全体のエリア*/
#wrapper{
  position: relative;/*position stickyの基点にするため relativeをかける*/
    display: flex;/*左エリア、右エリア横並び指定*/
  flex-wrap: wrap;/*ボックスの折り返し可*/
}

/*左エリア*/
#fixed-area{
  /*左固定記述*/
    position: -webkit-sticky;/*Safari用*/
    position: sticky;
  top:0;
  /*横半分30%　縦を100vhにする*/
  width: 25%;
  height: 100vh;
  /*装飾のためのCSS*/
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:#484848;
}

/*左エリア*/
.nav_list_item{
	text-align: left;
	margin-left: 30px;
	margin-bottom: 42px;
}
.nav_list_item a{
	color: #FFF;
	font-size: 1.1em;
	transition: all 0.4s;/*hoverがかかる時間*/
}
.nav_list_item a:hover{
	letter-spacing: 0.3em;
	color: #EC7278;
}

.nav_list_item:first-child{
	margin-top: 90px;
}
.nav_logo{
	margin-left: 10px;
	width: 184px;
}
.ins,.twi{
 width:41px;
 margin-right: 20px;
}
.spnone{
	margin-left: 30px;
	margin-top: 90px;
}

/*右エリア*/
#container{
  /*横半分70%にする*/
  width:75%;
  background-color: #EBEBEB;
}

    /*========= work===============*/


.WORK{
	width:70%;
	margin: 0 auto;
	padding-top: 8%;
}
.work_inner{
	margin-bottom: 230px;
}
.work_inner1{
		margin-bottom: 100px;
	}
.work_inner2{
		margin-bottom: 100px;
	}
.SP{
	display: none;
	width: 60%;
}
.work_inner:nth-child(2){
	    margin-top:260px;
	}
.work_inner_SP{
	width: 30%;
}
.work_text_title{
	text-align: center;
	font-size: 2em;
	padding-bottom: 40px;
	padding-top: 200px;
}
.work_text_concept{
	padding: 0 100px;
	line-height: 2em;
}
.work_text_2{
	text-align: center;
}





/*矢印が右に移動する*/
.btnarrow4{
    /*矢印と下線の基点とするためrelativeを指定*/
  position: relative;
    /*形状*/
    display: inline-block;
  padding: 0 20px;
    color: #333;
    text-decoration: none;
    outline: none;
}

/*矢印と下線の形状*/
.btnarrow4::before{
    content: '';
    /*絶対配置で下線の位置を決める*/
  position: absolute;
    bottom:-8px;
    left:15%;
    /*下線の形状*/    
    width: 85%;
    height: 3px;
  background:brown;
    /*アニメーションの指定*/
    transition: all .3s;
}

.btnarrow4::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
  position: absolute;
    bottom:-3px;
    right:0;
    /*矢印の形状*/    
    width: 15px;
    height:3px;
  background:brown;
    transform: rotate(35deg);
    /*アニメーションの指定*/
    transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow4:hover::before{
    left:20%;
}

.btnarrow4:hover::after{
    right:-5%;
}
.next{
	text-align: end;
	   margin-bottom: 100px;
}
.next a{
	font-size: 2em;
	font: bolder;
	letter-spacing: 0.1em;
}
#video-container {
        margin: 0 auto;
        width: 640px;
        height: 360px;
      }
      video {
        width: 100%;
        height: 100%;
      }







   /*========= work===============*/


#container p{
  margin:0 0 10px 0;
}
small{
  display: block;
  text-align: center;
}


/*ハンバーガー*/
.nav-bar {
  min-height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

.nav-item a{
color: #FFF;
}

.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}

.nav-branding {
  font-size: 2rem;
  z-index: 100;
}

.hamburger {
  cursor: pointer;
  display: none;
}

.bar {
  display: block;
  background-color: white;
  width: 25px;
  height: 3px;
  margin: 5px;
  transition: all 0.3s ease-in-out;
}
/*ハンバーガー*/
/*＝＝＝＝＝＝＝＝＝＝＝768px以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/

@media screen and (max-width:768px){
#wrapper{
  display: block;/*display:flex;を解除*/
}
section{
  min-height:auto;/*縦を100vh⇒解除*/
}
#fixed-area{
    position:relative!important;/*position stickyを解除*/
  width:100%;/*横幅を100%にして1列に見せる*/
  height: 350px;/*縦幅を100vh⇒40vh　※任意の高さに設定可能*/
}
	
/*ハンバーガー*/
	header{width: 80%;}
	.nav_logo{margin: 0 auto;}
	
 .hamburger {
    display: block;
	margin-left: 100%;
	margin-top: 5%;
  }
  .hamburger.active .bar:nth-child(2){
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active .bar:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-menu {
    background-color: #262626;
    position: fixed;
    left: 0;
    top: -100%;
    width: 100%;
    flex-direction: column;
    gap: 0;
    transition: all 0.3s ease;
  }
  .nav-item {
    margin: 20px;
  }
  .nav-item a{
   transition: all 0.4s;/*hoverがかかる時間*/
  }
  .nav-item a:hover{
   letter-spacing: 0.3em;
   color: #EC7278;
   }
  .nav-menu.active {
    top: 70px;
  }
/*ハンバーガー*/
	
	
.profile_image{
  margin: 100px auto 35px;
}
.mv{
	padding-top:0;
	width: 100%;
}
.nav_list{
 display: none;
}
.mv1{
 display: none;
}
#container{
  width:100%;/*横幅を100%にして1列に見せる*/
}
	
	/*========= work===============*/
	
	
	
	.WORK{
	width: 80%;
	margin: 0 auto;
	}
	.work_inner{
		margin-bottom: 50px;
	}
	.work_text_title{
	text-align: center;
	font-size: 0.9em;
	padding-bottom: 40px;
		padding-top: 30px;
}
.work_inner:nth-of-type(2){
		margin-top:30px;
}

.work_text_concept{
	padding: 0;
	line-height: 1.5em;
}

.SP{
	display:block;
	margin: 0 auto;
	width: 60%;
}
	.work_inner1{
		display: none;
	}


/*hoverした際の移動*/
.btnarrow4:hover::before{
    left:20%;
}

.btnarrow4:hover::after{
    right:-5%;
}
.next a{
	font-size: 1em;
}

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

body{
    vertical-align:middle; 
    padding: 100px 0;
    text-align: center;
}

p{
    margin: 0 0 10px 0;
}
	
	
	
	
	/*========= work===============*/
	
		/*========= footer===============*/
.pcNone_hako{
 margin: 0 auto;
 width: 70%;
}
.pcNone_shita{
 margin-top: 80px;
}
.pcNone_menu{
 display: block;
 text-align: center;
 padding-top: 40px;
}
	.pcNone_menu a{
		transition: all 0.4s;}
	.pcNone_menu a:hover{
		letter-spacing: 0.3em;
		color: #EC7278;
	}

.pcNone_shita2{
 margin-top: 40px;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.ins,.twi{
 width:41px;
 margin-right: 20px;
}
.logo2{
 width:100px;
 }
.pcNone_menu a{
 color: #454545;
}
.spnone{display: none;}
	  /*========= footer===============*/
}

@media screen and (min-width:768px){
	.area{display: none;}
	.profile_image{display: none;}
	.mv1sp{display: none;}
	.pcNone{display: none;}
	.nav-bar{display: none;}
}