@charset "utf-8";

@media screen and (max-width: 1199px){
	/*bootstrapを使用する場合。幅を1200pxとして
	左右に15pxずつpaddingをつけている為*/
	.container{max-width: 1199px;}
	.visible-xs{display: none!important;}
}
@media screen and (max-width: 1169px){
	/*bootstrapを使用しない場合*/
}
	
@media screen and (max-width: 1024px){
}

@media (max-width: 767px){
	.container{max-width: 767px;}
	.hidden-xs{display: none!important;}
	.visible-xs{display: block!important;}
}

#esgra{
	text-align:center;
}

#esgra img{
    width: 100%;
	height: auto;
}

#esgra a{border-bottom:none;}
#esgra a:hover{border-bottom:none;}

#esgra ul{
	margin-left:2em;
}
#esgra li{
	font-size:1.7em;
	list-style-type:disc;
	font-weight:600;
	line-height:2em;
	text-align:left;
}

#esgra li small{
	font-size:0.6em;
}

#esgra .right-txt-box{
	float:left;
	max-width:620px;
}

#esgra .mgn-top10{margin-top:10px;}
#esgra .mgn-top20{margin-top:20px;}
#esgra .mgn-top30{margin-top:30px;}
#esgra .mgn-top50{margin-top:50px;}

#esgra .mgn-btm30{margin-bottom:30px;}

#esgra img.left-img{
    width: auto;
	height: 330px;
	float:left;
}

#esgra .study-img{
	width: 430px!important;
	margin-left: 10px;
}

#esgra .headline{
	text-align:center;
	margin-top:-40px;
	margin-right:5%;
	margin-left:5%;
	font-size: 180%;
	background-color:#ff616e;
	color:#ffffff;
	border-radius: 25px;
	padding: 4px 30px;
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}

#esgra .bg-pink{
	margin:0 20px;
	padding:20px;
	background-size: auto auto;
	background-color: rgba(252, 212, 210, 1);
	background-image: repeating-linear-gradient(135deg, transparent, transparent 20px, rgba(252, 228, 228, 1) 20px, rgba(252, 228, 228, 1) 40px );
}

#esgra .left-txt-box{
	background-color:#ffffff;
	margin-left: 210px;
	padding:10px 20px;
	font-size: 1.4em;
	min-height:330px;
	min-width:450px;
	line-height:1.7em;
	text-align:left;
}

#esgra .sp-comment{
	background-color:#ffffff;
	padding:10px 20px;
	font-size: 1.4em;
	line-height:2em;
	text-align:left;
}

#esgra .buttun1{
  color: #fff;
  font-size: 2em;
  font-weight: bold;
  background: #036eb6;
  padding: 18px 100px;
  border: 3px solid #036eb6;
  box-shadow: 0 3px 3px #8c8c8c;
  border-radius: 50px;
  display: inline-block;
	transition: .2s;
}
#esgra .buttun1:hover {
  transform: translateY(3px);
	box-shadow: 0 0 0 #8c8c8c;
}

#esgra .buttun2{
  color: #000;
  font-size: 2em;
  font-weight: bold;
  background: #fdc720;
  padding: 18px 70px;
  border: 3px solid #fdc720;
  box-shadow: 0 3px 3px #8c8c8c;
  border-radius: 50px;
  display: inline-block;
	transition: .2s;
}
#esgra .buttun2:hover {
  transform: translateY(3px);
	box-shadow: 0 0 0 #8c8c8c;
}

/* clearfix */
.clearfix::after{
   content: "";
   clear: both;
   display: block;
}
/* clearfix */