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


#wrapper{
	width: 600px;
	margin: 0 auto;
	padding: 0;
	color: #222;
	font-size: 20px;
	background-attachment: fixed;
	background-size: cover;
	font-family: "Noto Sans Japanese","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","Osaka","ＭＳ Ｐゴシック", "MS P Gothic",Verdana,Arial, Helvetica, sans-serif;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;

}
div,p{
	margin: 0;
	padding: 0;
	line-height: 1.7;
}
.point{
    font-size: 70%;
    background-image: url("images/manga_point_bgimage.jpg");
    background-size:auto;
	overflow: hidden;
	padding: 30px;
	margin: 15px 0 30px;
	border-radius: 10px;
	position:relative;
}
.point_logo {
    position: absolute; 
	width: auto        
    padding: 20px;            
    right:  25px;               
    top:0px;                 
}
.point span{
    color: #f90c1e;
}
.point img{
	width: 100%;
}
.point_title{
	font-weight: bold;
	font-size: 140%;
	color: #330099;
	padding-bottom: 5px;
}
.point_title span{
font-weight: bold;
	font-size: 100%;
	color: #330099;
	padding-bottom: 5px;
}
.left{
	float: left;
	width: 49%;
}

.btn {
		  background-color: #7080f7;
		  border-radius: 3rem;
		  box-shadow: 0 1px 4px rgba(0,0,0,.2);
		  color: #fff;
		  display: inline-block;
		  font-size: 1.125rem;
		  font-weight: 700;
		  height: 50px;
		  letter-spacing: .1rem;
		  line-height: 50px;
		  text-align: center;
		  text-decoration: none;
		  width: 100px;
		}
.btn:hover {
		  background-color: #fff;
		  border: 3px solid #7080f7;
		  color: #7080f7;
		  line-height: 50px;
		}
.button {
 	display: flex;
  	justify-content: space-evenly;
}
.item_btn{
	width: 33%;
	text-align: center;
}
.fa-position-right {
  position: absolute;
  top: calc(50% - .5em);
  right: 1rem;
}
div.btnRight{
	text-align: right;
	float: right;
}

.right img{
	width: 100%;
}
.right{
	float: right;
	width: 49%;
}
.left .title{
	font-size: 110%;
	font-weight:bold;
	color: #013ae3;
	padding-top: 5px;
}
.left .item{
	font-weight: bold;
	font-size: 180%;
}
#left a{
	text-decoration: none;
}

#logo{
	text-align:center;
	padding:25px 0;
}

.img_wrap{
  margin: 0 auto;
  overflow: hidden;
}
.img_wrap img{
  width: 100%;
  float: right;
  cursor: pointer;
  transition-duration: 0.3s;
}
.img_wrap:hover img{
  opacity: 0.6;
  transition-duration: 0.3s;
}

@media only screen and (max-width: 640px){
#wrapper,.left,.right,#logo{
	width: 100%;
	}
.left,.right{
	width: 96%;
	margin-left: 2%;
}
#main_txt{
	width: 96%;
	margin-left: 2%;
	font-size:100%;
}
.point{
	width: 93%;
	margin-left: 2%;
	padding: 10px;
}
	.point img{
		margin: 2% 0 0 0 !important;
	}
img.point1 {
			display:none;
		}
.left img,.right img{
	width: 92%;
	margin-left: 4%;
}
	body img{
	width: 100%;
	}
#other{
	grid-template-columns: 1fr 1fr;
}
#logo{
	width:30%;
	margin:0 auto;
}
.comment{
	font-size: 120%;
	width: 96%;
	margin-left: 2%;
}
.left .item{
	font-size: 160%;
}
.comment img{
	width: 50%;
}

#end{
	display: none;
}


@media only screen and (min-width: 641px){
#end_sp{
	display: none;
}