@charset "utf-8";
/* ============================================================================
CSS information
 style info :  サイト全体の共通構造
/* ============================================================================



/* ============================================================================
目次
 00. 全体設計
 01. ヘッダー
 02. フッター
 03. 機能（アニメーション等）
 04. 共通パーツ（汎用ボタン、変数カラー）



/* ============================================================================

 00. 全体設計

=============================================================================== */

/*webフォント読み込み*/
@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);

html{ font-size: 62.5%;scroll-behavior: smooth;}
body{
  font-family: 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2;
  font-feature-settings:"palt"; /*自動カーニング*/
  letter-spacing: .05em; /*自動カーニングで詰まりすぎに感じたので*/
  color: #333;
  background: #eeeddb;
}

/*文字の上下余白（ハーフ・レディング）を削除*/
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before,
dt::before,
dd::before,
li::before,
 p::before,
h1::after,
h2::after,
h3::after,
h4::after,
h5::after,
h6::after,
dt::after,
dd::after,
li::after,
 p::after{
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin: calc(-1em / 2) auto;
}

h1, h2{ font-family: 'Josefin Sans', 'Noto Sans JP',serif;}
section h2{
  font-size: 150%;
  font-weight:500;
  text-align: center;
}

/*リンク*/
a{
  text-decoration: none;
  color:#000;
}
a:active, a:focus,input:active, input:focus{ outline:0;}



/* ============================================================================

 04. 共通パーツ

=============================================================================== */
.sp_view{
  display: none !important;
}
@media screen and (max-width: 980px) {
  .pc_view{
    display: none !important;
  }
  .sp_view{
    display: block !important;
  }
}



/* ============================================================================

アニメーション

=============================================================================== */
.fade-in {
  opacity : 0;
  transform : translate(0, 25px);
  transition : all 1500ms;
}
.fade-in.scrollin {
  opacity : 1;
  transform : translate(0, 0);
}

.fade-in2 {
opacity : 0;
transform : translate(0, 40px);
transition : all 900ms;
}
.fade-in2.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.img01 {transition-delay:0s;}
.img02 {transition-delay:.5s;}
.img03 {transition-delay:1s;}

.point01 {transition-delay:0s;}
.point02 {transition-delay:.3s;}
.point03 {transition-delay:.6s;}
.point04 {transition-delay:.9s;}
.point05 {transition-delay:1.2s;}

 

.is-animated {
  animation: poyoyon2 1s ease-in-out 1 forwards;
}
 
@keyframes poyoyon2 {
  0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}

/* ============================================================================

ハンバーガーメニュー

=============================================================================== */
/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn{
  /*ボタン内側の基点となるためrelativeを指定。
  追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
    position: fixed;
    cursor: pointer;
      width: 50px;
      height:50px;
    border-radius: 5px;
    overflow: hidden;/*ジャンプしてはみ出た要素を消す*/
    top: 15px;
    right: 5%;
    z-index: 9999;
    background: rgba(238, 237, 219, .8);
  }
    
  /*ボタン内側*/
  
  .openbtn .openbtn-area{
      transition: all .4s;/*アニメーションの設定*/
  }
  
  .openbtn span{
      display: inline-block;
      transition: all .4s;/*アニメーションの設定*/
      position: absolute;
      left: 11px;
      height: 1.5px;
      border-radius: 2px;
    background: #000;
      width: 55%;
    }
  
  
  .openbtn span:nth-of-type(1) {
    top:15px;	
  }
  
  .openbtn span:nth-of-type(2) {
    top:23px;
  }
  
  .openbtn span:nth-of-type(3) {
    top:31px;
  }
  
  
  /*activeクラスが付与されると .openbtn-areaが360度回転し、
  その中の線のtopの位置や形状が変化して×に*/
  
  .openbtn.active .openbtn-area{
    transform: rotateX(360deg);
  }
  
  .openbtn.active span:nth-of-type(1) {
      top: 18px;
      left: 18px;
      transform: translateY(6px) rotate(-135deg);
      width: 40%;
  }
  
  .openbtn.active span:nth-of-type(2) {
    opacity: 0;
  }
  
  .openbtn.active span:nth-of-type(3){
      top: 30px;
      left: 18px;
      transform: translateY(-6px) rotate(135deg);
      width: 40%;
  }

  /* ============================================================================

ナビゲーション

=============================================================================== */
#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
	top:0;
    right:-120%;
	width:50%;
    height: 100vh;/*ナビの高さ*/
	background:#eeeddb;
    /*動き*/
	transition: all 0.3s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
    text-align: center; 
}

#g-nav li a{
	color: #000;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
  font-size: 1.4rem;
}

#g-nav div{
	width: 80%;
  margin: 100px auto 50px;

}

#fixed-header {
  position: fixed;
  top: -70px;  
  height: 70px;
  transition: .5s; /* アニメーションタイミング */
}
#fixed-header.is-show {
  top: 0;
}

/*========= 3秒後にハンバーガーメニューを表示 ===============*/
#sp-header {
  opacity: 0;
  animation: late-open 0.5s ease-in 2.5s forwards;
}

@keyframes late-open {
to {
  opacity: 1;
}
}

/*========= 3秒後にハンバーガーメニューを表示 ===============*/
@keyframes size-down {
  to {
    transform-origin:0 0;
    transform: scale(.8);
  }
  }



/*========= スクロール途中でヘッダーが表示＆非表示するためのCSS ===============*/

/*　上に上がる動き　

#sp-header.UpMove{
	animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(-100px);
   
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}*/

/*　下に下がる動き　

#sp-header.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  opacity: 0;
	transform: translateY(-100px);
  }
}*/