@charset "UTF-8";

body{
  width:100%; /*ページ全体の幅は100%と指定する*/	
  text-align:center; /*ページ全体を中央揃えにする*/
  font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

*{box-sizing: border-box;}
/*画面移動スクロール*/
html { scroll-behavior: smooth;}


/*トップ画像*/
.top-container{
   width: 100%;
    height: 0;
 
    /* (1006 / 画像の横幅) × 100 */
    padding-top: 71.85714286%;
 
    background: url("../img01/top_00.png") no-repeat center;
    background-size: auto 100%;
}
/*メニューボタン非表示*/
.nav{
	display: none;
}

/*メニューボタン*/
.menu-list ul{
	position: relative;
	text-align: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
	margin-right: auto;
	margin-left: auto;
	padding: 0;
}

.menu-list li a{
	
	font-size:40px;
	padding-left: 40px;
}
.menu-list li span{
	tent: ""con;
	position: absolute;;
	width: 20px;
	height: 40px;
	background: #e70012;
	border-radius: 0 75px 75px 0;
	top: 12%;
}
.menu-list ul  li span{
	margin: auto 0;
}
.menu-list li a:hover{
	color:#e70012;
	transition: color .3s;
}
.menu-wrapper{
    position: sticky;
    top: 0;
	background-color: white;
	z-index: 30;
	padding-top: 10px;
	height: 85px;
}
.menu-list{
	max-width: 1000px;
	justify-content: space-between;
	margin: 0 auto;
}

/*about us*/
.about-titter h1{
	
	font-size: 60px;
	color: black;
	text-align: center;	
	position: relative;
  display: inline-block;
  padding: 0 45px;
}

.about-titter{
	margin-bottom: 20px;
	margin-top: 100px;
}
.about-img{
　　　width: 100%;
    height: 0;
 
    /* (1006 / 画像の横幅) × 100 */
    padding-top: 27%;
 
    background: url("../img01/about_01.png") no-repeat center;
    background-size: 100%;
	position: relative;

}

.about-textbox{
	position: absolute;
	top: 30vh;
	right: 50px;
	
	background-color: white;
	border: solid 2px #000000;
	width: 500px;
	padding: 20px;
	display: inline-block;
}
.about-img span{
	font-size: 30px
}

.about-wrapper {
	height: 70vh;
	
}

/*member*/
.member-titter h1{
	
	font-size: 60px;
	color: black;
	text-align: center;	
	position: relative;
    display: inline-block;
    padding: 0 45px;
	margin-top: 50px;
	margin-bottom: 20px;
}

.member-list ul{
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	justify-content: space-around;
	max-width: 1000px;
	margin: 0 auto;
	padding-top: 25px;
	padding-bottom: 80px;
	gap:35px;
}
.member-list li{
	width: 300px;
	display: inline-block;
	
}
.member-list img{
	border-radius: 50%;
    width: 180px;
    height: 180px; 
    object-fit: cover;
}
.member-list p{
	
	font-size: 20px;
	margin-top: 20px
}
.member-list  li a:hover {
	filter: drop-shadow(10px 10px 0px #e70012);
	 transition: all 0.2s ease;
	opacity: 1;
}

/*プロジェクト紹介*/
.project-titter h1{
	
	font-size: 60px;
	padding-top: 40px;
	padding-bottom: 35px;
}
.project-list li{
	width: 250px;
	margin-right: 30px;
	margin-bottom: 50px;
	display: inline-block;
	position: relative;
}
.project-list  li p{
	margin-top: 13px;
	
	font-size: 17px;
	text-align: center;
}
.spacer{
	width: 100%;
}
.project-list span{
	background-color: white;
	border: solid 2.5px black;
	
	font-size: 30px;
	padding: 10px 15px;
	position: absolute;
	top: 0;
	left: 0;
}

/*コンタクト*/
.contact-wrapper{
	position: relative;
	display: inline-block;
	border: solid 2px black;
	width: 95%;
	height: 440px;
	margin-top: 60px; 
	background-image:
    radial-gradient(#ebebec 3px, transparent 3px);
	background-size: 20px 20px;
	max-width: 900px;
}
.contact-title h2{
	
	font-size: 45px;
	text-align: center;
	border: solid 3px black;
	display: inline-block;
	padding: 10px 35px;
	background-color: white;
	z-index: 20;
	position: absolute;
    left: 50%;
    transform: translateX(-50%);	
}
.contact-txt01{
	text-align: left;
	background-color: white;
	max-width: 400px;
	width: 100%;
	position: absolute;
	left: 8%;
	top: 50px;
	z-index: 10;
	padding: 15px 0px 15px 20px;
}
.contact-txt01 p{
	padding-left: 0;
	font-size: 30px;
}
.contact-txt02{
	background-color: white;
	width: 500px;
	text-align: left;
	padding: 70px 10px;
	position: absolute;
	right: 20px;
	top: 120px;
	border: solid 2px black;	
}
.contact-txt02 p{	
	font-size: 16px;
	padding: 0 20px;
	letter-spacing: -0.01em;
	line-height: 150%;
}

.contact-title02{
	display: inline-block;
	position: absolute;
	z-index: 10px;
	border: 2px solid black;
    border-radius: 3em;
	top: 220px;
	left: 25%;
	z-index: 5;
	background-color: #e70012;
}

.contact-title02 a{
	display: block;
}
.contact-title02 a:hover{
	opacity: 1;
	background-color: black;
	border-radius: 3em;
}
.contact-title02 h3{
	
	font-size: 30px;
	color: white;
	padding: 10px 100px;
}

/*Topに戻るボタン*/
.return-wrapper{
width: 150px;
  height: 75px;
  border: solid 2px #e70012;
  border-radius: 75px 75px 0 0;
  border-bottom: 0;
  margin: 20px auto;
　font-size:200px; 
  line-height:100px; /*縦中央*/
  text-align:center; /*横中央*/
}

.return-wrapper a{
	font-size:25px;
	color: #e70012;
}
.return-wrapper a:hover{
	color: black;
}

/*フッター*/
footer{
background-color:#d8d9d9;
height: 40px;
}

footer p{
font-size:14px;
color: white;
text-align: center;
padding-top: 8px;
}

/*ハンバーガーメニュー隠し*/
.hamburger-menu	{
	display: none
}

/*ポップアップ時のSNSボタン*/
.sns01{
	background-color: #1877f2;
	padding: 10px;
	margin-top: 10px;
	border-radius: 3rem;
	width: 100px;
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-size: 15px;
}

.sns02{
	color: #FFFFFF;
	padding: 10px;
	margin-left: 10px;
	margin-top: 10px;
	border-radius: 3rem;
	width: 100px;
	text-align: center;
	background-image: linear-gradient(150deg, rgba(247, 166, 12, 1) 10%, rgba(255, 34, 87, 1) 40%, rgba(154, 39, 238, 1) 68%, rgba(35, 102, 247, 1) 90%);
	font-weight: bold;
	font-size: 15px;
}

/*ポップアップ時の文字装飾*/
.title{
	font-size: 18px;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 5px;
	font-family: "Sawarabi Gothic";
}
.text{
	font-family: "Sawarabi Gothic"; 
}
/*動画*/
.movie{
padding-top: 100px;
}