@charset "utf-8";

/*========= スクロールダウンのためのCSS ===============*/


/*=== 9-1-4 矢印が動いてスクロールを促す  ====*/

/*スクロールダウン全体の場所*/
.scrolldown4{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:1%;
  right:50%;
    /*矢印の動き1秒かけて永遠にループ*/
  animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }

/*Scrollテキストの描写*/
.scrolldown4 span{
    /*描画位置*/
  position: absolute;
  left:-20px;
  bottom:10px;
    /*テキストの形状*/
  color: #eee;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: #eee;
    transform: skewX(-31deg);
}

.scrolldown4:after{
  content:"";
    /*描画位置*/
  position: absolute;
  bottom:0;
  right:0;
    /*矢印の形状*/
  width:1px;
  height: 50px;
  background:#eee;
}

/*========= レイアウトのためのCSS ===============*/
#head-nav{
  display: flex;
  width: 100%;
  height: 50px;
  background-color: skyblue;
  align-items: center;
  position:fixed
  z-index: 1;
}
.svg{
  padding-top: 10px;
  height: 50px;
  width: 50px;
}
.home{
  width: 60px;
  height: 60px;
}
.menu-item{
  list-style: none;
  padding: 10px;
  text-align: right;
  display: inline-block;
}
.titles {
  margin-right: auto;
  padding: 10px;
}
#Profile-img{

 }
#NameHeader{
  position: fixed;
  top: 50%;
  left: 39%;
  transform: translateY(-50%) translateX(-50%);
  text-shadow: 0 0 15px #666;
  text-align: center;
  color:#cbff7b;
}
#GroupHeader{
  position: fixed;
  top: 63%;
  left: 34%;
  transform: translateY(-50%) translateX(-50%);
  text-shadow: 0 0 15px #666;
  text-align: center;
  color:#c8f288;

}
#header{
  width:100%;
  height: 100vh;
  position: relative;
} 

#header:before{
  content: '';
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height: 100vh;
  /*背景画像設定*/
  background:url("../img/sky07-avif.avif") no-repeat center;
  background-size:cover;
}

#container{
  font-family: "Space Mono", Arial, "UDEVGothic", serif;
  position: relative;
  z-index:1;
  background:#eee;
  line-height: 1.7;
  font-weight: 400;
}

@media screen and (max-width:768px){

    #header,
    #header:before{
  height: 90vh;    
    }
    

}
section:nth-of-type(2n+1){
    background:#eee;
  }
  section{
    background: #fff;
    padding:30px;
  }


  #footer{
    background:#333;
    color:#fff;
    display: block;
    text-align: center;
    padding:20px;
    position: relative;/*#header-imgよりも配置を上にするためにrelativeをつける*/
    z-index: 2;/*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
  }
  
    /*About*/
  #Area01{
    list-style: none;
  }
  .first-block{
    display: inline-block;
    float: left;
    color: #000;
    font-weight: bold;
    box-sizing: border-box;
  
  }
.second-block{
  width: 40%;
  display: inline-block;
  color: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;

}

.Title{
text-align: center;
margin-bottom: 20px;
  color: #000;
    box-sizing: border-box;
}

#explain{
  font-weight: 400;
  margin: 0 0 20px 0;
  margin-bottom: 30px;
  display: inline-block;
  
}
 /*/About*/

/*contact*/
.btn {
  display: inline-block;
  background-color: #e3364a; /* 背景色 */
  box-shadow: 0 5px 0 #ca1c30; /* 影の太さ・色 */
  border-radius: 60px;
  color: #fff;
  cursor: pointer;
  text-decoration: none; /* 文字の下線を消す */
}
/* クリック時 */
.btn:active {
  box-shadow: none;
  transform: translateY(5px);
}


#Area03{
  text-align: center;
}
/*/contact*/
a{
  color: orange;
}


/*ポップアップ*/
.open {
	cursor:pointer; 
}
#popup {
	display: none;
}
.overlay {
	display: none;
}
#popup:checked + .overlay {
	display: block;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
.window {
	width: 90vw;
	max-width: 580px;
	height: 400px;
	background-color: orange;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.text {
	font-size: 25px;
	margin: 0;
	color: #fcfff9;
}
.close {
	cursor:pointer;
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 20px;
}

.message textarea {
  border-color: red;
}
.send{
  background-color: greenyellow;
  box-shadow: 0 5px 0 green; /* 影の太さ・色 */
}
#Area02{
text-align: center;

}
ul{
  padding-left:0;
}
li{
  list-style:none;
}

@media screen and (min-width:781px) {
	/* ここにパソコン版だけの記述 */
  #NameHeader{
    font-size: 8rem;
}
#GroupHeader{
    font-size: 3.5rem;
}
.first-block{
  width: 13%;
}
  .Title{
    font-size: 40px;
  }
  #container{
    font-size: 16px;
  }
  .btn{
    padding: 0.8em 3em;
  }
}
@media screen and (min-width:481px) and (max-width:780px){
  /*ipad*/
  #NameHeader{
    font-size: 4rem;
}
#GroupHeader{
    font-size: 2rem;
}
.first-block{
  width: 22%;
}
  .Title{
    font-size: 30px;
  }
  #container{
    font-size: 16px;
  }
  .btn{
    padding: 0.8em 3em;
  }
  #explain{
    font-size: 0.9rem;
  }
  .btn{
    padding: 0.6em 2.5em;
  }
}
@media screen and (max-width:480px) {
	/* ここにスマホ版だけの記述 */
  #NameHeader{
    font-size: 3.5rem;
    left: 44%;
}

#GroupHeader{
    font-size: 1.5rem;
    left: 38%;
}
.first-block{
  width: 45%;
}

#explain{
  font-size: 0.9rem;
}
.Title{
  font-size: 2rem;
}
#container{
  font-size: 0.9rem;
}
.btn{
  padding: 0.6em 2.5em;
}
footer{
  font-size: 0.9rem;
}

}