@charset "UTF-8";

/* Theme Name: blog */

/*===================
▼frame▼
===================*/

.blog80{
  width: 80%;
  margin-right : auto;
  margin-left : auto;
}

.single60{
  width: 60%;
  margin-right : auto;
  margin-left : auto;
  text-align: left;
}


/*===================
▼img▼
===================*/

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



.i240 img{
  max-width : 50% ;
  height : auto ;
}



.i120r img{
  max-width : 25% ;
  height : auto ;
  border-radius: 50%; 
}




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

/*===================
▼breadcrumbs▼
===================*/

.breadcrumbs{
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.750rem;
  text-align: left;
  margin-top : 1rem;
}

.breadcrumbs a{
  display: inline-block;
  text-decoration:none;
  position: relative;
  transition: .3s;
}

.breadcrumbs a::after{
	position: absolute;
	bottom: -2px;
	left: 50%;
	content: '';
	width: 0;
	height: 1px;
	background-color: #8f6451;
	transition: .3s;
	transform: translateX(-50%);
}

.breadcrumbs a:hover::after{
	width: 100%;
}


/*==============================
▼ ▼ ▼ single(60) ▼ ▼ ▼
==============================*/

.single60 p{
  margin-bottom : 1.8rem;
}

.single60{
  line-height: 2;
}

time,.tag{
  font-size: 0.750rem;
}

.tag a:hover{
  color : #FA487E;
}

/*===================
▼sin_nav▼
===================*/

.sin_nav{
	display: flex;
	justify-content: space-between;
	width: 100%;
	overflow: hidden;
	border-top: 1px solid #dddddd;
	border-bottom: 1px solid #dddddd;
	background: transparent;
	background-repeat: repeat-y;
	background-attachment: scroll;
	background-position: 50% 0px;
	background-size: auto auto;
	background-origin: padding-box;
	background-clip: border-box;
}

.alignleft{
	width: 50%;
	text-align: left;
}

.alignright{
	width: 50%;
	text-align: right;

}

.sin_nav > div{
	width: 100%;
}

.sin_nav a{
	display: block;
	padding: 1em;
	border: none;
  transition: .4s;
  color : #FA487E;
}

.sin_nav a:hover{
	background: #FA487E;
color : #ffffff;
}

.sin_nav .alignright a:hover{
	border-left: 1px solid #ddd;
}


/*==============================
▼ ▼ ▼ index,blog ▼ ▼ ▼
==============================*/

.bi_box{
  width: 100%;
  margin-right : auto;
  margin-left : auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  font-size: 0.875rem;
}

.bi_box .post{
  width : 23%;
  margin-right : auto;
  margin-left : auto;
  text-align: left;
  margin-bottom : 1.5rem;
}

.bi_box .post img{
  max-width : 100% ;
  height : auto ;
  margin-bottom : 0.8rem;
}

.bi_box .post:hover{
  opacity: 0.6;
  transition-duration: 0.3s;
}

/*===================
▼pagenation▼
===================*/

.pagenation{
  width : 80%;
  text-align : center;
  margin-right : auto;
  margin-left : auto;
  margin-top : 2rem;
  margin-bottom : 2rem;
}

.pagenation ul{
  display: flex;
justify-content: center;
}

.pagenation li{
    list-style: none;
  margin-left : 10px;
}

.current{
  background-color : #FA487E;
  color : #FFF;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  display: inline-block;
  text-align:center;
  line-height: 35px;
}

.pagenation a{
  color : #635245;
  transition: .3s
}

.pagenation a:hover{
  color :  #FA487E;
}

/*==============================
▼ ▼ ▼ sym single(80) ▼ ▼ ▼
==============================*/


/*===================
▼bsym_menu1,bsy_menu2(c_menu)▼
===================*/

.bsym_menu1 .col_cou,.bsym_menu2 .col_cou,.bsym_menu3 .col_cou{
  width : 100%;
  display: flex;
}

.bsym_menu1 .col_cou{
  justify-content: flex-start;
}

.bsym_menu3 .col_cou{
  justify-content: space-between;
}

.bsym_menu1 .cou_l{
  margin-left : 2rem;
}






@media (min-width: 481px) and (max-width: 960px){

/*==============================
▼ ▼ ▼ HP(960) ▼ ▼ ▼
==============================*/


/*===================
▼breadcrumbs▼
===================*/

.breadcrumbs{
  display: none;
}


}



@media (max-width: 480px) {

/*===================
▼frame▼
===================*/

.blog80{
  width: 96%;
}

.single60{
  width: 100%;
}


/*===================
▼breadcrumbs▼
===================*/

.breadcrumbs{
  display: none;
}


/*==============================
▼ ▼ ▼ single(60) ▼ ▼ ▼
==============================*/

/*===================
▼sin_nav▼
===================*/

.sin_nav{
  flex-direction: column;
}

.alignleft{
  width: 100%;
  border-bottom: 1px solid #dddddd;
}

.alignright{
  width: 100%;
}


/*==============================
▼ ▼ ▼ index,blog ▼ ▼ ▼
==============================*/

.bi_box .post{
  width : 48%;
}


/*==============================
▼ ▼ ▼ sym single(80) ▼ ▼ ▼
==============================*/


/*===================
▼bsym_menu1,bsy_menu2(c_menu)▼
===================*/

.bsym_menu1 .col_cou{
  justify-content: space-between;
}

.bsym_menu1 .cou_l{
  margin-left : 0rem;
}

}