@charset "utf-8";
/* CSS Document */

/*マージン関係*/

.o-m-08 {margin-bottom:8px!important;}
.o-m-12 {margin-bottom:12px!important;}
.o-m-16 {margin-bottom:16px!important;}
.o-m-20 {margin-bottom:20px!important;}
.o-m-24 {margin-bottom:24px!important;}
.o-m-28 {margin-bottom:28px!important;}
.o-m-32 {margin-bottom:32px!important;}
.o-m-36 {margin-bottom:36px!important;}
.o-m-40 {margin-bottom:40px!important;}
.o-m-44 {margin-bottom:44px!important;}
.o-m-48 {margin-bottom:48px!important;}
.o-m-52 {margin-bottom:52px!important;}
.o-m-56 {margin-bottom:56px!important;}
.o-m-60 {margin-bottom:60px!important;}
.o-m-64 {margin-bottom:64px!important;}
.o-m-68 {margin-bottom:68px!important;}
.o-m-72 {margin-bottom:72px!important;}
.o-m-76 {margin-bottom:76px!important;}
.o-m-80 {margin-bottom:80px!important;}
.o-m-120 {margin-bottom:120px!important;}
.o-m-160 {margin-bottom:160px!important;}

/*文字装飾関係*/

.o-t-n {
	text-align: left;
	line-height: 1.7;
}

strong {
	font-weight: bold;
}

/*文字色関係*/

.o-tc-wh {color:#fff;}
.o-tc-bl {color:#000;}
.o-tc-re {color:red;}
.o-tc-bl {color:blue;}
.o-tc-ye {color:yellow;}
.o-tc-gr {color:green;}

/*文字リンク*/

a {color:deepskyblue; text-decoration: none;}
a:hover {text-decoration: underline;}

/*文字サイズ*/

.o-ts-12 {font-size:1.2rem;}
.o-ts-13 {font-size:1.3rem;}
.o-ts-14 {font-size:1.4rem;}
.o-ts-15 {font-size:1.5rem;}
.o-ts-16 {font-size:1.5rem;}
.o-ts-17 {font-size:1.7rem;}
.o-ts-18 {font-size:1.8rem;}
.o-ts-19 {font-size:1.9rem;}
.o-ts-20 {font-size:2.0rem;}

.o-ts-22 {font-size:2.2rem;}
.o-ts-24 {font-size:2.4rem;}
.o-ts-28 {font-size:2.8rem;}
.o-ts-32 {font-size:3.2rem;}
.o-ts-48 {font-size:4.8rem;}
.o-ts-60 {font-size:6.0rem;}

.o-t-small {font-size: 80%;}

/*Noto Serif*/

.o-noto-serif {
	font-family: 'Noto Serif JP', serif;
	transform: rotate(0.03deg);
	font-weight: 400;
}

/*Noto Sans*/

.o-noto-sans {
	font-family: 'Noto Sans JP', sans-serif;
	transform: rotate(0.03deg);
	font-weight: 400;
}

/*Mplus Round*/

.o-mplus {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	transform: rotate(0.03deg);
	font-weight: 400;
}

/*Webfontボールド指定*/

.o-webfont-bold {
	font-weight: 700!important;
}

/*タイトル関係*/

h1 {}

h2 {}

h3 {}

h4 {}

h5 {}

h6 {}

h7 {}

/*画像リンク フェード汎用*/

a.o-fade {
	transition: all 0.3s;
	opacity: 1;
}

a:hover.o-fade {
	opacity: 0.6;
}

/*スクリプト用*/

/*========= レイアウトのためのCSS ===============*/

.wrapper{
  overflow: hidden;
}


.box{
  width: 220px;
  padding: 20px;
  margin:0 20px 20px 0;
  background: #666;
  color: #fff;
  box-sizing:border-box;
}



/*==================================================
ふわっ
===================================*/


/* fadeUp */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fUP{
    opacity: 0;
}