@charset "UTF-8";

/* スタイリッシュなドロップダウンメニュー */
.cat_after {
	border-radius: 2px;
  	border: 2px solid #ccc;
  	background: #ffffff;
  	height:52px;
  	font-weight:bold;	
  	border-radius: 10px;
	width: 260px;
}

.tag_after {
	border-radius: 2px;
  	border: 2px solid #ccc;
  	background: #ffffff;
  	height:52px;
  	font-weight:bold;	
  	border-radius: 10px;
	width: 260px;
}

#sort_select {
	border-radius: 2px;
  	border: 2px solid #0B0B3B;
  	background: #ffffff;
  	height:52px;
  	font-weight:bold;	
  	border-radius: 26px;
	width: 260px;
}

/* スタイリッシュなテキスト入力フィールド */
#title  {
	border-radius: 2px;
  	border: 2px solid #ccc;
  	background: #ffffff;
  	height:52px;
  	font-weight:bold;	
  	border-radius: 10px;
	width: 260px;
}

#submits {
	font-size: large;
	border-radius: 2px;
  	border: 2px solid #ccc;
  	background: #ffffff;
  	height:52px;
  	font-weight:bold;	
  	border-radius: 10px;
	width: 260px;
}

.text {
	font-family: cursive;
	color: #2b70b8;
}

#sort_select {
	transform: translate(393px, 85px);
}
	
.search_result_count {
	transform: translate(-557px, 50px);
}

.search_result_count {
	font-family: cursive;
	font-weight: bold;
	color: white; 
}

.my_searchform_after .keyword {
	margin-right: 15px;
}

.my_searchform_after .category {
	margin-right: 15px;
}

.my_searchform_after .tags {
	margin-right: 15px;
}

.my_searchform_after .search {
	margin-left: -25px;
}

.my_searchform_after {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
	margin-bottom: 62px;
}

.my_searchform_after .search {
    margin-left: 0px;
}

.my_searchform_after .keyword,
.my_searchform_after .category {
    padding-bottom: 5px;
}

.my_searchform_after .keyword {
    margin-left: 0px;
}

.my_searchform_after .search {
    margin-right: 10px;
}

/* 区切り線 */
.search_result_border_parent {
	transform: translate(118px, 44px);
}

.search_result_border {
  position: relative;
  display: flex;
  align-items: center;
}

.search_result_border::before,
.search_result_border::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 20px); /* 要素の幅の50%から10pxずつ引いた値 */
  height: 1px;
  background-color: white;
}

.search_result_border::before {
  	left: -510px; /* 要素の左側に水平線を配置 */
	width: 487px;
}

.search_result_border::after {
  	right: -523px; /* 要素の右側に水平線を配置 */
	width: 500px;
}

@media screen and (max-width: 1025px) {
	
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 115px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#title {
		border-radius: 2px;
		border: 2px solid #ccc;
  		background: #ffffff;
  		height:52px;
  		font-weight:bold;	
  		border-radius: 10px;
		width: 225px;
	}
	
	.cat_after {
		border-radius: 2px;
  		border: 2px solid #ccc;
  		background: #ffffff;
  		height:52px;
  		font-weight:bold;	
  		border-radius: 10px;
		width: 225px;
	}
	
	.tag_after {
		border-radius: 2px;
  		border: 2px solid #ccc;
  		background: #ffffff;
  		height:52px;
  		font-weight:bold;	
  		border-radius: 10px;
		width: 225px;
	}

	#submits {
		font-size: large;
		border-radius: 2px;
 	 	border: 2px solid #ccc;
  		background: #ffffff;
  		height:52px;
  		font-weight:bold;	
  		border-radius: 10px;
		width: 230px;
	}
	
	#sort_select {
		transform: translate(-300px, 138px);
		width: 240px;
	}
	
	.search_result_count {
		transform: translate(-999px, 106px);
	}
	
	/* 区切り線 */
	.search_result_border_parent {
		transform: translate(-451px, 85px);
	}
	
	.search_result_border {
  		position: relative;
  		display: flex;
  		align-items: center;
		}

		.search_result_border::before,
		.search_result_border::after {
  		content: '';
 		 position: absolute;
  		top: 50%;
  		width: calc(50% - 20px); /* 要素の幅の50%から10pxずつ引いた値 */
  		height: 1px;
  		background-color: #333;
		}

		.search_result_border::before {
  			left: -499px; /* 要素の左側に水平線を配置 */
			width: 360px;
		}

		.search_result_border::after {
  			right: -390px; /* 要素の右側に水平線を配置 */
			width: 370px;
		}
	
	.text {
		white-space: nowrap;
		margin-left: -120px;
		font-family: cursive;
	}
	
}

@media screen and (max-width: 912px) {
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 116px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#title {
		border-radius: 2px;
		border: 2px solid #ccc;
  		background: #ffffff;
  		height:52px;
  		font-weight:bold;	
  		border-radius: 10px;
		width: 207px;
	}
	
	.cat_after {
		border-radius: 2px;
  		border: 2px solid #ccc;
  		background: #ffffff;
  		height:52px;
  		font-weight:bold;	
  		border-radius: 10px;
		width: 205px;
	}
	
	.tag_after {
		border-radius: 2px;
  		border: 2px solid #ccc;
  		background: #ffffff;
  		height:52px;
  		font-weight:bold;	
  		border-radius: 10px;
		width: 205px;
	}

	#submits {
		font-size: large;
		border-radius: 2px;
 	 	border: 2px solid #ccc;
  		background: #ffffff;
  		height:52px;
  		font-weight:bold;	
  		border-radius: 10px;
		width: 200px;
	}
	
	#sort_select {
		transform: translate(-368px, 136px);
		width: 240px;
	}
	
	.search_result_count {
		transform: translate(-961px, 100px);
	}
	
	/* 区切り線 */
	.search_result_border_parent {
		transform: translate(-451px, 85px);
	}
	
	.search_result_border {
  		position: relative;
  		display: flex;
  		align-items: center;
		}

		.search_result_border::before,
		.search_result_border::after {
  		content: '';
 		 position: absolute;
  		top: 50%;
  		width: calc(50% - 20px); /* 要素の幅の50%から10pxずつ引いた値 */
  		height: 1px;
  		background-color: #333;
		}

		.search_result_border::before {
  			left: -414px; /* 要素の左側に水平線を配置 */
			width: 325px;
		}

		.search_result_border::after {
  			right: -336px; /* 要素の右側に水平線を配置 */
			width: 322px;
		}
	
	.text {
		white-space: nowrap;
		margin-left: -69px;
		font-family: cursive;
	}
}

@media screen and (max-width: 855px) {	
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 159px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#title {
		border-radius: 2px;
		border: 2px solid #ccc;
  		background: #ffffff;
  		height:52px;
  		font-weight:bold;	
  		border-radius: 10px;
		width: 250px;
		transform: translate(121px, 10px);
	}
	
	.cat_after {
		border-radius: 2px;
  		border: 2px solid #ccc;
  		background: #ffffff;
  		height:52px;
  		font-weight:bold;	
  		border-radius: 10px;
		width: 250px;
		transform: translate(-142px, 70px);
	}
	
	.tag_after {
		border-radius: 2px;
  		border: 2px solid #ccc;
  		background: #ffffff;
  		height:52px;
  		font-weight:bold;	
  		border-radius: 10px;
		width: 250px;
		transform: translate(-105px, 10px);
	}

	#submits {
		font-size: large;
		border-radius: 2px;
 	 	border: 2px solid #ccc;
  		background: #ffffff;
  		height:52px;
  		font-weight:bold;	
  		border-radius: 10px;
		width: 250px;
		transform: translate(-370px, 70px);
	}
	
	#sort_select {
		transform: translate(-626px, 182px);
		width: 240px;
	}
	
	.search_result_count {
		transform: translate(-1144px, 151px);
	}
	
	/* 区切り線 */
	.search_result_border_parent {
		transform: translate(-669px, 150px);
	}
	
	.search_result_border {
  		position: relative;
  		display: flex;
  		align-items: center;
		}

		.search_result_border::before,
		.search_result_border::after {
  		content: '';
 		 position: absolute;
  		top: 50%;
  		width: calc(50% - 20px); /* 要素の幅の50%から10pxずつ引いた値 */
  		height: 1px;
  		background-color: #333;
		}

		.search_result_border::before {
  			left: -378px; /* 要素の左側に水平線を配置 */
			width: 296px;
		}

		.search_result_border::after {
  			right: -295px; /* 要素の右側に水平線を配置 */
			width: 283px;
		}
	
	.text {
		white-space: nowrap;
		margin-left: -69px;
		font-family: cursive;
	}
}

@media screen and (max-width: 834px) {
	.my_searchform_after .keyword {
    	margin-left: -13px;
	}
	
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 160px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#title {
		border-radius: 2px;
		border: 2px solid #ccc;
  		background: #ffffff;
  		height:52px;
  		font-weight:bold;	
  		border-radius: 10px;
		width: 250px;
		transform: translate(121px, 10px);
	}
	
	.cat_after {
		border-radius: 2px;
  		border: 2px solid #ccc;
  		background: #ffffff;
  		height:52px;
  		font-weight:bold;	
  		border-radius: 10px;
		width: 250px;
		transform: translate(-143px, 70px);
	}
	
	.tag_after {
		border-radius: 2px;
  		border: 2px solid #ccc;
  		background: #ffffff;
  		height:52px;
  		font-weight:bold;	
  		border-radius: 10px;
		width: 250px;
		transform: translate(-105px, 10px);
	}

	#submits {
		font-size: large;
		border-radius: 2px;
 	 	border: 2px solid #ccc;
  		background: #ffffff;
  		height:52px;
  		font-weight:bold;	
  		border-radius: 10px;
		width: 250px;
		transform: translate(-369px, 70px);
	}
	
	#sort_select {
		transform: translate(-614px, 185px);
		width: 240px;
	}
	
	.search_result_count {
		transform: translate(-1131px, 160px);
	}
	
	/* 区切り線 */
	.search_result_border_parent {
		transform: translate(-669px, 150px);
	}
	
	.search_result_border {
  		position: relative;
  		display: flex;
  		align-items: center;
		}
	
	.search_result_border::before,
	.search_result_border::after {
  		content: '';
 		position: absolute;
  		top: 50%;
  		width: calc(50% - 20px); /* 要素の幅の50%から10pxずつ引いた値 */
  		height: 1px;
  		background-color: #333;
	}

	.search_result_border::before {
  		left: -366px; /* 要素の左側に水平線を配置 */
		width: 281px;
	}

	.search_result_border::after {
  		right: -293px; /* 要素の右側に水平線を配置 */
		width: 280px;
	}
	
	.text {
		white-space: nowrap;
		margin-left: -68px;
		font-family: cursive;
	}
}

@media screen and (max-width: 800px) {
	.sort_count {
		margin-top: -122px;
	}
	
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 120px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#sort_select {
		transform: translate(487px, 142px);
	}
	
	.search_result_count {
		transform: translate(8px, 110px);
	}
}

@media screen and (max-width: 712px) {
	
	.my_searchform_after .keyword {
        margin-left: -61px;
    }
	
	.sort_count {
		margin-top: -122px;
	}
	
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 200px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#sort_select {
		position: relative;
        right: 1141px;
        top: 179px;
	}
	
	.search_result_count {
		position: relative;
		left: -1090px;
		top: 176px;
	}
}

@media screen and (max-width: 640px) {
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 60px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#sort_select {
		position: relative;
        right: 119px;
        top: -20px;
	}
	
	.search_result_count {
        position: relative;
		left: -5px;
		top: -16px;
    }
}

@media screen and (max-width: 600px) {
	
	.my_searchform_after .keyword {
        margin-left: -116px;
    }
	
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 194px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#sort_select {
		position: relative;
        right: 1200px;
        top: 172px;
	}
	
	.search_result_count {
        position: relative;
		left: -1040px;
		top: 176px;
    }
}

@media screen and (max-width: 541px) {
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 100px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#sort_select {
		position: relative;
        right: 355px;
        top: -11px;
	}
	
	.search_result_count {
        position: relative;
		left: 136px;
		top: 30px;
    }
}

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

	#sort_select {
		position: relative;
        right: 408px;
        top: -18px;
	}
	
	.search_result_count {
        position: relative;
		left: 92px;
		top: 30px;
    }
}

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

	#sort_select {
		position: relative;
        right: 417px;
        top: -22px;
	}
	
	.search_result_count {
        position: relative;
		left: 82px;
		top: 30px;
    }
}


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

	#sort_select {
		position: relative;
        right: 436px;
        top: -20px;
	}
	
	.search_result_count {
        position: relative;
		left: 67px;
		top: 30px;
    }
}

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

	#sort_select {
		position: relative;
        right: 463px;
        top: -22px;
	}
	
	.search_result_count {
        position: relative;
		left: 35px;
		top: 30px;
    }
}

@media screen and (orientation: landscape) and (max-width: 1369px) {
	
	.search_result_border_parent {
    	position: relative;
    	right: 711px;
    	top: 48px;
	}
	
	.my_searchform_after .keyword {
    	margin-left: 82px;
	}
	
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 140px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#sort_select {
		position: relative;
        right: 725px;
        top: 60px;
	}
	
	.search_result_count {
		position: relative;
        right: 621px;
        top: 69px;
	}
}

@media screen and (orientation: landscape) and (max-width: 1281px) {
	
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 151px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#sort_select {
		position: relative;
    	right: 688px;
		top: 88px;
	}
	
	.search_result_count {
		position: relative;
    	right: 690px;
		top: 94px;
	}
}

@media screen and (orientation: landscape) and (max-width: 1139px) {
	.search_result_border_parent {
		position: relative;
    	right: 717px;
    	top: 22px;
	}
	
	.sort_count {
		margin-top: -13px;
	}
	
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 102px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#sort_select {
		position: relative;
        right: 749px;
        top: 38px;
	}
	
	.search_result_count {
		position: relative;
        right: 610px;
        top: 39px;
	}
}

@media screen and (orientation: landscape) and (max-width: 1025px) {
	.sort_count {
		margin-top: -122px;
	}
	
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 71px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#sort_select {
		position: relative;
        left: 1025px;
		top: 0px;
	}
	
	.search_result_count {
		position: relative;
        left: 999px;
        top: 10px;
	}
}

@media screen and (orientation: landscape) and (max-width: 961px) {
	
	   .search_result_border_parent {
        position: relative;
		left: 0px;
        top: -12px;
    }

	.my_searchform_after .keyword {
    	margin-left: -23px;
	}
	
	.sort_count {
		margin-top: -122px;
	}
	
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 124px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#sort_select {
		position: relative;
        left: -21px;
		top: 110px;
	}
	
	.search_result_count {
		position: relative;
        left: 16px;
        top: 112px;
	}
}

@media screen and (orientation: landscape) and (max-width: 933px) {
	.sort_count {
		margin-top: -122px;
	}
	
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 71px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#sort_select {
		position: relative;
        left: 832px;
		top: 0px;
	}
	
	.search_result_count {
		position: relative;
        left: 999px;
        top: 10px;
	}
}

@media screen and (orientation: landscape) and (max-width: 896px) {
	.sort_count {
		margin-top: -122px;
	}
	
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 71px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#sort_select {
		 position: relative;
        left: 870px;
        top: 0px;
	}
	
	.search_result_count {
		position: relative;
        left: 967px;
        top: 10px;
	}
}

@media screen and (orientation: landscape) and (max-width: 883px) {
	
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 71px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#sort_select {
		 position: relative;
        left: 950px;
        top: 0px;
	}
	
	.search_result_count {
		position: relative;
        left: 965px;
        top: 10px;
	}
}

@media screen and (orientation: landscape) and (max-width: 845px) {
	.sort_count {
		margin-top: -122px;
	}
	
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 71px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#sort_select {
		 position: relative;
        left: 1172px;
        top: -45px;
	}
	
	.search_result_count {
		position: relative;
        left: 1150px;
        top: -38px;
	}
}

@media screen and (orientation: landscape) and (max-width: 824px) {
	.sort_count {
		margin-top: -122px;
	}
	
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 71px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#sort_select {
		position: relative;
        left: 1163px;
        top: -47px;
	}
	
	.search_result_count {
		position: relative;
        left: 1134px;
        top: -43px;
	}
}

@media screen and (orientation: landscape) and (max-width: 746px) {
	.sort_count {
		margin-top: -122px;
	}
	
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 71px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#sort_select {
		position: relative;
        left: -55px;
        top: -2px;
	}
	
	.search_result_count {
		position: relative;
        left: 3px;
        top: 6px;
	}
}

@media screen and (orientation: landscape) and (max-width: 733px) {
	.sort_count {
		margin-top: -122px;
	}
	
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 71px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#sort_select {
		position: relative;
        left: -71px;
        top: -2px;
	}
	
	.search_result_count {
		position: relative;
        left: 3px;
        top: 6px;
	}
}

@media screen and (orientation: landscape) and (max-width: 668px) {
	.sort_count {
		margin-top: -122px;
	}
	
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 71px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#sort_select {
		position: relative;
        left: -130px;
        top: -2px;
	}
	
	.search_result_count {
		position: relative;
        left: 3px;
        top: 6px;
	}
}


@media screen and (orientation: landscape) and (max-width: 659px) {
	
	.sort_count {
		margin-top: -122px;
	}
	
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 57px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#sort_select {
		position: relative;
        right: 143px;
        top: -21px;
	}
	
	.search_result_count {
		position: relative;
        left: -5px;
        top: -17px;
	}
}

@media screen and (orientation: landscape) and (max-width: 641px) {
	
	.sort_count {
		margin-top: -122px;
	}
	
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 57px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#sort_select {
		position: relative;
        left: -160px;
        top: -21px;
	}
	
	.search_result_count {
		position: relative;
        left: -5px;
        top: -17px;
	}
}

@media screen and (orientation: landscape) and (max-width: 569px) {
	
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 103px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#sort_select {
		position: relative;
        left: -346px;
        top: -21px;
	}
	
	.search_result_count {
		position: relative;
        left: 144px;
        top: 23px;
	}
}

@media screen and (orientation: landscape) and (max-width: 481px) {
	
	.my_searchform_after {
    	display: flex;
    	margin-bottom: 103px;
    	flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#sort_select {
		position: relative;
        left: -382px;
        top: -21px;
	}
	
	.search_result_count {
		position: relative;
        left: 120px;
        top: 23px;
	}
}