* {
  margin: 0;
}
html, body, header {
  height: 100%;
}

/* body */
body {
  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;
}



/* header */
header {
  position: relative;

}

.my-illustration {
  position: absolute;
  top: 40%;
  left: 30%;
  /* right: 0;
  bottom: 0; */
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
 
  /* 文字装飾 */
  display: inline-block;
  font-size: 4vh;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 1);
  padding: 10px 60px;
  background-color: rgba(0, 0, 0, 0.15);
  text-shadow: 1px 2px 2px #000000;

  border-bottom: 0.4rem solid rgba(0, 0, 0, 0.6);
  font-style: italic;
}





/* ダウンスクロール */
.scroll-downs {
  position: absolute;
  /* top: 0; */
  /* right: 0; */
  bottom: 20px;
  left: 50%;
  margin: auto;
  padding: 10px;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
.mousey {
  width: 6px;
  padding: 10px 15px;
  height: 35px;
  border: 4px solid rgba(0, 0, 0, 0.9);
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 25px;
  opacity: 0.75;
  box-sizing: content-box;
}
.scroller {
  width: 4px;
  height: 18px;
  border-radius: 25%;
  background-color: rgba(0, 0, 0, 0.9);
  /* color: rgba(0, 0, 0, 0.7); */
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;
}
@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(15px); opacity: 0;}
}


.full {
  background-image: url("../img/header_background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-attachment: scroll;
  
  height:100vh;
  height: calc(var(--vh, 1vh) * 100);

} 






/* nav */
nav {
  background-color: rgb(131, 68, 0);
}
.main-nav {
  height: 40px;
  display: flex;
  list-style: none;
  text-align: center;
  font-weight: bold;
  max-width: 1000px;
  margin: 0 auto;
}

nav ul {
  padding: 0;
}

nav li {
  margin: 0px auto;
  /* マウスホバーの位置確認 */
  /* background-color: red; */
}
nav a {
  text-decoration: none;
  color: rgb(255, 111, 0);
  display: block;
  padding: 8px;
}







main {
  max-width: 1000px;
  margin: 0 auto;
  border-color: antiquewhite;
  text-align: center;
}

main > div > h2 {
  /* display: inline-block; */
  padding: 20px 40px 10px 40px;
  color:brown;
  /* border-bottom: 1px dashed #000000; */
}
main > div > h3 {
  padding: 10px 40px;
}

/* ＜共通＞ */
/* フルスクリーン */
.full-screen {
  min-height: 100vh;
}


.full-antiquewhite {
  background-color: antiquewhite;
}
.full-aliceblue {
  background-color: aliceblue;
}




/* ABOUT(自己紹介：プロフィール,スキル） */
.main-profile,
.main-skill {
  padding-top: 10px;
  padding-bottom: 40px;
  /* border: 2px dotted black; */
  margin: 0px auto;
  /* margin-bottom: 50px; */
}

.main-skill {
  text-align: center;
}
.main-skill ul {
  text-align: left;
  margin-left: 2vh;
}
.main-profile img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
}

.main-profile p,
.main-skill p {
  line-height: 30px;
  padding: 5px;
}

.skill-contents {
  font-weight: bold;
  background-color: brown;
  color: white;
}

.profile-name {
  font-size: 25px;
  font-weight: bold;
}

/* PC用 */
@media (min-width: 700px) {
  .flexible-cont {
    display: flex;
    justify-content: center;
  } 
  main > div > h2 {
    border-bottom: 1px dashed #000000;
  }
} 



/* WORK(成果物の紹介） カルーセル */

#ABOUT,
#WORK,
#BENEFIT,
#CONTACT {
  padding-left: 10px;
  padding-right: 10px;
}
#WORK img,
#BENEFIT img,
#CONTACT img {
  width: 100%;
  height: 100%;
}

#WORK .flexible-cont,
#BENEFIT .flexible-cont {
  /* margin-bottom: 5px; */
  width: 100%;
  height: 300px;
}




.swiper,
.swiper--wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 100%;
  
}

.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  box-sizing: border-box;
  border: 1px solid #000000;
  position: relative;
  width: 100%;
  height: 100%;
}


.swiper-slide .title,
.swiper-text {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  color: rgba(0, 0, 0, 0.9);
  font-size: 1.5vh;
  /* padding-left: 20px; */
  overflow: visible;
  
}
.swiper-slide span {
  display: inline-block;
  margin: 10px auto;
  font-size: 2vh;
  border-bottom: 1px solid #000;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  text-align: left;
  padding-left: 1vh;
  padding-right: 1vh;
}
.swiper-slide p {
  line-height: 3vh;
  margin-bottom: 5px;
  text-align: left;
  padding-left: 3vh;
  padding-right: 3vh;
  /* overflow: visible; */
}



.swiper-slide .title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  font-weight:bold;
  font-size: 2vh;
  letter-spacing: 0.2em;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  font-style: italic;
}

.swiper-slide:nth-child(3n + 1) {
  background-color: rgba(255, 50, 0, 0.3);
}

.swiper-slide:nth-child(3n + 2) {
  background-color: rgba(0, 255, 50, 0.3);
}

.swiper-slide:nth-child(3n + 3) {
  background-color: rgba(50, 0, 255, 0.3);
}


.swiper-button-next::after, .swiper-button-prev::after {
  color: rgba(200, 200, 200, 0.5);
  font-size: 20px !important;
}

.work-detail {
  padding: 10px 0px;
}

#CONTACT {
  text-align: center;
  margin: 20px auto;
  max-width: 1000px;
  border-color: antiquewhite;
}

#CONTACT .googleforms {
  width: 100%;
}



/* トップへ戻るボタン */
#topbutton {
  /* ▼ボタンの表示位置を画面の右下に固定 */
  position: fixed; /* ←表示場所を固定 */
  bottom: 4vh;   /* ←下端からの距離 */
  right: 10vh;    /* ←右端からの距離 */
  width: 9vh;     /* ←横幅 */
  height: 9vh;
  /* ▼最初は非表示にしておく */
  display: none;

  /* ▼配色・配置・文字の装飾など */
  background-color: rgb(40, 30, 20); /* ←背景色 */
  opacity: 0.7;        /* ←透明度 */
  border-radius: 7vh;  /* ←角丸の半径 */
  text-align:center;
  font-size: 2vh;     /* ←文字サイズ */
  font-weight: bold;   /* ←文字の太さ */
  margin: 0px;          /* ←外側の余白 */
  line-height: 8.5vh;;
}
#topbutton a {
  /* ▼リンクの装飾 */
  color: green;          /* ←文字色 */
  text-decoration: none; /* ←下線なし */
  display: inline-block;
	vertical-align: middle;	/*上下の中央揃え指定*/
	line-height:normal;	/*BOX内のテキスト行間を元に戻します*/
}
#topbutton a:hover {
  /* ▼マウスが載ったときの装飾 */
  color: rgb(200, 200, 0);              /* ←文字色 */
  text-decoration: underline; /* ←下線あり */

}


footer {
  padding: 5px 0;
  text-align: center;
  background-color: #000;
  color: #FFF;
  text-shadow: 2px 2px 2px rgba(190, 190, 190, 0.4);
  font-style: italic;
  
}