@charset "utf-8";

:root {
  --pcScreen: 1040px; /* 951-MAX1040(1024)*/
  --tabletScreen: 950px; /* 601-MAX950 */
  --mobileScreen: 600px; /* 0-MAX600  */
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #000;
  background-color: #5aaee2;
}

* {
	margin:0;
	padding:0;
  box-sizing: border-box;
}

img{
  vertical-align: middle;
  border-style: none;
}

a{
  text-decoration: none;
  color: black;
}
.inner{
  width:1180px;
  margin: auto;
}


/**** HEADER ******************/

header{
  background: #9bd7f5;
  background-image: linear-gradient(90deg, #ddf0f7 50%, #9bd7f5 50%);
  background-size: 20px 10px;
}

.headerTitleBlock{
  padding: 10px 20px 10px;
}

@media screen and (max-width: 1200px){
  .headerTitleBlock{
    /* padding-left: 20px; */
    width: 100%;
  }
}

.headerTitleArea{
  display: flex;
}

.headerSiteName{
  font-size: 1.8em;
  margin-left: 10px;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 600px){
  .headerSiteName{
    font-size: 1.4em;
  }
}

.headerDescription{
  margin-left:65px;
  font-size: 0.8em;
  line-height: 0.8;
}

@media screen and (max-width: 600px){
  .headerDescription{
    font-size: 0.7em;
  }
}


/**** MAIN ******************/

main{
  background-color: #fff;
}

.mainImageBlock{
  padding: 60px 0 30px;
  text-align: center;
  background-color: #fff;
}

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

.mainImageAreaMbile .mainSiteTitle{
  display: flex;
  justify-content: center;
  align-items: center;
}

.mainSiteName{
  margin: 100px 0 0 0;
  font-size: 3.8em;
}

.mainImageAreaMbile .mainSiteName{
  margin: 0;
}

.mainImageAreaMbile .mainSiteName p{
  line-height: 1.6em;
}

@media screen and (max-width: 600px){
  .mainImageAreaMbile .mainSiteName p{
    font-size: calc(60/600 * 100vw);
  }
}

.mainDescription{
  display:flex;
  justify-content: center;
  align-items: center;
  font-size: 1.3em;
}

.mainImageAreaMbile .mainDescription{
  /* font-size: 1.2em; */
  margin-top: 10px;
}

@media screen and (max-width: 600px){
  .mainImageAreaMbile{
    margin: 0 auto;
    width: 90%;
  }

  .mainImageAreaMbile .mainDescription{
    font-size: calc(19/600 * 100vw);
  }
}

.mainDescText{
  margin: 0 10px;
}

.mainNote{
  display:flex;
  justify-content: center;
  align-items: center;
  /* margin-top: 4px; */
}

.mainNoteText{
  margin: 0 10px;
  /* font-size: 0.8em; */
  color: #ff7300;
}

@media screen and (max-width: 600px){
  .mainNote{
    margin: 0 auto;
    width: 90%;
  }

  .mainImageAreaMbile .mainNote{
    font-size: calc(19/600 * 100vw);
  }
}

.mainSakana{
  margin: 50px 0;
}

.mainImageAreaMbile .mainSakana{
  margin: 0px 0;
}

.mainHasigo{
  margin-left: 50px;
  width: 176px;
  height: 408px;
  border-radius: 10px;
  background-image: url(../image/hasigo.png);
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  /* display: block;
  position: relative; */
}

/* .mainHasigo.change{
  background-image: url(../image/hasigoChu.gif);
} */


.mainHasigo.change {
  /* ラグ回避のために最初に画像を読み込む */
  background-image: url(../image/hasigoChu1.png),url(../image/hasigoChu2.png),url(../image/hasigoChu3.png),url(../image/hasigoChu4.png); 
  animation: image_anime 2s ease; 
  animation-fill-mode: forwards; 
  animation-delay: 0.3s; 
}

@keyframes image_anime {
  0% {
    background-image: url(../image/hasigoChu2.png); 
  }
  20% {
    background-image: url(../image/hasigoChu2.png); 
  }
  21% {
    background-image: url(../image/hasigoChu1.png); 
  }
  40% {
    background-image: url(../image/hasigoChu1.png); 
  }
  51% {
    background-image: url(../image/hasigoChu3.png); 
  }
  79% {
    background-image: url(../image/hasigoChu3.png); 
  }
  80% {
    background-image: url(../image/hasigoChu4.png); 
  }
  100% {
    background-image: url(../image/hasigoChu4.png); 
  }
}

@media screen and (max-width: 600px){
  .mainHasigo{
    margin-left: calc(50/600 * 100vw);
    width: calc(176/600 * 100vw);
    height: calc(408/600 * 100vw);
  }
}

/* .mainHasigoImg{
  width:176px;
  height:408px;
} */

/* @media screen and (max-width: 600px){
  .mainHasigoImg{
    width: calc(176/600 * 100vw);
    height: calc(408/600 * 100vw);
  }
} */

.flowerY{
  animation:3s linear infinite rotation1;
}

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


@media screen and (max-width: 600px){
  .mainImageAreaMbile .flowerY{
    width: calc(32/600 * 100vw);
    height: calc(33/600 * 100vw);
  }
}

@media screen and (min-width: 950.0001px){
  .mainImageAreaMbile{
    display: none;
  }
}

@media screen and (max-width: 950px){
  .mainImageArea{
    display: none;
  }
}


.mainBtnBlock{
  padding: 60px 0;
  background-color: #eee;
}

.mainBtnArea{
  margin: 0 auto;
  display:flex;
  justify-content: center;
  /* align-items: center; */
}

@media screen and (max-width: 950px){
  .mainBtnArea{
    flex-direction: column;
    width: 90%;
    /* margin: 0 auto; */
  }
}

.mainBtnUnitL{
  display:flex;
  justify-content: right;
  /* align-items: center; */
  width: 100%;
}

.mainBtnUnitR{
  display:flex;
  justify-content: left;
  /* align-items: center; */
  width: 100%;
}

@media screen and (max-width: 600px){
  .mainBtnUnitL{
    flex-direction: column;
    margin: 0 auto;
  }
}

@media screen and (max-width: 600px){
  .mainBtnUnitR{
    flex-direction: column;
    margin: 0 auto;
  }
}

.mainBtn{
  width: 240px;
  margin: 10px;
  padding: 20px 0px 20px 50px;
  background-color: white;
  background-repeat: no-repeat;
  background-position:10% 50%;
  border-radius: 10px;
  box-shadow: 4px 4px rgb(196, 196, 196);
  display:flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: 1.12em;
}

@media screen and (max-width: 1040px){
  .mainBtn{
    width: 100%;
  }
}

@media screen and (max-width: 600px){
  .mainBtn{
    margin: 10px 0;
  }
}

.mainBtn:hover{
  top: 2px;
  left: 2px;
  box-shadow: -2px -2px rgb(196, 196, 196);
}

.mainBtnPurple{
  background-image: url(../image/flowerP.png);
}

.mainBtnPurple:hover{
  background-image: url(../image/flowerP-anime.gif);
}

.mainBtnRed{
  background-image: url(../image/flowerR.png);
}

.mainBtnRed:hover{
  background-image: url(../image/flowerR-anime.gif);
}

.mainBtnLine{
  background-image: url(../image/line.png);
}

.mainBtnLine:hover{
  background-image: url(../image/line-anime.gif);
}

.mainBtnYoutube{
  background-image: url(../image/youtube.png);
}

.mainBtnYoutube:hover{
  background-image: url(../image/youtube-anime.gif);
}

.mainBtn img{
  margin-right: 10px;
}


.mainBtn img{
  display:flex;
  justify-content: center;
  align-items: center;

}

/**** FOOTER ******************/

footer{
  background: #5aaee2;
  text-align: center;
  color: #fff;
  padding: 30px 0;
}