@charset "UTF-8";


	/*共通*/
html{ 
	font-size: 100%;
}

body{
	font-family: 'Noto Sans', sans-serif;
	line-height: 2.5;
	margin: 0px;
	padding: 0px;
}

a{
  color: #000;
  text-decoration: none;
}




img{
	vertical-align: bottom;
}

.fadeIn{
	animation-name: fadeInAnime;
	animation-duration: 5s;
	animation-fill-mode: forwards;
	opacity: o;
}

@keyframes fadeInAnime{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

.wrapper{
	padding:0 4%;
}


/*ヘッダー*/

header {
	position: fixed;
	top:0;
    left:0;
	width:100%;
    height: 100vh;
    z-index: 2;
	pointer-events:none;
}


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



/* ロゴ */
.area_logo_header img {
  height: 60px;
  margin-top: 20px;
  margin-bottom: 100px;
	pointer-events: auto;
}

.rotateY img{
	animation-name:rotateYAnime;
	animation-duration: 1s;
	animation-fill-mode:forwards;
}

@keyframes rotateYAnime{
	from{
		transform: rotateY(0);
	}
	to{
		transform: rotateY(-360deg);
	}
}

/* スクロールイラスト */
.scroll{
   height: 160px;
   position: relative;
	z-index: 1;
	top: -350px;
	left: 20px;
	 /*スクロールの動き1.6秒かけて動く永遠にループ*/
	animation:mousemove 1.6s ease-in-out infinite;
	}

/*下からの距離が変化して上から下に動く*/
@keyframes mousemove{
      0%{top:-350px;}
      50%{top:-340px;}
     100%{top:-350px;}
 }




/* rotateX */
.rotateX img{
	animation-name:rotateXAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	animation-iteration-count:infinite;
}

@keyframes rotateXAnime{
	from{
		transform: rotateY(0);
		
		}
	to{
		transform: rotateY(-360deg);
		
		}
}



	/* デフォルトのbuttonスタイルをリセット */
	button {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background: transparent;
		border: 0;
		border-radius: 0;
		color: inherit;
		cursor: pointer;
		font: inherit;
		margin: 0;
		outline: none;
		padding: 0;
		vertical-align: middle;
	}

	/* 以下、ハンバーガーボタン */
.burger-btn{
  display: block;  
  width: 39px;      
  height: 39px;      
  position: relative;      
  z-index: 3;
  border:none;  
	margin-top: 35px;
	margin-right: 5%;
		pointer-events: auto;
}    
.bar{      
  width: 20px;      
  height: 1px;        
  display: block;      
  position: absolute;      
  left: 50%;      
  transform: translateX(-50%);      
  background-color: #000;    
}    
.bar_top{   
  top: 10px;
}
.bar_mid{    
  top: 50%;
  transform: translate(-50%,-50%);
}
.bar_bottom{
  bottom: 10px;
}
	
	.burger-btn.close .bar_top{      
  transform: translate(-50%,10px) rotate(45deg);      
  transition: transform .3s;    
}    
.burger-btn.close .bar_mid{      
  opacity: 0;       
  transition: opacity .3s;    
}    
.burger-btn.close .bar_bottom{      
transform: translate(-50%,-8px) rotate(-45deg);      
transition: transform .3s;    
}
.noscroll{
  overflow: hidden;
}

	/* 以下、ハンバーガーメニュー */
.nav-wrapper{      
  visibility: hidden;    
  opacity: 0;
  width: 100vw;      
  height: 100vh;      
  position: fixed;      
  top: 0;      
  left: 0;
  transition: all .5s;       
  z-index: 2; 
}     
	
.header-nav{        
  width: 100%;        
  height: 100%;        
  background-color:yellow;        
  z-index: 2;      
}     
.nav-list{        
  display: block;        
  position: absolute;        
  top: 50%;        
  left: 50%;        
  transform: translate(-50%,-50%);        
  text-align: center; 
  line-height: 1.2;
}      
.nav-item{        
  margin-right: 0;        
  margin-bottom: 60px; 
}

	.main-nav{
		margin-bottom: 30px;
	}
	
/* メニューオープン時 */
.nav-wrapper.fade {
	visibility: visible;
	opacity: 1;
}


/* ヘッダーナビ */

.main-nav {
  align-items: center;
  list-style: none;
  font-size: 0.7rem;
}

.main-nav a {
  pointer-events: auto;
}

.main-nav a:hover {
  color:gray;
}

.nav-icon{
  display: flex;
  flex-direction: column;
	pointer-events: auto;
}

.mail{
  width: 15px;	
}

.insta{
  width: 12px;	
}

.t{
  width: 6px;	
}

/* トップビュー */

#particles-js{
	width: 100%;
	height: 100vh;
	pointer-events: none;
	background-size: cover;
	margin:0;
    padding:0;
	}

  #particles-js img{
		  object-fit: cover;
		   height:100vh;
		  width:100%;
	}

.area_top_view{
  position: fixed;
  
  width:100%;
  height:100vh;
  background-size: cover;
  pointer-events: none;
  margin:0;
  padding:0;
}

/*　トップビュー スライドショー*/
.slide {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
	pointer-events: auto; /* マウスイベントを有効化 */
	background-size: cover;
	margin:0;
padding:0;
}


.slide-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  opacity: 0;
	animation: slider-1 24s linear infinite;
	display: block;
	pointer-events: auto; /* マウスイベントを有効化 */
}

.slide-image img{
	
	width: 100%;
	heigtht: 100vh;
	background-size: cover;
	pointer-events: auto; /* マウスイベントを有効化 */
	}

.slide-image:nth-child(1) {
  background-image: url(./images/jpg/アセット 55-100.jpg);
  animation-delay: -2s;
}

.slide-image:nth-child(2) {
  background-image: url(./images/jpg/アセット 54-100.jpg);
  animation-delay: 6s;
}

.slide-image:nth-child(3) {
  background-image: url(./images/jpg/アセット 56-100.jpg);
  animation-delay: 14s;
}

@keyframes slider-1 {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  4.16% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  41.66% {
    opacity: 0;
    transform: scale(1.2);
  }
    100% {
  opacity: 0;
  }
}



/* メインコンテンツ */
#main{
	position: relative;
	z-index: 1;
	background-color: white;
}

#main a:hover {
  color:gray;
}


.wakuwaku { 
  background-image: url('./images/jpg/アセット 50-100.jpg');
	 background-size: cover;
    background-position: center;
  height: 500px;
  align-items: center;
	justify-content:center;
  display: flex;
  width: 100%;
}



.box-wrapper{
	display: flex;
	justify-content: space-between;
	margin-bottom: 30px;
	}

.box-wrapper h1 {
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.2;
  font-size: 1.8rem;
	white-space: nowrap;/*改行しない */
	}

.box1{
	width: 250px;
	height:40px;
	text-align: center;
	border: solid 1px #2D4DA0;
    justify-content: center;
	pointer-events: auto;
	 position: relative;
}


.box1 a {
  pointer-events:;
  font-size: 0.4rem;
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.text1{
	font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.8;
  font-size: 0.7rem;
  text-align: justify; /* 両端揃え */
}

.box-wrapper2{
	display: flex;
	width: 100%;
	justify-content: space-between;
	}

.child1{
	width: 40%;
	margin-right: 40px;
	}

.child2{
	width: 60%;
	}

.box-wrapper3{
	width: 60%;
	margin-right: 60px;
	}

.wakuwaku_img{
	display: flex;
	align-items: center;
	margin-left: 80px;
}


.title1{
	margin-top: 30px;
	font-family: 'Noto Sans JP', sans-serif;
   line-height: 1.8;
   font-size: 0.7rem;
	color: #F098BE;
}

.title2{
	margin-top: 30px;
	font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.8;
  font-size: 0.7rem;
	color: #829BEA;
}

.text2{
	font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.8;
  font-size: 0.6rem;
  color: #F098BE;
  text-align: justify; /* 両端揃え */
}

.text3{
	font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.8;
  font-size: 0.6rem;
  color: #829BEA;
  text-align: justify; /* 両端揃え */
}


.title-main{
  text-align: center;
	margin-top: 40px;
}

.title-main h2{
  font-family: 'Work Sans', sans-serif ;
	font-style: italic;
  font-size:  rem;
}

.title-main p{
 	font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.4;
  font-size: 1.1rem;
}

.title-main2{
  text-align: left;
	 letter-spacing: 0.12em;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.8;
  font-size: 0.8rem;
  color: white;
	margin-bottom: 30px;
}

.title-main3{
  text-align: center;
	margin-bottom: 30px;
}

.title-main3 h2{
  font-family: 'Work Sans', sans-serif ;
	font-style: italic;
  font-size:  rem;
}


.box2{
	text-align: center;
	width: 400px;
	height:55px;
	font-size: 0.4rem;
	padding: 2em 15em;
	border: solid 1px #76C6BD;
    justify-content: center;
	pointer-events: auto;
	position: relative;
}

.box2:hover {
  border: solid 1px red;
  cursor: pointer;
}

.box2 a {
  font-size: 0.8rem;
  pointer-events: auto;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 20%;
  left: 0;
}

.box-container{
	display: flex;
      justify-content: center;
      align-items: center;
      height: 10vh;
	}

.box3{
	text-align: center;
	width: 400px;
	height:55px;
	font-size: 0.4rem;
	padding: 2em 15em;
	border: solid 1px #F8C6BE;
    justify-content: center;
	pointer-events: auto;
	position: relative;
}

.box3:hover {
  border: solid 1px red;
  cursor: pointer;
}

.box3 a {
  font-size: 0.8rem;
  pointer-events: auto;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 20%;
  left: 0;
}

.box4{
	text-align: center;
	width: 400px;
	height:68px;
	font-size: 0.4rem;
	padding: 2em 10em;
	background-color: #DAD2C6;
    justify-content: center;
	pointer-events: auto;
	font-family: 'Noto Sans JP', sans-serif;
	position: relative;
}

.box4:hover {
  border: solid 1px red;
  cursor: pointer;
}

.box4 a {
  pointer-events: auto;
  font-size: 0.8rem;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 28%;
  left: 0;
}

.image-container {
   display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
	margin-top: 30px;
	margin-bottom: 30px;
}

.image-container a {
  display: block;
  width: 100%;
  height: 100%;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* 中段スライドショー */
.slider img{
  width: 100%;
  height: auto;
}

.slider {
	margin-top: 0px;
	margin-bottom: 0px;
}

.workflow-back{
  background-color: #FFFAF1;
  height: 480px;
	margin-top: 50px;
	padding-top: 15px;
	padding-right: 30px;
	padding-left: 30px;
	}




.workflow-back2{
    background-color: #446AC6;
    background-position: center;
    height: 680px;
	padding-top: 50px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	padding-left:70px;
	padding-right: 70px;
	}

.workflow-back2-illust{
	 position: absolute;
    top:36%;
	right:18%;
}

.workflow-back2-illust img{
	width: 10vw;
	height:auto;
	}

.workflow-back2 p{
	color : white;
	line-height: 1.6;
    font-size: 0.9rem;
	}

.hacchu-wrapper{
display: flex;
	justify-content: space-between;
}

.hacchu-text{
text-align: left;
}

.hacchu-text span{
font-size:0.5rem;
}

.hacchu-PAGETOP{
 writing-mode: vertical-rl;/* 文字を縦書きにする */
	letter-spacing: 0.25em;
	font-family: 'Noto Sans JP', sans-serif;
	position: relative;
}

.hacchu-PAGETOP::after{
  content:"";
  position: absolute;
  top:0;
  right:0;
  width:1px;
  height: 90px;
  background:black;
}

.hacchu-PAGETOP::before {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    width: 1px;
    height: 20px;
    background: black;
    transform: skewX(31deg);
}


.arrow1{
  width: 15px;
  height: 15px;
  border: 1px solid;
  border-color:  transparent transparent white white;
  transform: rotate(-45deg);
	margin:5px auto 10px 3px;
}

.box-wrapper4 {
  text-align: center;
	justify-content: space-between;
	display: flex;
}

.workflow-text-wrapper{
  margin-left: 30px;
	}


.box-wrapper4 h3 {
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.5;
  font-size: 1rem;
  margin-top: 30px ;
	margin-bottom: 10px;
	text-align: left;
}

.workflow_illust {
 width: 12vw;
}

.workflow_number {
 width: 2vw;
 padding-bottom: 100px;
}

.box-wrapper4 p {
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.6;
  font-size: 0.5rem;
	text-align: left;
}


/* フッター */
footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
  bottom: 35px;
  width: 100%;
  margin-top: auto; /* 親要素のcolumnとの組み合わせで下部固定 */
	margin-bottom: 30px;
}

.footer-links-wrapper{
  display: flex;
	align-items: center;
}

.footer-links {
  display: flex;
  justify-content: space-between;
	align-items: center;
}

.footer-link {
  padding: 5px 10px; /* リンクの内側の余白 */
}

.footer-icons {
	display: block;
	align-items: center;
}

.t2{
	width: 10px;
	margin-left: 20px;
	margin-bottom: 12px;
}

.insta2{
	width: 16px;
	margin-left: 20px;
	margin-bottom: 12px;
}


.copy {
	display: block;
}

.copy p{
	color: black;
	font-size: 1rem;
}


.relatedworks img{
  transition: 0.3s; /* アニメーションのスムーズさを追加 */
}

/* マウスが img 要素に載ったときにグレーのフィルターをかける */
.relatedworks img:hover {
  opacity:0.5;
}



@media screen and (min-width: 768px){
.br-sp {display: none; }
}	
	

/* モバイル*/
@media (max-width: 600px) {
	
	
	.scroll{
 top: -50px;
		left: 0px;
		margin-top: -150px;
	}
	
	/*下からの距離が変化して上から下に動く*/
@keyframes mousemove{
      0%{top:-50px;}
      50%{top:-40px;}
     100%{top:-50px;}
 }
	
	.wrapper{
	padding:0 10px;
}
	
.box-wrapper{
	flex-direction: column;
	  justify-content: center;
  align-items: center;
	}
	
	.box-wrapper h1 {
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.2;
  font-size: 1.2rem;
	white-space: nowrap;/*改行しない */
	}
	
.wakuwaku{
	flex-direction: column;
	height: 800px;
	padding-top: 30px;
	}
	
	.box-wrapper2{
flex-direction: column;
	}
	
	.box-wrapper h1 {
		margin-bottom: 20px;
		}
	
	.child1{
	width: 100%;
	margin-right: 0;
	}

.child2{
	width: 100%;
	}
	
.box-wrapper3 {
    width: 100%;
    margin-right: 0;
}

.wakuwaku_img {
margin-top: 40px;
    margin-left: 0;
}

	.wakuwaku_img img{
	width: 45vw;	
}
	
	
	.title1 {
    margin-top: 10px;
}

	.title2 {
    margin-top: 10px;
}
	
	
	

.image-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 10px;
	margin-top: 30px;
    margin-bottom: 30px;
}
	
	.title-main {
	padding:0 10px;
	}
	
.title-main p{
	font-size: 1rem;
	line-height: 1.5;
}

	
.box1 a {
    font-size: 0.8rem;
}	
	

.box2 {
    width: 250px;
	padding: 2em 2em;
}
	
.box2 a {
    font-size: 0.8rem;
	top: 20%;
}	
	
 .box3 {
    width: 250px;
	padding: 2em 2em;
}
	
.box3 a {
    font-size: 0.8rem;
	top: 20%;
}	

.slider{
    margin-bottom: 30px;
}	

.workflow-back {
    height: 1050px;
    margin-top: 30px;
    padding-top: 15px;
	 justify-content:center;
	align-items: center;
}
	
.box-wrapper4{
flex-direction: column;
	margin-top: 0;
	}
	
	.workflow_number {
    width: 20px;
    padding-bottom: 0;
}
	
.workflow_illust {
    width: 40vw;
}
	
	

.box-wrapper4 h3 {
    line-height: 1.2;
    font-size: 0.8rem;
    margin: 10px auto 10px auto;
}
	

.box-wrapper4 p {
    line-height: 1.5;
    font-size: 0.7rem;
	margin-bottom: 30px;
}
	
	.br-sp2 {display: none; }
	
	.title-main2 {
    line-height: 1.8;
    font-size: 0.8rem;
    margin: 20px auto;
}
	
	.box4 {
    width: 250px;
	padding: 2em 2em;
}
	footer {
    flex-direction: column;
}
	.footer-links-wrapper {
   flex-direction: column;
		  font-size: 0.6rem;
		width:100%;
}
	
	.insta2 {
    margin-left: 00px;
    margin-bottom: 12px;
}
	
	
.workflow-back2 {
    background-position: 60% 20%;
}
	
.hacchu-text{
   text-align: center;
}

.arrow1{
	margin: 5px auto 10px auto;
}
	
 .hacchu-wrapper{
	    flex-direction: column;
		}
	
 .box4{
	 margin-bottom: 20px;
	 height:60px;
	}
	
	.scroll{
   height: 20vh;
	}