@charset "UTF-8";

#title_back{
	position: relative;
}
#blog_content{
	max-width:1100px;
	margin:0 auto;
}
.b_p{
	display: flex;
	position: absolute;
	top: 0;
	width: 310px;
	background: #212121;
	background: rgba(186,186,186,0.7);
}
.b_p_text{
	padding: 5px 15px;
	font-size: 1.2em;
	color: #fff;
}
.arrow{
	margin-top: 15px;
	width: 10px;
	height: 10px;
	border: 3px solid;
	border-color: #646464 #646464 transparent transparent;
	transform: rotate(45deg);
}
.b_l{
	border-bottom: 1px solid #04befe;
	margin:1vw 0;
}

.b_l_i{
	margin-bottom: 0.2em;
	margin-left: 1em;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%,rgba(172,224,249, 0.8) 50%);
	background-position: 0 0;
	background-size: 200% auto;
	background-repeat: repeat;
	transition: .3s;
}
.b_l_i:hover{
	background-position: -100% 0;
	outline: none;
}

.b_l_i:focus{
	outline: none;
}

.b_back_gradBox{
	margin: 6em auto 3em;
	padding: 2px;
	width: 200px;
	height: auto;
	text-align: center;
	background: linear-gradient(45deg,#89f7fe 0%, #66a6ff 100%);
}
.b_gradBoxInner{
	width:100%;
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
	padding: 5%;
	background: #FFF;
	color:#003399;
}
.b_gradBoxInner::before,
.b_gradBoxInner::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.b_gradBoxInner,
.b_gradBoxInner::before,
.b_gradBoxInner::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.b_gradBoxInner:hover {
	background: linear-gradient(45deg, #89f7fe 0%, #66a6ff 100%);
	border: 2px solid #fff;
	color:#fff;
}

/* =============== レスポンシブ ===============*/

@media screen and (max-width:1024px){

.b_l {
    width: 90%;
    margin: 0 auto;
}
}

@media screen and (max-width:760px){

.b_l {
    font-size:4vw;
    width: 90%;
    margin: 0 auto;
}

.b_gradBoxInner {
    font-size:4vw;
}

.b_back_gradBox{
	width:45vw;
}

/*--- ブログｈｔｍｌ ----------------------------------*/
.b_l {
	padding-top: 0;
	padding-bottom: 0;
}
.b_l h2 {
	color: #15428b;
	padding-bottom: 4vw;
}
.b_l .blog_line {
	margin-top: 3.5vw;
	padding-bottom: 2.5vw;
	width: 90%;
	font-size: 4vw;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.b_l .blog_date {
	margin-bottom: 2.5vw;
	text-align: left;
	width: 100%;
}
}