/* -------------------------- */
/* 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;
	
  max-width: 100%;
}

    
    
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
/* -------------------------- */

/* -------------------------- */
/* media 600px
/* -------------------------- */

@media (max-width: 600px){
	
.header{
  width: 480px;
  margin: auto; 
}

.keyvisual{
	height: 100vh;
	position:fixed;
	z-index: -5;
}

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


.copy{
    position: fixed;
	/*z-indexの値の小さくして背景に回す*/
	z-index: 999;
	top: 10%;
    left: 10%;
    color: #fff;
}

/* .movie video{
  width: 100px;
  height: 200vh;
  object-fit: cover; 
} */


.plane{
	position: fixed;
	/*z-indexの値の小さくして背景に回す*/
	z-index: 999;
	top: 30%;
    left: 46%;
    transform: translate(-25%,-25%);
	max-width: 10%;
}


.submain{
  font-family: 'brandon-grotesque', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.5em;
  line-height: 100%;
  text-align: left;
}

.main{
  font-family: 'brandon-grotesque', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.5em;
  line-height: 200%;
  text-align: left;
}

.toudai{
	max-width: 10%;
	display: none;
}



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


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

.about-text{
	width: 80%;
	margin: auto;
}

.large{
	font-size: 3.0em;
}

.ship-img{
	max-width: 30%;
	margin: 0 5% 0 auto;
}

.text-1{
	margin-top: 10%;
	font-family: "source-han-serif-jp-subset", sans-serif;
    font-style: normal;
	color: #ffffff;
	font-size: 1.1rem;
	letter-spacing: 0.5em;
	line-height: 200%;
	font-weight: 500;
	text-align: left;
}

.text-2{
  margin-top: 10%;
  font-family: 'brandon-grotesque', sans-serif;
  color: #ffffff;
  font-size: 1.1rem;
  letter-spacing: 0.5em;
  line-height: 200%;
  text-align: left;
  margin-bottom: 30%;
}

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

.plane_img_sec{
	position:relative;
	z-index: 9999;
}

.pic_1{
	position:absolute;
	top: 55%;
    left: 51%;
    transform: translate(-50%,-50%);
	z-index: 9999;
	width: 80%;
}

.pic_1_text1{
	margin-top: 0%;
	font-family: "source-han-serif-jp-subset", sans-serif;
    font-style: normal;
	color: #378FAA;
	font-size: 1.1rem;
	letter-spacing: 0.5em;
	line-height: 200%;
	font-weight: 500;
	text-align: left;
}

.pic_1_text2{
  margin-top: 20%;
  font-family: 'brandon-grotesque', sans-serif;
  color: #3A9BC1;
  font-size: 1.1rem;
  letter-spacing: 0.5em;
  line-height: 200%;
  text-align: left;
  margin-bottom: 30%;
}


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


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

.works-wrapper{
  max-width: 100%;
  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: 100%;
    margin: auto;
}

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

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

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

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

.kamome3{
    width: 25%;
	margin: 30% 0 -10% 0%;
}

.kamome2{
    width: 30%;
    margin: 0 0 -10% 60%;
}

.kamome1{
    width: 30%;
    margin: auto;
	margin-bottom: 30%;
}

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

.lastimage{
	position: relative;
	z-index: 9999999;
    max-width: 100%;
    margin: -20% auto 20% auto;
}

.kirakira1{
	
	display: none;
	
	position: absolute;
	top: 60%;
    left: -15%;
	z-index: 99999999;
	max-width: 40%;
}

.kirakira2{
	
	display: none;
	
	position: absolute;
	top: -18%;
    right: -15%;
	z-index: 99999999;
	max-width: 30%;
}

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

/* -------------------------- */
/* LAST
/* -------------------------- */

.circle1{
  animation:20s linear infinite rotation;
  margin: -10% auto 0 auto;
  width: 60%;
}
.circle1 img{
    margin: auto;
}

.copyright{
	font-family: 'brandon-grotesque', sans-serif;
    z-index: 10;
	font-size: 1.2rem;
	letter-spacing: 0.3em;
	color: #ffffff;
	text-align: center;
}

.copyright a{
	color:#fff;
	font-size: 1.3em;
}

.lastillust{
	max-width: 40%;
	margin-top: -30%;
	margin-left: 0;
	margin-bottom: 10%;
}

/* -------------------------- */
/* Scroll
/* -------------------------- */

* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

*::-webkit-scrollbar {
  display: none !important;
}

body {
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
/* -------------------------- */
/* //Scroll
/* -------------------------- */
	
		.text-pc{
		display: none;
	}

    .QRcode{
	    display: none;
    }
	
/* -------------------------- */
/* //LAST
/* -------------------------- */
		
}

/* -------------------------- */
/* //media 600px
/* -------------------------- */

.header{
  width: 480px;
  margin: auto; 
}

.keyvisual{
	height: 100vh;
	position:fixed;
	z-index: -5;
}

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


.copy{
    position: fixed;
	/*z-indexの値の小さくして背景に回す*/
	z-index: 999;
	top: 10%;
    left: 10%;
    color: #fff;
}

/* .movie video{
  width: 100px;
  height: 200vh;
  object-fit: cover; 
} */


.plane{
	position: fixed;
	/*z-indexの値の小さくして背景に回す*/
	z-index: 999;
	top: 30%;
    left: 46%;
    transform: translate(-25%,-25%);
	max-width: 10%;
}


.submain{
  font-family: 'brandon-grotesque', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.5em;
  line-height: 100%;
  text-align: left;
}

.main{
  font-family: 'brandon-grotesque', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.5em;
  line-height: 200%;
  text-align: left;
}

.toudai{
	max-width: 10%;
	display: none;
}



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


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

.about-text{
	width: 80%;
	margin: auto;
}

.large{
	font-size: 3.0em;
}

.ship-img{
	max-width: 30%;
	margin: 0 5% 0 auto;
}

.text-1{
	margin-top: 10%;
	font-family: "source-han-serif-jp-subset", sans-serif;
    font-style: normal;
	color: #ffffff;
	font-size: 1.1rem;
	letter-spacing: 0.5em;
	line-height: 200%;
	font-weight: 500;
	text-align: left;
}

.text-2{
  margin-top: 10%;
  font-family: 'brandon-grotesque', sans-serif;
  color: #ffffff;
  font-size: 1.1rem;
  letter-spacing: 0.5em;
  line-height: 200%;
  text-align: left;
  margin-bottom: 30%;
}

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

.plane_img_sec{
	position:relative;
	z-index: 9999;
}

.pic_1{
	position:absolute;
	top: 55%;
    left: 51%;
    transform: translate(-50%,-50%);
	z-index: 9999;
	width: 80%;
}

.pic_1_text1{
	margin-top: 0%;
	font-family: "source-han-serif-jp-subset", sans-serif;
    font-style: normal;
	color: #378FAA;
	font-size: 1.1rem;
	letter-spacing: 0.5em;
	line-height: 200%;
	font-weight: 500;
	text-align: left;
}

.pic_1_text2{
  margin-top: 20%;
  font-family: 'brandon-grotesque', sans-serif;
  color: #3A9BC1;
  font-size: 1.1rem;
  letter-spacing: 0.5em;
  line-height: 200%;
  text-align: left;
  margin-bottom: 30%;
}

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

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


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

.works-wrapper{
  max-width: 100%;
  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: 100%;
    margin: auto;
}

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

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

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

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

.kamome3{
    width: 25%;
	margin: 30% 0 -10% 0%;
}

.kamome2{
    width: 30%;
    margin: 0 0 -10% 60%;
}

.kamome1{
    width: 30%;
    margin: auto;
	margin-bottom: 30%;
}

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

.lastimage{
	position: relative;
	z-index: 9999999;
    max-width: 100%;
    margin: -20% auto 20% auto;
}

.kirakira1{
	
	display: none;
	
	position: absolute;
	top: 60%;
    left: -15%;
	z-index: 99999999;
	max-width: 40%;
}

.kirakira2{
	
	display: none;
	
	position: absolute;
	top: -18%;
    right: -15%;
	z-index: 99999999;
	max-width: 30%;
}

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

/* -------------------------- */
/* LAST
/* -------------------------- */

.circle1{
  animation:20s linear infinite rotation;
  margin: -10% auto 0 auto;
  width: 60%;
}
.circle1 img{
    margin: auto;
}

.copyright{
	font-family: 'brandon-grotesque', sans-serif;
    z-index: 10;
	font-size: 1.2rem;
	letter-spacing: 0.3em;
	color: #ffffff;
	text-align: center;
}

.copyright a{
	color:#fff;
	font-size: 1.3em;
}

.lastillust{
	max-width: 40%;
	margin-top: -30%;
	margin-left: 0;
	margin-bottom: 10%;
}

/* -------------------------- */
/* Scroll
/* -------------------------- */

* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

*::-webkit-scrollbar {
  display: none !important;
}

body {
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
/* -------------------------- */
/* //Scroll
/* -------------------------- */
/* -------------------------- */
/* //LAST
/* -------------------------- */
	

/* -------------------------- */
/* 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
/* -------------------------- */

.pc{
		padding: 5% 0 0 5%;
	}
	
	.text-pc{
		display:contents;
		font-family: 'brandon-grotesque', sans-serif;
        font-size: 1.2rem;
        letter-spacing: 0.2em;
        line-height: 100%;
		color: #fff;
	 }
	
	.QRcode{
		max-width: 5%;
	}


@media screen and (max-width:599px){
	
	.text-pc{
		display: none;
	}

    .QRcode{
	    display: none;
    }

}

@media screen and (min-width:600px) and ( max-width:3000px) {
	
	.pc{
		padding: 5% 0 0 5%;
	}
	
	.text-pc{
		display:contents;
		font-family: 'brandon-grotesque', sans-serif;
        font-size: 1.2rem;
        letter-spacing: 0.2em;
        line-height: 100%;
		color: #fff;
	 }
	
	.QRcode{
		max-width: 5%;
	}
	
	header{
			display: none;
	}
	
	section{
		display: none;
	}
	
}