@charset "utf-8";
/*
再利用可能な全てのオブジェクトを記述します。
All objects that are reusable will be written.

接頭辞はComponentの頭文字を取って【c_】とします。
Prefix will take the "Component" first letter and use it as "c_".

ここで指定するのは以下の様なものと予想されます。
You might use the following.
.c_btn/.c_breadclumb/.c_hero/.c_serch/.c_dropdown/
.c_card/.c_feature/.c_overlay/.c_form/.c_thumbnail/.c_box

モディファイヤを使用する場合は接頭辞【is_】をつけ、各コンポーネントの下に記述します。
When using modifier put the prefix "is_" and write it under each component.

フォントサイズはremで指定します。
"rem" will be used for font-size.

//sample
.c_btn {
	display: inline-block;
	padding: 15px 20px;
	border-radius: 5px;
	text-decoration: none;
}
.c_btn:hover { opacity: 0.8; }
.c_btn.is_btn_disable { cursor: inherit; }
.c_btn.is_btn_blue{
	color: rgb(255, 255, 255);
	background: rgb(1, 153, 224) none repeat scroll 0% 0%;
}

↓↓↓↓↓↓コメントアウト表記サンプル Comment out sample ↓↓↓↓↓↓
*/
/*----------------------------------------------
	大くくりコメントアウト large part
---------------------------------------------*/

/*  中くくりコメントアウト middle part
------------------------------------- */

/* 小くくりコメントアウト small part */
/*
↑↑↑↑↑↑コメントアウト表記サンプル Comment out sample ↑↑↑↑↑↑

*/

/*----------------------------------------------
	common
---------------------------------------------*/

/*----------------------------------------------
	c_nav
---------------------------------------------*/
.c_nav_01 div:not(:last-of-type) {
  border-bottom: 1px solid #5cb2ad;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.c_nav_02 {
  display: flex;
  margin-top: 30px;
}
.c_nav_02 div {
  margin-right: 10px;
}
.c_nav_02 div img {
  width: 15px;
}
.c_nav_01 div img,
.c_nav_02 div img {
  transition: .2s;
}
.c_nav_01 div img:hover,
.c_nav_02 div img:hover {
  opacity: .7;
}

/*----------------------------------------------
	c_circle
---------------------------------------------*/
.c_circle {
  width: 100px;
  height: 100px;
  background-image: linear-gradient(to bottom, #d5fcf9,#fff);
  border-radius: 50%;
  position: sticky;
  top: 200px;
  left: calc(50% - 50px);
}
@media screen and (max-width: 640px) {
  .c_circle {
    top: 396px;
  }
  .c_circle.inview {
    animation-name:circle01;
    animation-duration:1s;
    animation-fill-mode:forwards;
  }
}
@keyframes circle01{
   0%{scale: 0;}
 100%{scale: 10.1;}
 }
.c_circle02 {
	position: absolute;
	top: 50%;
  left: 50%;
  width: 100px;
  height: 90px;
  background-color: #5cb2ad;
  border-radius: 50%;
	z-index: 1;
  transform: translate(-50%, -50%) scale(0);
}
.c_circle02--grada {
	top: 56%;
  left: 50%;
  width: 110px;
  height: 110px;
	transform-origin: center center;
	background-image: linear-gradient(to bottom, #d6fcf9 70% ,#fff 100%);
}
.c_circle02.inview {
  animation-name: circle02;
  animation-duration: 1s;
  animation-fill-mode: forwards;
	transform-origin: center center;
}
@keyframes circle02 {
   /*0%{ scale: 0; }
 100%{ scale: 7; }*/
	0% {
    transform: translate(-50%, -50%) scale(0);
  }
  100% {
    transform: translate(-50%, -50%) scale(7);
  }
}