@charset "Shift_JIS";
/* CSS Document */


/* 全体構造
---------------------------------------------------- */
body{
	color: #222;
	font-size: 14px;
}
*{
	margin:0;
	padding:0;
	font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	font-size:100%;
	text-align:center;
}
strong{}
span{R}
img{
	margin: 0;
	padding:0;
	border: none;
}
.clearfix:after {
	content: "."; 
	display: block; 
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}
a{
	color:#222;
	text-decoration:underline;
}
a:hover{
	text-decoration:none;
}


img{border:0;}
ul,li,p,div,dl,dt,dd,p,h1,h2,h3,h4,h5,h6{margin:0; padding:0;}
ul,li{list-style:none;}
table {	border-collapse: collapse;border-spacing: 0;}


/* クラス指定
---------------------------------------------------- */
.clear{
	clear: both;
}
.clear hr
{
	display:none;
}
.left{
	float: left;
}
.right{
	float: right;
}
.nomal{
	clear: both;
}
.txtleft{
	text-align: left;
}
.txtright{
	text-align: right;
}
.txtcenter{
	text-align: center;
}

/* 文字設定
---------------------------------------------------- */
.small{font-size:11px;}
.middle{font-size:14px;}
.large{font-size:18px;}
.red{color:#FF1C71;}	
.red10{color:#ff0000;font-weight:bold;font-size:10px;}	
.green{color:#62BAA9;}
.pink{color:#FF007F;}
.gold{color:#AC944E;}
.blue{color:#0f1aff;}

.wf-mplus1p { font-family: "Mplus 1p"; }

/* 本文
---------------------------------------------------- */
header,h1,h2,p,footer{
  margin:0 auto;
}

header,
footer{
  padding:30px 0 20px;
  width:100%;
}
header{
  border-bottom:1px solid #000;
}
footer{
  border-top:1px solid #000;
}
h1{
  position:relative;
  padding-left:110px;
  text-align:left;
  width:100%;
  font-size:3.5rem;
  font-family: "Mplus 1p";
  font-weight:normal;
}
h1 img{
  position:absolute;
  top:10px;
  left:20px;
}
h2{
  margin:50px auto 20px;
  width:50%;
  padding:10px;
  color:#fff;
  background:#ccc;
}
p{
  margin-bottom:50px;
}

@media (max-width: 480px) { 

h1{
  padding-left:70px;
  font-size:2rem;
}
h1 img{
  width:40px;
  height:33px;
}
}

@media (min-width: 481px) and (max-width: 767px) { 

h1{
  padding-left:80px;
  font-size:2.5rem;
}
h1 img{
  width:49px;
  height:40px;
}
}


/* --- 全体のBOX定義 ---------------------------------------- */
.box {
  position   : relative;
  max-width  : 400px;
  height     : 500px;
  margin:auto;
  overflow   : hidden;
}

/* --- 背景の指定 ------------------------------------------- */
.box .bgImg {
  position   : absolute;
width:100%;
height:100%;
  opacity    : 0;
  animation  : bgAnime 30s infinite;   /* 4画像 × 各5s = 20s */
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.box .src1 {
  background-image : url(../images/spring.jpg);   /* 背景の画像を指定 */
  background-position:center center;
}
.box .src2 {
  background-image : url(../images/spring2.jpg);   /* 背景の画像を指定 */
  background-position:center center;
  animation-delay  : 10s;
}
.box .src3 {
  background-image : url(../images/spring3.jpg);   /* 背景の画像を指定 */
  background-position:center center;
  animation-delay  : 20s;
}
.box .src4 {
  background-image : url(../images/spring4.jpg);   /* 背景の画像を指定 */
  background-position:center center;
  animation-delay  : 30s;
}
.box .src5 {
  background-image : url(../images/spring5.jpg);   /* 背景の画像を指定 */
  background-position:center center;
  animation-delay  : 40s;
}

@keyframes bgAnime {
   0% { opacity: 0; background-size:80% 80%; }
   10% { opacity: 1; background-size:80% 80%; }
  30% { opacity: 1; background-size:100% 100%;}
  35% { opacity: 0; background-size:150% 150%;}
 100% { opacity: 0; background-size:150% 150%;}
}

/* --- 前面の文字定義（サンプルのため変更してください） ----- */
.box .boxString{
  position   : absolute;
  display    : inline-block;
  padding    : 20px;
  background : rgba(0, 127, 255, 0.7);          /* 半透明の青 */
  color      : #fff;
  top        : 50%;                               /* 中央寄せ */
  left       : 50%;
  transform  : translate(-50%,-50%);
  z-index    : 11;
}