@charset "utf-8";

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

.wrapper{
  overflow: hidden;
}

.flex{
  display:flex;
  flex-wrap: wrap;
}

.two-calm{
	display: flex;
	flex-wrap:wrap;
}
.two-calm li {
	width: calc(100%/2);/*←画像を横に4つ並べる場合*/
	padding:0 5px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
}
.two-calm li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
}



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

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


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

    /* box-shadowとdrop-shadow */
    .box-and-drop .box-shadow {
      box-shadow: 10px 10px 5px 0 rgb(61, 61, 63, 0.5);
    }
    .box-and-drop .drop-shadow {
      filter: drop-shadow(10px 10px 5px rgb(61, 61, 63, 0.5));
		transform: translateZ(0);
    }

/* ぼかしから出現 */
.blur{
	animation-name:blurAnime;
	animation-duration:3s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
  }

  to {
	filter: blur(0);
	transform: scale(1);
  }
}

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

body {
	width: 100%;
    font-size: 1.6rem;
    font-size: 16px;
    text-align: center;

    /*
    background-image:url(../newimg/katarogu_shita.png);
    background-position: bottom 0px left;*/
}

h2,p {
    text-align:center;
    padding:20px;
}

ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a{
	color: #333;
}

a:hover,
a:active{
	text-decoration: none;
}
		.shadow {
  box-shadow : 10px 10px 10px 3px rgba(102, 51, 0, 0.59);  /* 画像の影 */
}
				p{
			line-height: 1em
		}

.span{display:block;}