/* -------------------------- */
/* base
/* -------------------------- */

html{
  font-size: 62.5%;
}



body{
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #FDFDFD;
  font-size: 1.6rem;
}

    
    
img{
  width: 100%;
}
a{
  font-family: 'brandon-grotesque', sans-serif;
  text-decoration: none;
  color: #225967;
  letter-spacing: 5%;
  line-height: 23px;
}
ul{
  list-style: none;
}
input{
  border: 0;
  outline: none;
  appearance: none;
  -webkit-appearance:none;
}
textarea{
  border: 0;
  outline: none;
  resize: none;
}

/* -------------------------- */
/* //base
/* -------------------------- */





.tatetext{
  font-family: 'brandon-grotesque', sans-serif;
  margin: 25% auto 7%;
  color: #303030;
  writing-mode: vertical-rl;
  letter-spacing: 0.5em;
  line-height: 200%;
  text-align: center;
  font-size: 2.0rem;
}


.header{
  max-width: 30%;
  margin: 20% auto 30% auto; 
}

.top-img{
    position: relative;
   　top: 100%;
   　left: 100%;
   　transform: translate(-50%,-50%);
    z-index: -1;
}




/* -------------------------- */
/* TOP
/* -------------------------- */


.about-wrapper{
  max-width: 100%;
  margin: -30% auto 0%; 
}

.about-img{
    width: 100%;
    position: relative;
   　top: -25%;
   　left: -25%;
   　transform: translate(-50%,-50%);
    z-index: -1;
}

.about-text{
    margin-top: -200%;
    font-weight: bold;
}


.last-img{
    width: 80%;
    margin: 30% auto 0% auto;
}

@keyframes underlineDelay {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

/* -------------------------- */
/* //TOP
/* -------------------------- */


/* -------------------------- */
/* 写真セクション
/* -------------------------- */

.works-wrapper{
  max-width: 80%;
  margin: 0 auto 20%;
  text-align: center;
}


.mikan{
    margin: 30% auto 30% 50%;
}

.mikan img{
    width: 80%;
}

.mochi1{
    margin: 30% auto 30% auto;
}
.mochi1 img{
    width: 100%;
}

.mochi2{
    margin: 30% auto 30% auto;
}
.mochi2 img{
    width: 100%;
}


.pic1{
    width: 80%;
    margin: auto;
}

.pic2{
    width: 80%;
    margin: auto;
}

.pic3{
    width: 80%;
    margin: auto;
}
/* -------------------------- */
/* //写真セクション
/* -------------------------- */

/* -------------------------- */
/* 今年も〜セクション
/* -------------------------- */

.access-wrapper{
  max-width: 80%;
  margin: 0 auto 20%;
  text-align: center;
}

.ume{
    width: 30%;
    margin: auto;
    margin-top: 100%;
    margin-bottom: 30%;
}

.goldflower{
    width: 100%;
    position: relative;
   　top: -25%;
   　left: 25%;
   　transform: translate(-50%,-50%);
    z-index: -1;
}

.maeda-text{
    height: 150%;
    position: absolute;
	z-index: 999;
	top: 15%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin-botto: 30%;
}

.last-image{
    max-width: 50%;
    margin: auto auto 0% auto;
}


/* -------------------------- */
/* //今年も〜セクション
/* -------------------------- */


/* -------------------------- */
/* CSS animation
/* -------------------------- */

/* フェードイン */

.fadeUp{
	animation-name: fadeUpAnime;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeUpAnime{
	from{
		opacity: 0;	
        transform: translateY(100px);
	}
	
	to {
		opacity: 1;
        transform: translateY(0px);
	}
}

/* //フェードアウト */

/* 太陽光 */



@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

/* //太陽光 */

/* ふわふわ */

.fluffy {

  /* アニメーション名 アニメーションにかかる時間 アニメーションの繰り返し回数 */
  /* fluffy 3秒 無限ループ */
  animation: fluffy 5s infinite;
}

@keyframes fluffy{
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* //ふわふわ */

/* -------------------------- */
/* //CSS animation
/* -------------------------- */

@media screen and (min-width:500px){
  .responsive {
    display: inline-block;
  }
}