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

img{
	max-width: 100%;
	height:auto;
}

body{
	margin: 0;
}


div{
	font-size: 16px;
}

.header{
	/*ロゴ部分*/
	display: flex;
	justify-content: center;
	align-items: center;
	
	/*ヘッダー背景*/
	background-color: #fff;
	padding-left: 30px;
    position: fixed; 
    top: 0; 
    z-index: 100; 
    width: 100%;
	height: 10%;
}

.header img{
	width:23%;
	position: fixed; 
	left:4%;
	top:2.8%;
}



.hasetop{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	top: 9.9%;
	right: 18px;
	
	width: 100%;
}

.kimete{
	font-family: "YuGothic Bold","YuGothic","Hiragino Kaku Gothic W6","sans-serif";
	
	color: #D184AA;
	line-height: 220%;
	font-size: 15px;
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	padding-top: 56%;
	right: 22px;
}


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

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

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


.hasecopy{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	padding-top: 70%;
	right: 17px;
	
	width: 85%;
}

.imamadeno{
	font-family: "YuGothic Bold","YuGothic","Hiragino Kaku Gothic W6","sans-serif";
	
	color: #D184AA;
	padding-top:  97%;
	
	position: relative;
	text-align: center;
	display: block;
}

.imamadenobun{
	margin: 0 auto;
	font-size:130%;
}

.situmon{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:relative;
	padding-top: 109%;
	
	
	width: 100%;
}
.Qwhy{
	display:flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	left:20px;
	top:0%;
	
	font-family: "YuGothic Bold","YuGothic","Hiragino Kaku Gothic W6","sans-serif";
	color: #D184AA;
	font-size: 19px;
	
}

.Awhy{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	top: 11%;
	
    font-family: "YuGothic","Hiragino Kaku Gothic W6","sans-serif";
	color: #000;
	line-height: 170%;
	font-size:16px;
	
}


.Qwhen{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	left:20px;
	top: 72%;
	
	font-family: "YuGothic Bold","YuGothic","Hiragino Kaku Gothic W6","sans-serif";
	color: #D184AA;
	font-size: 19px;
	
}

.Awhen{
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	left:20px;
	top: 83%;
	
    font-family: "YuGothic","Hiragino Kaku Gothic W6","sans-serif";
	color: #000;
	line-height: 170%;
	
	
}

.Qgood{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	left:20px;
	top: 98%;
	
	font-family: "YuGothic Bold","YuGothic","Hiragino Kaku Gothic W6","sans-serif";
	color: #D184AA;
	font-size: 19px;
}

.Agood{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	left:20px;
	top: 109%;
	
    font-family: "YuGothic","Hiragino Kaku Gothic W6","sans-serif";
	color: #000;
	line-height: 170%;
}

.Qbad{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	left:20px;
	top: 144%;
	
	font-family: "YuGothic Bold","YuGothic","Hiragino Kaku Gothic W6","sans-serif";
	color: #D184AA;
	font-size: 19px;
}

.Abad{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	left:20px;
	top: 155%;
	
    font-family: "YuGothic","Hiragino Kaku Gothic W6","sans-serif";
	color: #000;
	line-height: 170%;
}

.Qsyourai{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	left:20px;
	top: 183%;
	
	font-family: "YuGothic Bold","YuGothic","Hiragino Kaku Gothic W6","sans-serif";
	color: #D184AA;
	font-size: 19px;
}

.Asyourai{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	left:20px;
	top: 194%;
	
    font-family: "YuGothic","Hiragino Kaku Gothic W6","sans-serif";
	color: #000;
	line-height: 170%;
}

.Qhitokoto{
	font-family: "YuGothic Bold","YuGothic","Hiragino Kaku Gothic W6","sans-serif";
	
	color: #D184AA;
	padding-top:  137%;
	
	position: relative;
	text-align: center;
	display: block;
	font-size: 19px;
}



.hasehitokoto{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	top: 242%;
	right: 0px;
	
	width: 100%;
	z-index: 1
}

.haseback{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	top: 268%;
	left:20px;
	
	width: 37%;
}

.hasemark{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	top: 266.5%;
	right: 17px;
	
	width: 30%;
	padding-bottom: 13%;
}


















.sakuhin{
	display:block;
	justify-content: center;
	align-items: center;
	
	position:relative;
	text-align: center;
	
	padding-top:3%;
	width: 100%;
	
}


 /*=== 画像の表示エリア ================================= */
.slide {
  position   : relative;
  overflow   :auto;
                    /* 画像のサイズに合わせて変更ください */
  width      : 100%;
  height     : 230px;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */
  background : #fff;
}

 /*=== 画像の設定 ======================================= */
.slide img {
  display    :flex;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  left       : 100%;
  animation  : slideAnime 16s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 1s }
.slide img:nth-of-type(2) { animation-delay: 6s }
.slide img:nth-of-type(3) { animation-delay: 11s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { left: 100%  }
   4% { left: 0     }
  29% { left: 0     }
  33% { left: -100% }
 100% { left: -100% }
	}