@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: Edu_AU_VIC_WA_NT_Hand;
    src:url(../font/Edu_AU_VIC_WA_NT_Hand/EduAUVICWANTHand-VariableFont_wght.ttf)
}

.top1 {
  height: 15vh;
  display: flex;
}

header {
  margin-right: 60%;
}

nav {
  width: 60%;
}

nav ul {
    display: flex;
    margin-top: 2.3vw;
    margin-left: 15.6vw;
    width: 70vw;
    height: 5vh;
}

nav ul li {
    margin-left: auto;
    margin-right: auto;
    font-size: 2vw;
    list-style-type: none;
    padding: 0 22px;
    display: inline; /* 横並びにさせる */
    border-left: 1px solid #808080; /* 区切り線 */
}

li:first-child {
  border: none; /* 親要素から見て一番目のli要素のボーダーを無しに */
}

nav ul li a {
    width: 5%;
    color:#808080;
    text-decoration: none;
    font-family: Edu_AU_VIC_WA_NT_Hand;
}


.hover1 {
	display: inline-block;
	position: relative;
	text-decoration: none;
}
.hover1::after {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: #696969;
	transition: all 0.3s ease 0s;
}
.hover1:hover {
	cursor: pointer;
}
.hover1:hover::after {
	width: 7vw;
}

.hover2 {
	display: inline-block;
	position: relative;
	text-decoration: none;
}
.hover2::after {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: #696969;
	transition: all 0.3s ease 0s;
}
.hover2:hover {
	cursor: pointer;
}
.hover2:hover::after {
	width: 9vw;
}

.hover3 {
	display: inline-block;
	position: relative;
	text-decoration: none;
}
.hover3::after {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: #696969;
	transition: all 0.3s ease 0s;
}
.hover3:hover {
	cursor: pointer;
}
.hover3:hover::after {
	width: 7vw;
}

.hover4 {
	display: inline-block;
	position: relative;
	text-decoration: none;
}
.hover4::after {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: #696969;
	transition: all 0.3s ease 0s;
}
.hover4:hover {
	cursor: pointer;
}
.hover4:hover::after {
	width: 6vw;
}

.hover5 {
	display: inline-block;
	position: relative;
	text-decoration: none;
}
.hover5::after {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: #696969;
	transition: all 0.3s ease 0s;
}
.hover5:hover {
	cursor: pointer;
}
.hover5:hover::after {
	width: 9.5vw;
}

.hover6 {
	display: inline-block;
	position: relative;
	text-decoration: none;
}
.hover6::after {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: #696969;
	transition: all 0.3s ease 0s;
}
.hover6:hover {
	cursor: pointer;
}
.hover6:hover::after {
	width: 8vw;
}

.sab1 {
    display: flex;
}

h1 img {
  display: block;
  margin: 2vw;
    width: 9vw;

}

.scrolldown2{
 
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:-6vw;/*棒の位置*/
  left:9%; 
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
  position: absolute;
  left:10px;
  bottom:10px;
    /*テキストの形状*/
  color: #a9a9a9;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    animation:
    circlemove 8s ease-in-out infinite,
    cirlemovehide 8s ease-out infinite;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
  width:10px;
  height:10px;
  border-radius: 50%;
  background:#a9a9a9;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
    circlemove 8s ease-in-out infinite,
    cirlemovehide 8s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:500px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
  100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
  content:"";
    /*描画位置*/
  position: absolute;
  bottom:0;
  left:0;
    /*線の形状*/
  width:2px;
  height: 500px;
  background:#a9a9a9
}



p img{
  display: block;
  margin-left: auto;
  margin-right: 2vw;
  width: 80%;
}



section h2 {
  margin-top: 10vw;
    text-align: center;
    font-size: 4vw;
    color: #808080;
    font-family: Edu_AU_VIC_WA_NT_Hand;
}

section main img {
  width: 3vw;
margin-left: 48.5%;
}

.p-box1 {
 
  margin-top: 3vw;
  font-size: 1.2vw;
  text-align: center;
  line-height: 3;
  letter-spacing: 0.5em;
  font-family:serif;
  color: #a9a9a9;
}



.ac-box{
  width: auto;
  margin: 30px auto 5px;
  }
  
  .ac-box label{
  max-width: 50px;
  font-size: 20px;
  text-align: center;
  background: #808080;
  margin: auto;
  line-height: 50px;
  position: relative;
  display: block;
  height: 50px;
  border-radius: 100px;
  cursor: pointer;
  color: #fff;
  transition: all 0.5s;
  }
  
.ac-box label a {
  padding-left: 0.5vw;
  display: block;
  color: #fff;
  text-decoration: none;
}

  .ac-box label:hover{
  background: rgba(95, 63, 73, 0.55);
  -webkit-transition: all .3s;
  transition: all .3s;
  }
  
  .ac-box input{
  display: none;
  }
  
  .ac-box label:after{
    display: none;/*変なチェックボックスを消した*/
  color: #fff;
  /*font-family:"FontAwesome";いらないかも*/
  content:" \f078";
  }
  
  .ac-box input:checked ~ label::after {
    display: none;/*変なチェックボックスを消した*/
  color: #fff;
  /* /*font-family:"FontAwesome"; いらないかも*/
  content:" \f077";
  }
  
section h3 {
  text-align: center;
  margin-top: 10vw;
  font-size: 4vw;
  color: #808080;
  font-family: Edu_AU_VIC_WA_NT_Hand;
}

.p-box2 {
  margin-top: 3vw;
  font-size: 1.2vw;
  text-align: center;
  line-height: 3;
  letter-spacing: 0.5em;
  font-family:serif;
  color: #a9a9a9;
}

section h4 {
  text-align: center;
  margin-top: 10vw;
  font-size: 4vw;
  color: #808080;
  font-family: Edu_AU_VIC_WA_NT_Hand;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80vw;
}

.photo {
  background-size: 100%;
  background-image: url(../images/footer.jpg);
}

footer {
  margin-top: 4%;
  padding: 3% 4% 2%; /*上、左右、下*/
 /*paddingやmarginで値が2つの時は上下、値が3つの時は上、左右、下、
 値が4つの時は上、右、下、左（時計回り）*/
  background-color: #696969;
}

footer ul {
  display: flex;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2%;
  list-style: none;
 
}

footer ul li {
  width: 25%; /*4等分の２５％*/
}


footer ul li a {
  display: block;
  text-align: center;
  line-height: 2.4;
  color: #101010;
  font-size: 3vw;
  text-decoration: none;
}

footer p {
  text-align: center;
  color: #101010;
  font-size: 1.2vw;
}