body {
  margin: 0;
  background: #e47265;
  font-family: "みんなの文字ゴStd R", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 2.2em;
}
*{box-sizing: border-box;}
p{width: 100%; margin: 0;}
ul{
  padding: 0;
  list-style: none;
}
.text.is-active {
	animation: text08 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
  animation-delay: 1.8s;
  opacity: 0;
  animation-fill-mode: forwards;
}
@keyframes text08 {
	0% {
		opacity: 0;
		transform: translateX(20vw) scaleX(1) scaleY(1) skew(-60deg);
	}
	10% {
		opacity: 1;
	}
	80% {
    opacity: 1;
		transform: scaleX(0.3) scaleY(1.2);
	}
	100% {
    opacity: 1;
		transform: scaleX(1) scaleY(1);
	}
}
.fv_wrapper{
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero{
  margin-top:-100px;
}
header{
  width:100%;
  position: absolute;
  bottom: 20px;
}
#gnav ul{
  animation-delay: 2.8s;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  height: 90px;
  border-radius: 100px;
  background: rgba(255,255,255,.1);
  display: flex;
  justify-content: center;
  align-items: center;
}
#gnav ul li{
  font-size: 16px;
  font-weight: 700;
  padding: 0 2.5em;
  letter-spacing: 1px;
}
#gnav ul li a{
  text-decoration: none;
  color: #f4e96a;
}
main{width: 100%;}
section{
  width:100%;
  margin: 0 auto;
  padding: 100px 0 0;
}
section a{
  color: #89c5ac;
  text-decoration: none;
}
.inner_wrap{
  width:100%;
  max-width: 680px;
  margin: 0 auto;
  border-radius: 60px;
  background: #f4e96a;
  padding: 86px 60px;
}
h1{
  width: 100%;
  text-align: center;
  font-size: 13px;
  margin-bottom: 0;
  padding-bottom: 0;
  color: #f4e96a;
}
h2{
  font-size: 42px;
  line-height: 2em;
  margin-top: 0;
}
h2 span{
  font-size: 16px;
  padding-left: .5em;
}
#service,#contact{color:#e47265;}
#about{}
#about .inner_wrap{
  color:#ffffff;
  background: #89c5ac;
  background-image: url("../image/sec2_logo.webp");
  background-position: bottom center;
  background-repeat: no-repeat;
}
.msg_txt{
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 86px 60px;
  color: #ffffff;
}
footer small{ 
width: 100%;
display: block;
text-align: center;
color: #fff;
font-size: 10px;
}
footer small a{
text-decoration: none;
color: #fff;
}
.ball {
    /* ボールのレイアウト */
    background-color: #e47265;
    width: 180px;
    animation-name: bounce;
    animation-duration: 0.75s;
    animation-iteration-count: 2;
    animation-timing-function: linear;
    transform-origin: center bottom;
}
@keyframes bounce {
    0%   { transform: scale(1.0, 1.0) translate(0%, 0%); } /* 初期状態 */
    30%  { transform: scale(1.5, 0.5) translate(0%, 0%); } /* 地面に着地し、その変動で潰れだす */
    40%  { transform: scale(1.0, 1.0) translate(0%, 0%); } /* 潰れた反動で一瞬元に戻る */
    50%  { transform: scale(0.8, 1.3) translate(0%, -70%); } /* 潰れた反動で縦に伸び、その勢いでバウンド開始 */
    60%  { transform: scale(1.0, 1.0) translate(0%, -120%); } /* 潰れた反動が終り、空中で元に戻る */
    100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /* 初期状態に戻る */
}
@media (max-width: 768px) {
body {
  font-size: 16px;
}
  .hero img{
    width: 140px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
#gnav ul{
  width: 88%;
  height: 48px;
}
#gnav ul li{
  font-size: 12px;
  padding: 0 1.8em;
}
section{
  padding: 60px 16px 0;
}
.inner_wrap{
  border-radius: 32px;
  padding: 86px 20px;
}
h2{font-size: 26px;}
h2 span{font-size: 14px;}
#service,#contact{color:#e47265;}
#about .inner_wrap{
  background-size: 400px;
}
  .sec_logo img{
    width: 100px;
    height: auto;
  }
.msg_txt{
  padding: 48px 36px;
  font-size: 13px;
}
}
.mrb1{margin-bottom: 1em!important;}
.mrb2{margin-bottom: 2em!important;}