@charset "utf-8";
/*--------------------------------------
 baseball stadium custom css
--------------------------------------*/
.howto-bb {
	margin-top: 40px;
	margin-bottom: 40px;
	color: #fff;
	position: relative;
}

.baseball {
	text-align: left;
	font-size: 25px;
	padding: 8px 16px 8px 72px;
	background-color: #004097;
}
@media screen and (max-width: 750px) {
	.baseball {
	font-size: 18px;
	padding: 8px 16px 8px 35px;
}
}

.background-bb {
	border: 6px solid #004097;
	background: #d2ecfa;
}

.ball-icon {
	position: absolute;
	top: -25px;	
	left: -20px;
	width: 80px;
}
.img-child {
	margin-top: 8px;
	border-radius: 1em;
}
.threerules {
	margin-top: 80px;
}
.threeout-icon {
	position: absolute;
	top: -50px;	
	left: 16px;
	width: 120px;
}
.threerules-txt {
	text-align: left;
	font-size: 25px;
	padding: 8px 16px 8px 150px;
	background-color: #004097;
	
}
.h4-title {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 40px;
	font-size: 40px;
	font-weight: 800;
	color: #004097;
}
@media screen and (max-width: 750px) {
	.h4-title {
		font-size: 30px;
	}
}
.baseball-item{
	width: 50px;
    height: auto;
    vertical-align: bottom;
}

ol {
  counter-reset: number; /* 数字をリセット */
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0.5em;
	padding-bottom: 0;
}

ol li {
  position: relative;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 0em;
	text-align: left;
	color: #004097;
	/*font-size: calc(16px + 2*(100vw - 320px) / 1020);*/
	font-weight: 600;
	margin-top: 16px;
	margin-bottom: 56px;
	position: relative;
}
ol li p{
	font-size: 24px;
	font-weight: 800;
	position: absolute;
	left: 2em;
	top: -1.2em;
}
ol li:after{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  background: #004097;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 32px; 
  left: 0;	
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  /*以下上下中央寄せのため*/
  top: -1rem;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.score {
	padding: 0em 0.8em 0 0.5em;
	margin-bottom: 56px;
}
.score p {
	font-size: 24px;
	font-weight: 800;
	color: #004097;
	text-align: left;
}
.defence {
	display: flex;
	justify-content: center;
	width: 100%;
}
figure {
	margin: 0 auto;
}
figcaption {
	font-size: 22px;
	font-weight: 800;
	padding-top: 8px;
}
.more-fun {
	font-weight: 600;
	font-size: 20px;
	text-align: left;
	text-indent: 1em;
}
.section-title.contents {
  background: #004097;
  color: #fff;
}
.img-pc {
	display: block !important; 
}
.img-sp {
	display: none !important;
}

@media screen and (max-width: 750px) {
 .baseball-item {
		width: 40px;
	}
	.defence {
	display: block;
	}
    .ball-icon {
        top: -10px;
        left: -10px;
        width: 40px;
    }
　　.baseball{
        font-size: 18px;
        padding:　8px 16px 8px 35px;
	}
	.threeout-icon {
        top: -10px;
        left: -10px;
        width: 60px;
    }
    .threerules-txt {
        font-size: 18px;
        padding-left: 60px;
    }	
	ol li p {
    font-size: 24px;
    left: 1.5em;
    top: -1.2em;
}
	ol li:after {
		font-size: 24px;
		width: 30px;
		height: 30px;
		line-height: 30px;
	}
	figcaption {
	font-size: 20px;
	padding-top: 5px;
	}
	.img-pc {
		display: none !important; 
	}
	.img-sp {
		display: block !important;
	}
}