*{
  box-sizing: border-box;
}
html{
  overflow-x: hidden;
}
body{
  background: white;
  position: relative;
}
* p{
  line-height: 24px;
}
.selector::-webkit-scrollbar{
  display:none;
 }

/* ローディング画面 */
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #D8EBE9;

  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top:0;
  left:0;
  z-index: 10000;
}
.breeding-rhombus-spinner {
  height: 65px;
  width: 65px;
  position: relative;
  transform: rotate(45deg);
}

.breeding-rhombus-spinner, .breeding-rhombus-spinner * {
  box-sizing: border-box;
}

.breeding-rhombus-spinner .rhombus {
  height: calc(65px / 7.5);
  width: calc(65px / 7.5);
  animation-duration: 2000ms;
  top: calc(65px / 2.3077);
  left: calc(65px / 2.3077);
  background-color: white;
  position: absolute;
  animation-iteration-count: infinite;
}

.breeding-rhombus-spinner .rhombus:nth-child(2n+0) {
   margin-right: 0;
 }

.breeding-rhombus-spinner .rhombus.child-1 {
  animation-name: breeding-rhombus-spinner-animation-child-1;
  animation-delay: calc(100ms * 1);
}

.breeding-rhombus-spinner .rhombus.child-2 {
  animation-name: breeding-rhombus-spinner-animation-child-2;
  animation-delay: calc(100ms * 2);
}

.breeding-rhombus-spinner .rhombus.child-3 {
  animation-name: breeding-rhombus-spinner-animation-child-3;
  animation-delay: calc(100ms * 3);
}

.breeding-rhombus-spinner .rhombus.child-4 {
  animation-name: breeding-rhombus-spinner-animation-child-4;
  animation-delay: calc(100ms * 4);
}

.breeding-rhombus-spinner .rhombus.child-5 {
  animation-name: breeding-rhombus-spinner-animation-child-5;
  animation-delay: calc(100ms * 5);
}

.breeding-rhombus-spinner .rhombus.child-6 {
  animation-name: breeding-rhombus-spinner-animation-child-6;
  animation-delay: calc(100ms * 6);
}

.breeding-rhombus-spinner .rhombus.child-7 {
  animation-name: breeding-rhombus-spinner-animation-child-7;
  animation-delay: calc(100ms * 7);
}

.breeding-rhombus-spinner .rhombus.child-8 {
  animation-name: breeding-rhombus-spinner-animation-child-8;
  animation-delay: calc(100ms * 8);
}

.breeding-rhombus-spinner .rhombus.big {
  height: calc(65px / 3);
  width: calc(65px / 3);
  animation-duration: 2000ms;
  top: calc(65px / 3);
  left: calc(65px / 3);
  background-color: white;
  animation: breeding-rhombus-spinner-animation-child-big 2s infinite;
  animation-delay: 0.5s;
}


.loaded {
  opacity: 0;
  visibility: hidden;
}

/* header */
header{
  width: 100vw;
  height: 100vh;
}
.nav1{
  position: fixed;
  display: block;
  z-index: 20;
  top:100px;
  left:50px;
}
.nav1 li{
  margin: 20px 0;
}
.nav1 li a{
  color: gray;
  display: inline-block;
  transform: translateX(0px);
  transition: transform .6s, color .2s;
}
.nav1 li a:before {
  margin-left:-30px;
  width: 16px;
  height: 1px;
  background: #D8EBE9;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
}
.nav1 li a:hover {
  color:#D8EBE9;
  transform: translateX(20px);
}

header h4{
  color: black;
  font-size: 20px;
  letter-spacing: 10px;
  text-align: center;
  position: fixed;
  top:30%;
  left:50%;
  transform: translateX(-50%);
}
.nav2{
  position: fixed;
  display: flex;
  writing-mode: tb-rl;
  z-index: 20;
  bottom:50px;
  right:0;
}
.nav2 li{
  letter-spacing: 10px;
}
.nav2 li:first-child{
  margin-bottom:150px;
}
.nav2 li a{
  display: block;
  transform: rotate(180deg) translateY(0);
  transition: transform .6s, color .2s;
  color:grey;
  font-size:12px;
  padding:20px 20px;
}
.nav2 li a:hover {
  color:black;
  transform: rotate(180deg) translateY(20px);
}
.light-blue{
  position: fixed;
  width:100vw;
  height:35%;
  left:0;
  bottom:0;
  background-color: #D8EBE9;
  z-index: 0;
}
.center{
  position: fixed !important;
  width:100vw;
  height:200px;
  top:50vh;
  z-index: 0;
}


.down{
  position: fixed;
  bottom:10px;
  left:30px;
  font-size:60px;
  color: gray;
  z-index: 30;
  animation: key2 1s ease infinite;
  cursor: pointer;
}



/* main-section */
main{
  margin-top: -300px;
  width:100vw;
  height:auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color:grey;
  z-index:10;
}
section{
  margin-top: 300px;
  margin-left: 30%;
  width:50%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
}
section h2{
  margin-bottom:30px;
  color:#D8EBE9;
  font-size:20px;
  white-space: nowrap;
}
section h2 span{
  font-size: 40px;
}
section p{
  margin-left:50px;
}
section h1{
  margin-left:20px;
  font-size: 20px;
  margin-bottom: 20px;
  white-space: nowrap;
}
section table{
  margin-left:50px;
  line-height: 30px;
}
section td{
  padding-right:20px;
}

/* footer */
footer{
  opacity:0.5;
  background-color: white;
  position: relative;
  margin-top:300px;
  width:100vw;
  height:60px;
  display:flex;
  justify-content: flex-start;
  align-items: center;
  transition: all .6s;
  cursor: pointer;
}
footer i{
  opacity:1;
  margin-top:20px;
  margin-left: 30px;
  color:gray;
  z-index:10;
  font-size: 40px;
  transition: all .6s;
}
footer p{
  font-size: 12px;
  letter-spacing: 5px;
  padding-left: 15px;
  padding-top: 3px;
  color:gray;
  transition: all .6s;
}

footer:hover{
  background-color: gray;
}
footer:hover p{
  color:white;
}
footer:hover i{
  color: white;
}

.bounce{
  animation: key1 1.5s ease infinite;
}




/* modal */
.modal{
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
  z-index:100;
  color:gray;
}
.modal__bg{
  background: #D8EBE9;
  height: 100vh;
  width: 100%;
}
.modal__content{
  padding:40px;
  background: #fff;
  position: absolute;
  bottom:0;
  width: 100vw;
  height:40%;
}
.center2{
  position: fixed !important;
  width:100vw;
  height:200px;
  top:50vh;
  z-index:0;
}
.modal h4{
  color:white;
}
.close{
  padding:20px;
  font-size: 50px;
  font-weight: lighter;
  color: gray;
}
.contact{
  display: flex;
  flex-direction: column;
  align-items: center;

}
.contact p{
  margin:50px 0;
}
.email{
  color:gray;
}

.modal-me{
  padding: 0 100px;
  display:flex;
  justify-content: center;
}
.modal-main-left{
  width:50%;
  padding-right:50px;
}
.modal-main-right{
  width:50%;
}
.year{
  padding:10px 20px;
  color:#D8EBE9;
  font-weight: bold;
}
.modal-main-right p:first-child{
  color:#D8EBE9;
}
.modal-main-right p:nth-child(2){
  margin:10px 40px;
}
.modal-main-right p:nth-child(2)::before{
  content:"";
  height:1px;
  width:30px;
  background-color: gray;
  position: absolute;
  transform: translate(-40px,11px);
}


.slide-area{
  width:400px;
  overflow: hidden;
  position: absolute;
  top:30px;
  left:50%;
  transform: translateX(-50%);
}

.slick01 img{
  object-fit: cover;
  width:100%;
  border-radius: 5px;
}

.slick01 li{
  border:2px double gray;
  border-radius: 5px;
}

.slick02{
  margin-top: 10px;
}

.slick02 img{
  object-fit: cover;
  width:100%;
  border-radius: 5px;
}

.slick02 li{
  border:2px double gray;
  border-radius: 5px;
  background-color: white;
}
.slick02 img{
  opacity:0.3;
  transition: all 0.5s;
}
.slick02 img:hover{
  opacity: 1;
}


.next{
  position: absolute;
  color: gray;
  top:35%;
  right:20%;
  font-size: 30px;
  cursor: pointer;
}
.prev{
  position: absolute;
  color: gray;
  top:35%;
  left:20%;
  font-size: 30px;
  cursor: pointer;
}

.work{
  display: flex;
  justify-content: center;
}

.slick03{
  width:400px;
}
.slick03 li{
  height:300px;
}

.slick03 p{
  color: gray;
  margin-bottom: 20px;
}
.slick03 li a{
  color: gray;
  border-bottom:1px solid gray;
}




/* menu-icon */

.gmenu{
  width:70px;
  height:70px;
  position:fixed;
  top:0px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  left:0px;
  background-color: transparent;
  z-index:50;
  border: none;
  cursor: pointer;
  outline: none;
}
.gmenu span{
  display: block;
  height:1px;
  width:28px;
  background:black;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-14px;
}
.top{
  animation: menu-top 0.6s forwards;
}
.btm{
  animation: menu-btm 0.6s forwards;
}
.-open .top{
  animation: menu-top-open 0.6s forwards;
}
.-open .btm{
  animation: menu-btm-open 0.6s forwards;
}
.gnav {
  position: fixed;
  top: 0;
  left: -100px;
  height: 100%;
  z-index: 40;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF;
  width: 0%;
  transform: skewX(-10deg);
  transition: width ease-in-out 0.8s, transform ease-in-out 0.8s, left ease-in-out 0.8s;
}
.gnav.-open{
  left:0;
  width: 100%;
  transform: skewX(0deg);
}
.gnav-list {
  font-size: 16px;
}
.gnav.-open .gnav-list li {
  opacity: 1;
  transform: translateX(0px);
}
.gnav-list li {
  opacity: 0;
  transform: translateX(-20px);
  transition: all .3s;
}
.gnav-list li a {
  display: block;
  padding: 15px 15px 15px 30px;
  position: relative;
}
.gnav-list li a:before {
  width: 16px;
  height: 1px;
  background: #D8EBE9;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
}
.gnav-list li a span {
  color:gray;
  transform: translateX(0px);
  display: inline-block;
  transition: transform .6s, color .2s;
}
.gnav.-open .gnav-list li a:hover span{
  color:#D8EBE9;
  transform: translateX(20px);
}


/* .fadein */

.fadein{
  opacity: 0;
  transform : translate(-50px, 0);
  transition : all 1500ms;
}
.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
  transition : all 1500ms;
}

.fadein2{
  opacity: 0;
  transform : translate(0, -50px);
  transition : all 1500ms;
}
.fadein2.scrollin{
  opacity: 1;
  transform: translate(0, 0);
  transition : all 1500ms;
}

.fadeout{
  opacity:1;
  transition : all 1500ms;
}

.fadeout.scrollout{
  opacity:0;
  transition : all 1500ms;
}