@charset "urf-8";



html {
    scroll-behavior: smooth;
    margin: 0;
    box-sizing:border-box; 
    overflow: hidden;
}
  
body {
    font-family: "Shippori Mincho B1", serif;
    font-size: 100%;
    font-weight: 200;
    font-style: normal;
    color: #333333;
    margin: 0;
}

h1,h2,h3,p {
    margin: 0;
}

img {
    max-width: 100%;
    vertical-align: bottom;
}


/* headerのスタイル */

.header {
  position: relative;/*親要素にrelative*/
  width: 100%;
}

.main-title {
  position: absolute;/*重ねたい子要素にabsolute*/
  top:47.5%;
  left: 75%;

  -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  font-size: clamp(0.01px,4.5vw,100px);

  font-weight: 1;
  letter-spacing: -0.08em;

  color: rgb(117, 76, 36);
  background-color: rgb(255, 255, 255);

  text-align: center;
  padding-left: 1.5vw;

  white-space: nowrap;/* 自動改行防止 */
}

.main-title-english {
  position: absolute;/*重ねたい子要素にabsolute*/
  top:56%;
  right: -18.5%;

  -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  font-size: clamp(0.01px,1.28vw,100px);
 
  color: rgb(255, 255, 255);


  white-space: nowrap;/* 自動改行防止 */
}

.sub-title{
  -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  font-size: clamp(0.01px,2.2vw,45px);
  
  color: rgb(117, 76, 36);
  margin-left:2.5vw;
  position: absolute;
  top: 96.3%;
  left: 7%;
}

.sub-title-english {
  position: absolute;
  top: 96.7%;
  left: 9%;
  
  margin-left:19vw;

  -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  font-size: clamp(0.01px,1.15vw,22px);

  color: rgb(117, 76, 36);
}

.more-works{
  position: absolute;
  color: rgb(255, 255, 255);
  width: 25vw;

  font-size: 1vw;
  letter-spacing: -0.1em;

  top: 85%;
  margin-left: 42.3vw;
  line-height: 1vw;

}

/* navのスタイル */

.global-nav{
  position: absolute;

  margin-left:79vw;
  margin-top: 45vw;
  width: 43%;
}

ul{
  display:flex;
  list-style:none;
  padding: 0;

  -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  font-size: clamp(0.5vw,2vw,2.5vw);
  }

li{
 padding-left: 2.5vw;
}

a{
  text-decoration:none;
  color: rgb(117, 76, 36);
}

a:link{
  color: rgb(117, 76, 36);
  text-decoration: none;
}

a:visited{
  color: rgb(117, 76, 36);
  text-decoration: none;
}

a:hover{
  color: rgb(117, 76, 36);
  text-decoration: none;
}

a:active{
  color: rgb(117, 76, 36);
  text-decoration: none;
}










.mini-title{
  position: absolute;
  color: rgb(255, 255, 255);
  width: 25vw;
  font-size: 2.1vw;

  margin-top: 2.2vw;
  margin-left: 1.6vw;
  line-height: 1vw;
}

.mini-title-english{
  position: absolute;
  color: rgb(255, 255, 255);
  width: 25vw;

  font-size: 0.8vw;
  letter-spacing: -0.1em;

  margin-top: 4vw;
  margin-left: 1.6vw;
  line-height: 1vw;
}


.about-title{
  position:absolute;
  color: rgb(255, 255, 255);
  
  top:85.8%;
  left:90%;
  font-size: 5vw;

  -ms-transform:translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform:translate(-50%,-50%);/*ベンダープレフィックス*/
  transform:translate(-50%,-50%);/*センター寄せの修正*/
}

.contact-title{
  position:absolute;
  color: rgb(255, 255, 255);
  
  top:85.8%;
  left:87%;
  font-size: 5vw;

  -ms-transform:translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform:translate(-50%,-50%);/*ベンダープレフィックス*/
  transform:translate(-50%,-50%);/*センター寄せの修正*/
}

.name{
  position: absolute;
  color: rgb(255, 255, 255);
  width: 18vw;
  font-size: 3.5vw;

  margin-top: 12.5vw;
  margin-left: 43vw;
  line-height: 1vw;
}

.name-english{
  position: absolute;
  color: rgb(255, 255, 255);
  width: 18vw;
  font-size: 1vw;

  margin-top: 15.5vw;
  margin-left: 43vw;
  line-height: 1vw;
}

.about-text{
  position: absolute;
  color: rgb(255, 255, 255);
  width: 19.8vw;
  font-size: 1vw;

  margin-top: 17.5vw;
  margin-left: 43vw;
  line-height: 1.1vw;
}

.sen{
  font-family:s;
  font-weight: 900;
}

.skil-list{
  position: absolute;
  margin-top: 5vw;
  margin-left: 57.5vw;

  width: 31vw;
}

.face{
  position: absolute;
  margin-top: 10vw;
  margin-left: 27.5vw;

  width: 16.5vw;
}




/* カルーセル全体 */
.carousel {
  /* 水平方向中央寄せ */
  display: flex;
  justify-content: center;

  
}
/* カルーセル内容 */
.contains {
  /* サイズは自由に変更してください。*/
  /* 下の.slideも同じサイズにしてください。 */
  width: 100vw;
  height: 36.5vw;
  overflow: hidden;
  position: absolute;

  top:10.7%;
  

  padding: 0;
  list-style: none;
 
}


/* スライド切り換え用ラジオボタンは常に非表示 */
.slide_select {
  display: none;
}
/* 各スライド */
.slide {
  /* サイズは自由に変更してください。*/
  /* 上の.containsも同じサイズにしてください。 */
  width: 24.5vw;
  height: 31vw;
  position: absolute;
  left:37.6%;




  /* スライドの初期値は選択されていないので透明にしておく */
  opacity: 0;
}
/* 前へ次へボタン */
.scroll_button {
  position: absolute;
  
  height: 2.5vw;
  width: 2.5vw;
  /* 縦中央から20px上の位置 */
  top: 45%;
  margin-top: 2vw;
  /* 上辺と右辺のみ幅5pxの枠線 */
  border-width: 0.25vw 0.25vw 0 0;
  border-style: solid;
  border-color: #ffffff;
  cursor: pointer;

  
  /* スライドよりも前面にする */
  z-index: 3;
}
/* ホバー時にボタンを強調 */
.scroll_button:hover {
  opacity: 1;
}
/* 前へボタン */
.scroll_prev {
  left: -17.5vw;
  /* 上辺と右辺の枠線を回転して"＜"にする */
  transform: rotate(-135deg);
  z-index: 10;
}
/* 次へボタン */
.scroll_next {
  right: -17.5vw;
  /* 上辺と右辺の枠線を回転して"＞"にする */
  transform: rotate(45deg);
}
/* スライド移動ボタンエリア */
.move_controler {
  position: absolute;
  bottom: 1vw;
  width: 100%;
  text-align: center;
  top:95%;
  left: 2%;
}
/* スライド移動の各ボタン */
.button_move {
  display: inline-block;
  height: 0.8vw;
  width: 0.8vw;
  margin: 0 0.1vw;
  border-radius: 100%;
  cursor: pointer;
  
  /* スライドより前面にする */
  z-index: 2;
}
/* ホバー時はやや明るくする */
.button_move:hover {
  opacity: 0.75;
}
/* スライド移動ボタンの色 */
.button_move {
  background-color: #ffffff;
}
/* 1番目のスライド選択時 */
/* 1番目のスライドの透明度を0にして表示する */
.slide_select:nth-of-type(1):checked ~ .slide:nth-of-type(1) {
  opacity: 1;
}
/* スライド移動ボタンの1個目を明るくする */
/* （今選択されていることが分かるように） */
.slide_select:nth-of-type(1):checked ~ .move_controler .button_move:nth-of-type(1) {
  opacity: 1;
}
.slide_select:nth-of-type(2):checked ~ .slide:nth-of-type(2) {
  opacity: 1;
}
/* 2番目のスライド選択時（1番目のスライドと同じことをする） */
.slide_select:nth-of-type(2):checked ~ .move_controler .button_move:nth-of-type(2) {
  opacity: 1;
}
/* 3番目のスライド選択時 */
.slide_select:nth-of-type(3):checked ~ .slide:nth-of-type(3) {
  opacity: 1;
}
.slide_select:nth-of-type(3):checked ~ .move_controler
  .button_move:nth-of-type(3) {
  opacity: 1;
}
/* 4番目のスライド選択時 */
.slide_select:nth-of-type(4):checked ~ .slide:nth-of-type(4) {
  opacity: 1;
}
.slide_select:nth-of-type(4):checked
  ~ .move_controler
  .button_move:nth-of-type(4) {
  opacity: 1;
}
/* 5番目のスライド選択時 */
.slide_select:nth-of-type(5):checked ~ .slide:nth-of-type(5) {
  opacity: 1;
}
.slide_select:nth-of-type(5):checked
  ~ .move_controler
  .button_move:nth-of-type(5) {
  opacity: 1;
}
/* 6番目のスライド選択時 */
.slide_select:nth-of-type(6):checked ~ .slide:nth-of-type(6) {
  opacity: 1;
}
.slide_select:nth-of-type(6):checked
  ~ .move_controler
  .button_move:nth-of-type(6) {
  opacity: 1;
}
/* 7番目のスライド選択時 */
.slide_select:nth-of-type(7):checked ~ .slide:nth-of-type(7) {
  opacity: 1;
}
.slide_select:nth-of-type(7):checked
  ~ .move_controler
  .button_move:nth-of-type(7) {
  opacity: 1;
}
/* 8番目のスライド選択時 */
.slide_select:nth-of-type(8):checked ~ .slide:nth-of-type(8) {
  opacity: 1;
}
.slide_select:nth-of-type(8):checked
  ~ .move_controler
  .button_move:nth-of-type(8) {
  opacity: 1;
}





/* contactのスタイル */

.contact-area{
  position: absolute;
    color: rgb(155, 193, 205);
    width: 50vw;
    height: 25vw;
    font-size:2vw;
    
    top: 23vw;
    left: 50.5vw;

    
    -ms-transform:translate(-50%,-50%);/*ベンダープレフィックス*/
    -webkit-transform:translate(-50%,-50%);/*ベンダープレフィックス*/
    transform:translate(-50%,-50%);/*センター寄せの修正*/
    font-size: clamp(0.1vw,2vw,2vw);
}

.form-dlist__desc,.form-item {
  width: 50vw;
  
}

.contact-hero{
  position: absolute;
  color: rgb(155, 193, 205);
  width: 25vw;
  font-size: 2.1vw;
  
  margin-top: 8vw;
  margin-left: 30vw;
  line-height: 1vw

}

/* ddのデフォルトマージンを削除 */
.form-dlist__desc {
  margin-left: 0;
}

.form-dlist {
  flex-wrap: wrap;

  font-size: 1vw;

  
}

.form-dlist__term {
  width: 50vw;
  height: 2vw;
}

.form-dlist__desc {
  width: 38vw;
  height: 2vw;
}

.form-dlist__term {
  padding: 0;
  box-sizing: border-box;
}

.form-dlist__desc {
  padding: 0;
  box-sizing: border-box;
}

.form-dlist {
  width: 80%;
  max-height: 27vw;
  margin: 0 auto;
}

select {
  padding: 0.25vw;
}

input[type="text"],
textarea {
  width: 100%;
  padding: 0.25vw;
}

textarea {
  height: 13vw;
}

.submit {
  text-align: center;
  width: 50vw;
  margin-top: 11.4vw;
}

input[type="submit"] {
  
  
  padding: 0.3vw 3vw;
  font-size: 1vw;
  background-color: rgb(155, 193, 205);
  color: #ffffff;
  border: 0;
}

input[type="submit"]:hover {
  background-color: #f07d34;
  border-color: #ff6505;

  transition: all 0.1s linear;

  cursor: pointer;
}

select:focus,
input:focus,
textarea:focus {
  outline-color: #f07d34;
}








/* sakuraのスタイル */
  .sakura {
    position: relative;
    padding: 0;
    margin-left: 45vw;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

  }
  .sakura li {
    width: clamp(0.5vw,1.5vw,2.5vw);

    position: absolute;
    list-style: none;

    top: -55vw;
  

    animation: fall 4s linear infinite, rotate1 2s ease-in-out infinite alternate;

  }
  
  @keyframes fall {
    to {
      top: 120%;
    }
  }

  @keyframes rotate1 {
    from {
      transform: translateX(0px) rotate(0deg);
    }
    to {
      transform: translateX(200px) rotate(-80deg) rotateX(180deg);
    }
  }
  @keyframes rotate2 {
    from {
      transform: translateX(200px) rotate(-45deg);
    }
    to {
      transform: translateX(0px) rotate(0deg);
    }
  }
  .sakura li:nth-child(1) {
    left: 10vw;
    animation: fall 15s linear infinite, rotate1 3s ease-in-out infinite alternate;
  }
  .sakura li:nth-child(2) {
    left: 15vw;
    animation: fall 20s linear infinite, rotate1 2s ease-in-out infinite alternate;
  }
  .sakura li:nth-child(3) {
    left: 30vw;
    animation: fall 19s linear infinite, rotate1 3.5s ease-in-out infinite alternate;
  }
  .sakura li:nth-child(4) {
    left: 45vw;
    animation: fall 18s linear infinite, rotate2 4s ease-in-out infinite alternate;
  }
  .sakura li:nth-child(5) {
    left: 55vw;
    animation: fall 20s linear infinite, rotate1 4s ease-in-out infinite alternate;
  }
  .sakura li:nth-child(6) {
    left: 70vw;
    animation: fall 21s linear infinite, rotate2 3s ease-in-out infinite alternate;
  }
  .sakura li:nth-child(7) {
    left: 80vw;
    animation: fall 17s linear infinite, rotate2 3.5s ease-in-out infinite alternate;
  }
  .sakura li:nth-child(8) {
    left: 65vw;
    animation: fall 17s linear infinite, rotate1 3s ease-in-out infinite alternate;
  }