/*
***************************************検索フォーム全体***************************************
***************************************検索フォーム全体***************************************
***************************************検索フォーム全体***************************************
*/
.search_p_main_area {
padding : 5px 0 0;
}
.search_main_search_foorm_area {
height : auto;
width : 100%;
}
.search_main_search_foorm_block{
height: auto;
max-width: 850px;
width: 99%;
width: -webkit-calc(100% - 6px);
width: calc(100% - 6px);
margin: auto;
transition: all 0.5s ease;
border-radius: 8px;
padding: 5px 5px 1px;
background-image: url(https://webbura.com/img/main/search_back_01.png);
background-color: #fffefb;
}
.search_search_foam_area {
background-color: #fffefb;
user-select : none;
float : left;
height : 35px;
width : 80%;
width : -webkit-calc(83% - 5px);
width : calc(83% - 5px);
margin : 5px 5px 5px 2.5px;
border-radius : 8px;
transition : all 0.3s 0s ease;
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0.3) inset;
}
.search_search_foam {
font-size : 16px;
float : left;
height : 35px;
width : 100%;
border-radius : 8px;
text-align : center;
transition : all 0.3s 0s ease;
box-shadow : 0 0 0 3px rgba(139, 204, 206, 0);
}
.search_search_foam:focus {
transition : all 0.3s 0s ease;
box-shadow : 0 0 0 2px rgba(139, 204, 206, 1);
}
.search_search_button_area {
background-color: #fffefb;
user-select : none;
float : left;
height : 35px;
width : 18%;
width : -webkit-calc(17% - 8px);
width : calc(17% - 8px);
margin : 5px 1px;
border-radius : 8px;
transition : all 0.3s 0s ease;
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0) inset;
transform : translateY(0);
}
.search_search_button_area:active {
transition : all 0.3s 0s ease;
transform : translateY(1px);
}
.search_search_button {
text-align : center;
font-size : 13px;
height : 35px;
width : 100%;
border-radius : 8px;
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0.3);
transform : translateY(0);
color : #656565;
transition : all 0.3s 0s ease;
}
.search_search_button:active {
transition : all 0.3s 0s ease;
box-shadow : 0 0 0 2px rgba(139, 204, 206, 1);
}
@media screen and (min-width: 650px) {	
.search_search_foam_area:hover {
background-color: #fffefb;
transition : all 0.3s 0s ease;
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0.4) inset;
}
.search_search_button_area:active {
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0.3) inset;
}
.search_search_button:hover {
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0);
transform : translateY(1px);
transition : all 0.3s 0s ease;
}
.search_search_button:active {
transition : all 0.3s 0s ease;
box-shadow : 0 0 0 2px rgba(139, 204, 206, 1);
}
.search_main_search_foorm_area {
margin: auto;
max-width: 855px;
}
.search_main_search_foorm_block {
width: 99%;
width: -webkit-calc(100% - 10px);
width: calc(100% - 10px);
}
}
/*
***************************************検索フォーム全体***************************************
***************************************検索フォーム全体***************************************
***************************************検索フォーム全体***************************************
*/



/*
***************************************カテゴリー絞り込みエリア***************************************
***************************************カテゴリー絞り込みエリア***************************************
***************************************カテゴリー絞り込みエリア***************************************
*/
.search_search_check_area1 {
width : 100%;
margin : auto;
padding : 0;
max-width : 450px;
font-size : 0;
}
.search_search_check_area2 {
width : 150px;
height : 0;
margin : 10px auto;
overflow : hidden;
transition : all 0.5s ease;
}
.search_search_check_area2.active {
height : 230px;
}
.search_check_area2_center {
width : 100%;
padding : 0;
margin : 0 auto;
text-align : left;
}
.search_check_card_area{
width : 75px;
height: 75px;
float : left;
display:flex;
justify-content: center;
}
.check_card {
position : static;
cursor : pointer;
float : left;
width : 65px;
margin :auto;
user-select : none;
}
.check_card_input {
position : absolute;
display : block;
outline : none;
border : none;
background : none;
padding : 0;
margin : 5px;
-webkit-appearance: none;
}
.check_card_body {
height : 65px;
border-radius : 8px;
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0.3);
transition : all 0.3s 0s ease;
transform : translateY(0);
background-color: #fffefb;
text-align : center;
}
.check_card_body:active {
transition : all 0.3s 0s ease;
box-shadow : 0 3px 6px rgba(0, 0, 0, 0);
transform : translateY(1px);
}
.check_card_input:checked ~ .check_card_body {
box-shadow : 0 0 0 2px #8bccce;
transform : translateY(0);
}
.check_card_input:checked ~ .check_card_body:active {
box-shadow : 0 3px 6px rgba(0, 0, 0, 0);
transform : translateY(1px);
}
.check_card_body_cover_image {
height : 65px;
width : 65px;
border-radius : 8px;
filter : grayscale(1);
transition : all 0.3s 0s ease;
}
.check_card_input:checked ~ .check_card_body .check_card_body_cover_image {
filter : grayscale(0);
transition : all 0.3s 0s ease;
}
.check_card_input:checked ~ .check_card_body:active .check_card_body_cover_image {
filter : grayscale(1);
transition : all 0.3s 0s ease;
}
.check_card_body_cover_checkbox {
background : #8bccce;
border : #fff solid 2px;
position : absolute;
right : 0;
top : 0;
z-index : 1;
width : 28px;
height : 28px;
border-radius : 50%;
opacity : 0;
transition : transform 0.2s, opacity calc(0.2s * 1.2) linear, -webkit-transform 0.2s ease;
transform : scale(0);
}
.check_card_body_cover_checkbox_svg {
width : 12px;
height : 12px;
display : inline-block;
vertical-align : top;
fill : none;
margin : 6px 0 0 0;
stroke : #fff;
stroke-width : 2;
stroke-linecap : round;
stroke-linejoin : round;
stroke-dasharray : 17px;
stroke-dashoffset : 17px;
transition : stroke-dashoffset 0.4s 0.15s ease;
}
.check_card_input:checked ~ .check_card_body .check_card_body_cover_checkbox {
background : #8bccce;
border : #fff solid 2px;
opacity : 1;
transform : scale(0.8);
}
.check_card_input:checked ~ .check_card_body:active .check_card_body_cover_checkbox {
background : #8bccce;
opacity : 0;
transform : scale(0);
}
.check_card_input:checked ~ .check_card_body .check_card_body_cover_checkbox_svg {
stroke : #fff;
stroke-dashoffset : 0;
}
.check_card_body_header {
background-color : rgba(255, 255, 255, 0.9);
position : absolute;
bottom : 0;
padding : 0;
border-radius : 0 0 8px 8px;
width : 100%;
}
p.check_card_body_header_title {
font-weight : 500;
font-size : 13px;
margin-top : 5px;
margin-bottom : 3px;
text-align : center;
width : 100%;
}
p.check_card_body_header_title_2 {
font-weight : 500;
font-size : 11px;
margin-top : 5.5px;
margin-bottom : 5.5px;
text-align : center;
width : 100%;
}
@media screen and (min-width: 240px) {
.search_search_check_area2 {
width : 225px;
}
.search_search_check_area2.active {
height : 160px;
}
}
@media screen and (min-width: 315px) {
.search_search_check_area2 {
width : 300px;
}
}
@media screen and (min-width: 390px) {
.search_search_check_area2 {
width : 375px;
}
}
@media screen and (min-width: 465px) {
.search_search_check_area2 {
width : 450px;
}
.search_search_check_area2.active {
height : 80px;
}
}
@media screen and (min-width: 650px) {
.search_search_check_area2.active {
height : 85px;
}
.search_search_check_area1{
max-width : 480px;
}
.search_search_check_area2 {
width : 480px;
}
.check_card {
width : 70px;
}
.search_check_card_area{
width : 80px;
height: 80px;
}
.search_check_card {
width : 70px;
}
.check_card_body {
height : 70px;
}
.check_card_body_cover_image {
height : 70px;
width : 70px;
}
.check_card_body:hover {
transition : all 0.3s 0s ease;
box-shadow : 0 3px 6px rgba(0, 0, 0, 0);
transform : translateY(1px);
}
.check_card_body:active {
transition : all 0.3s 0s ease;
transform : translateY(2px);
}
.check_card_input:checked ~ .check_card_body:hover {
transform : translateY(1px);
}
.check_card_input:checked ~ .check_card_body:active {
transform : translateY(2px);
}
.check_card_body:before {
content : "";
display : inline-block;
width : 100%;
height : 100%;
position : absolute;
top : 0;
left : 0;
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0) inset;
z-index : 2;
border-radius : 8px;
transition : all 0.3s 0s ease;
}
.check_card_body:active:before {
content : "";
display : inline-block;
width : 100%;
height : 100%;
position : absolute;
top : 0;
left : 0;
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0.4) inset;
z-index : 2;
border-radius : 8px;
transition : all 0.3s 0s ease;
}
}
/*
***************************************カテゴリー絞り込みエリア***************************************
***************************************カテゴリー絞り込みエリア***************************************
***************************************カテゴリー絞り込みエリア***************************************
*/



/*
***************************************カテゴリー・並び替えボタン***************************************
***************************************カテゴリー・並び替えボタン***************************************
***************************************カテゴリー・並び替えボタン***************************************
*/
/*検索ヒット数*/
.search_order_hit_count {
width : 98%;
width : -webkit-calc(100% - 5px);
width : calc(100% - 5px);
vertical-align : top;
display : inline-block;
background-color: #fffefb;
border-radius : 8px;
transition : all 0.5s ease;
position : relative;
font-size : 14px;
color : #474747;
height : 100%;
text-align : center;
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0.2) inset;
margin : 2.5px;
}
.search_order_hit_count .search_order_select {
display : block;
padding : 10px 0;
}

/*カテゴリーボタン*/
.search_category_dropdown {
width : 48%;
width : -webkit-calc(50% - 5px);
width : calc(50% - 5px);
vertical-align : top;
display : inline-block;
background-color: #fffefb;
border-radius : 8px;
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0.3);
position : relative;
font-size : 14px;
color : #474747;
height : 100%;
text-align : center;
margin : 2.5px;
transform : translateY(0);
transition : all 0.2s 0s ease;
}
.search_category_dropdown .search_category_select {
cursor : pointer;
display : block;
padding : 10px 0;
}
.search_category_dropdown .search_category_select > i {
font-size : 13px;
color : #888;
cursor : pointer;
transition : all 0.3s ease-in-out;
float : right;
line-height : 20px;
padding : 0 5px;
position:absolute;
}
.search_category_dropdown:active {
background-color: #fffefb;
transition : all 0.2s 0s ease;
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0);
transform : translateY(1px);
}
.search_category_dropdown.active:hover, .search_category_dropdown.active {
box-shadow : 0 0 0 2px #8bccce;
background-color: #fffefb;
border-radius : 8px;
transition : transform 0.2s 0s ease;
}
.search_category_dropdown.active .search_category_select > i {
transform : rotate(-180deg);
line-height: 15px;
}

/*並び替え*/
.search_order_dropdown {
width : 48%;
width : -webkit-calc(50% - 5px);
width : calc(50% - 5px);
vertical-align : top;
display : inline-block;
background-color: #fffefb;
border-radius : 8px;
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0.3);
transition : all 0.3s ease;
position : relative;
font-size : 14px;
color : #474747;
height : 100%;
text-align : center;
margin : 2.5px;
transform : translateY(0);
}
.search_order_dropdown .search_order_select {
cursor : pointer;
display : block;
padding : 10px 0;
}
.search_order_dropdown .search_order_select > i {
font-size : 13px;
color : #888;
cursor : pointer;
transition : all 0.3s ease-in-out;
float : right;
line-height : 20px;
padding : 0 5px;
position: absolute;
}
.search_order_dropdown:active {
background-color: #fffefb;
transition : all 0.3s ease;
transform : translateY(1px);
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0);
}
.search_order_dropdown.active:hover, .search_order_dropdown.active {
box-shadow : 0 0 0 2px #8bccce;
background-color: #fffefb;
border-radius : 8px;
transition : transform 0.2s 0s ease;
}
.search_order_dropdown.active .search_order_select > i {
transform : rotate(-180deg);
line-height: 15px;
}
.search_order_dropdown .search_order_dropdown_menu {
position : relative;
background-color: #fffefb;
width : 100%;
left : 0;
margin-top : 0;
box-shadow : 0 1px 2px rgba(204, 204, 204, 1);
overflow : hidden;
display : none;
max-height : 144px;
overflow-y : auto;
z-index : 9;
border-radius : 0 0 8px 8px;
}
.search_order_dropdown .search_order_dropdown_menu li {
padding : 10px;
transition : all 0.2s ease-in-out;
cursor : pointer;
}
.search_order_dropdown .search_order_dropdown_menu {
padding : 0;
list-style : none;
}
.search_order_dropdown .search_order_dropdown_menu li:hover {
background-color: #f8fbf8;
}
.search_order_dropdown .search_order_dropdown_menu li:active {
background-color: #f8fbf8;
}
@media screen and (min-width: 335px) {
.search_order_hit_count {
width : 16%;
width : -webkit-calc(17% - 5px);
width : calc(17% - 5px);
}
.search_category_dropdown {
width : 40%;
width : -webkit-calc(41% - 5px);
width : calc(41% - 5px);
}
.search_order_dropdown {
width : 40%;
width : -webkit-calc(42% - 5px);
width : calc(42% - 5px);
}
}
@media screen and (min-width: 650px) {
.search_category_dropdown {
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0.3);
transition : all 0.3s 0s ease;
transform : translateY(0);
}
.search_category_dropdown .search_category_select > i {
transition : all 0.2s ease-in-out;
}
.search_category_dropdown:hover {
transition : all 0.3s 0s ease;
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0);
transform : translateY(1px);
}
.search_category_dropdown:active {
background-color: #fffefb;
transition : all 0.3s 0s ease;
transform : translateY(2px);
}
.search_category_dropdown.active {
box-shadow : 0 0 0 2px rgba(139, 204, 206, 1);
background-color: #fffefb;
border-radius : 8px;
transition : transform 0.2s 0s ease;
}
.search_category_dropdown:active.active {
box-shadow : 0 0 0 2px rgba(139, 204, 206, 0);
background-color: #fffefb;
border-radius : 8px;
transition : transform 0.2s 0s ease;
}
.search_category_select:before {
content : "";
display : inline-block;
width : 100%;
height : 100%;
position : absolute;
top : 0;
left : 0;
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0) inset;
z-index : 2;
border-radius : 8px;
transition : all 0.3s 0s ease;
}
.search_category_select:active:before {
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0.3) inset;
}
.search_order_dropdown {
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0.3);
transition : all 0.3s 0s ease;
transform : translateY(0);
}
.search_order_dropdown .search_order_select > i {
transition : all 0.2s ease-in-out;
}
.search_order_dropdown:hover {
transition : all 0.3s 0s ease;
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0);
transform : translateY(1px);
}
.search_order_dropdown:active {
background-color: #fffefb;
transition : all 0.3s 0s ease;
transform : translateY(2px);
}
.search_order_dropdown.active {
box-shadow : 0 0 0 2px rgba(139, 204, 206, 1);
background-color: #fffefb;
border-radius : 8px;
transition : transform 0.2s 0s ease;
}
.search_order_dropdown:active.active {
box-shadow : 0 0 0 2px rgba(139, 204, 206, 0);
background-color: #fffefb;
border-radius : 8px;
transition : transform 0.2s 0s ease;
}
.search_order_dropdown .search_order_dropdown_menu {
position : relative;
background-color: #fffefb;
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0);
}
.search_order_dropdown:before {
pointer-events : none;
content : "";
display : inline-block;
width : 100%;
height : 100%;
position : absolute;
top : 0;
left : 0;
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0) inset;
z-index : 20;
border-radius : 8px;
transition : all 0.3s 0s ease;
}
.search_order_dropdown:active:before {
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0.3) inset;
}
}
/*
***************************************カテゴリー・並び替えボタン***************************************
***************************************カテゴリー・並び替えボタン***************************************
***************************************カテゴリー・並び替えボタン***************************************
*/



/*
***************************************検索サイトカード***************************************
***************************************検索サイトカード***************************************
***************************************検索サイトカード***************************************
*/
.search_p_search_results_area {
width : 100%;
max-width : 855px;
margin :2px auto;
padding-bottom :10px;
overflow: hidden;
}
.search_p_card_area {
height : 220px;
width : 100%;
position : relative;
text-align : left;
transition : all 0.3s 0s ease;
}
@media screen and (min-width: 540px) {
.search_p_card_area {
height : 180px;
}
}
@media screen and (min-width: 950px) {
.search_p_card_area {
float : left;
width : 50%;
height : 220px;
}
.search_p_card_area .posting_site_card_main {
width : 97%;
width : -webkit-calc(100% - 10px);
width : calc(100% - 10px);
height : 210px;  
}
.posting_site_image img{
height: 210px;
position: absolute;
margin-left: -160px;
margin-top: -105px;
}
}
/*
***************************************検索サイトカード***************************************
***************************************検索サイトカード***************************************
***************************************検索サイトカード***************************************
*/



/*
***************************************ページネーションエリア***************************************
***************************************ページネーションエリア***************************************
***************************************ページネーションエリア***************************************
*/
.pagination_area {
margin : auto;
float : left;
width : 100%;
}
.pagination_next {
margin : 15px auto;
width : 99%;
width: -webkit-calc(100% - 6px);
width: calc(100% - 6px);
border-radius : 8px;
background-color: #fffefb;
}
.pagination_next a {
width : 100%;
margin : auto;
display : block;
padding-top : 15px;
padding-bottom : 15px;
text-align : center;
font-size : 18px;
border-radius : 8px;
box-shadow : 0 3px 7px -1px rgba(0, 0, 0, 0.5);
transition : all 0.3s 0s ease;
transform : translateY(0);
}
.pagination_next a:hover {
box-shadow : 0 3px 7px -1px rgba(0, 0, 0, 0.5);
transition : all 0.3s 0s ease;
transform : translateY(0);
}
.pagination_next a:active {
box-shadow : 0 3px 7px -1px rgba(0, 0, 0, 0);
transition : all 0.3s 0s ease;
transform : translateY(1px);
}
.pagination_next2 {
width : 100%;
text-align : center;
}
ul.page-numbers li {
display : inline-block;
text-align : center;
font-size : 15px;
border-radius : 8px;
transition : all 0.3s 0s ease;
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0) inset;
margin : 3px;
background-color: #fffefb;
}
ul.page-numbers li span {
display : block;
font-weight : bold;
width : 20px;
height : 20px;
border-radius : 8px;

padding : 1px 0 0 0;
}
ul.page-numbers li .current {
padding-top : 5px;
width : 35px;
height : 30px;
color : #689a9c;
}
ul.page-numbers li a {
display : block;
font-weight : bold;
padding-top : 5px;
width : 35px;
height : 30px;
border-radius : 8px;
box-shadow : 0 3px 7px -1px rgba(0, 0, 0, 0.5);
transition : all 0.3s 0s ease;
transform : translateY(0);
}
ul.page-numbers li a:active {
box-shadow : 0 3px 7px -1px rgba(0, 0, 0, 0);
transition : all 0.3s 0s ease;
transform : translateY(1px);
}
@media screen and (min-width: 650px) {
.pagination_next {
width: 98%;
width: -webkit-calc(100% - 10px);
width: calc(100% - 10px);
box-shadow : 0.5px 2px 6px 2px rgba(0, 0, 0, 0) inset;
transition : all 0.3s 0s ease;
transform : translateY(0);
}
.pagination_next:hover {
transition : all 0.3s 0s ease;
transform : translateY(1px);
}
.pagination_next:active {
transition : all 0.3s 0s ease;
box-shadow : 0.5px 2px 6px 2px rgba(0, 0, 0, 0.3) inset;
transform : translateY(2px);
}
.pagination_next a {
border-radius : 8px;
box-shadow : 0 3px 7px -1px rgba(0, 0, 0, 0.5);
transition : all 0.3s 0s ease;
transform : translateY(0);
}
.pagination_next a:hover {
box-shadow : 0 3px 7px -1px rgba(0, 0, 0, 0);
transition : all 0.3s 0s ease;
transform : translateY(0);
}
.pagination_next a:active {
box-shadow : 0 3px 7px -1px rgba(0, 0, 0, 0);
transition : all 0.3s 0s ease;
transform : translateY(0);
}
ul.page-numbers li:active {
transition : all 0.3s 0s ease;
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0.3) inset;
}
ul.page-numbers li a {
box-shadow : 0 3px 7px -1px rgba(0, 0, 0, 0.5);
transition : all 0.3s 0s ease;
transform : translateY(0);
}
ul.page-numbers li a:hover {
box-shadow : 0 3px 7px -1px rgba(0, 0, 0, 0);
transition : all 0.3s 0s ease;
transform : translateY(1px);
}
}
/*
***************************************ページネーションエリア***************************************
***************************************ページネーションエリア***************************************
***************************************ページネーションエリア***************************************
*/



/*
***************************************検索失敗***************************************
***************************************検索失敗***************************************
***************************************検索失敗***************************************
*/
.no_hit_word {
text-align : center;
width : 100%;
margin : 10px auto 5px;
line-height : 25px;
}
.no_hit_word img {
margin : 40px auto 0;
width : 50%;
max-width : 250px;
opacity : 0.8;
color : #ddd;
}
.no_hit_word h2 {
font-size : 23px;
line-height : 30px;
margin : 20px auto 0;
color : #dfdfdf;
}
.no_hit_word h3 {
font-size : 20px;
line-height : 30px;
margin : 4px auto 40px;
color : #dfdfdf;
}
.no_hit_word_text01 {
margin : 10px 5px;
padding : 10px;
background-color : rgba(245, 245, 245, 0.8);
border-radius : 8px;
}
.no_hit_word_text02 {
margin : 10px 5px;
padding : 10px 5px 15px;
background-color : rgba(245, 245, 245, 0.8);
border-radius : 8px;
}
.no_hit_word p {
line-height : 28px;
font-size : 18px;
}
.no_hit_word p a {
color : #2f6469;
}
.no_hit_word p a:hover {
color : #3b9491;
}
.no_hit_word p a:active {
color : #2d615f;
}
/*
***************************************検索失敗***************************************
***************************************検索失敗***************************************
***************************************検索失敗***************************************
*/



/*
***************************************archiveページ用***************************************
***************************************archiveページ用***************************************
***************************************archiveページ用***************************************
*/
h1.archive_hit_title {
text-align : center;
font-size : 14px;
margin : 10px auto 5px;

}
h1.archive_hit_title span {
font-size : 19px;
vertical-align : -8%;
}
p.archive_sub_title {
text-align : center;
font-size : 14px;
margin : 0 auto 10px;
}
.archive_hit_title_area {
text-align : center;
margin : auto;
color: #7a7a7a;
}
.archive_hit_title_area_hp {
width : fit-content;
display : inline-block;
margin-left : 0;
}
@media screen and (min-width: 330px) {
.archive_hit_title_area_hp {
margin-left : 53px;
}
}

@media screen and (min-width: 650px) {
h1.archive_hit_title {
text-align : center;
font-size : 15px;
margin : 16px auto 5px;
}
h1.archive_hit_title span {
font-size : 23px;
vertical-align : -8%;
}
p.archive_sub_title {
text-align : center;
font-size : 16px;
margin : 0 auto 10px;
}
.archive_hit_title_area_hp {
margin-left : 20px;
}
}
/*
***************************************archiveページ用***************************************
***************************************archiveページ用***************************************
***************************************archiveページ用***************************************
*/



/*
***************************************特集アーカイブ用***************************************
***************************************特集アーカイブ用***************************************
***************************************特集アーカイブ用***************************************
*/
h1.special_hit_title {
font-size : 20px;
text-align : center;
margin : 12px auto 5px;
}
.special_search_foorm_area {
padding : 10px 5px 21px;
}
.special_card_main {
display : flex;
width : 100%;
padding : 15px 10px 0 0;
align-items : flex-end;
box-shadow: 0 3px 7px -1px rgb(0 0 0 / 0.4);
position:relative;
width : -webkit-calc(100% - 5px);	
width : calc(100% - 5px);
padding : 5px 0px;
margin : 5px auto;
border-radius : 8px;
transition: all 0.3s 0s ease;
transform: translateY(0);
background-color: #fffefb;
}
.special_card_main a{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
border-radius: 8px;
transition: all 0.3s 0s ease;
box-shadow : 0.5px 2px 6px rgb(0, 0, 0, 0) inset;
}
.special_card_main:active {
transform: translateY(1px);
box-shadow: 0 3px 7px -1px rgb(0 0 0 / 0);
transition: all 0.3s 0s ease;
}
.special_img_area {
position : relative;
background-size : cover;
flex-basis : 40%;
text-align : center;
flex-direction : row;
margin : 0 5px;
}
.special_img_area img {
width : 100%;
max-width : 200px;
min-width : 110px;
margin : auto;
text-align : center;
border-radius : 5px;
}
.special_description_area {
min-height : 120px;
position : relative;
background-size : cover;
flex-basis : 100%;
padding: 5px 10px 0;
border-radius : 8px;
overflow : hidden;
border : #ababab solid 1px;
margin-right:5px;
}
.special_description_area h4 {
font-size : 17px;
line-height : 1.5;
margin : 5px 0;
white-space : nowrap;
overflow : hidden;
text-overflow : ellipsis;
color: #1a3c8d;
}
.special_description_area h5 {
text-transform : uppercase;
font-size : 12px;
font-weight : 300;
color : #a2a2a2;
margin : 5px 0 0;
white-space : nowrap;
overflow : hidden;
text-overflow : ellipsis;
}
.special_description_area h5:after {
content : "";
position : absolute;
height : 2px;
background-color: #e0e1e1;
width: 99%;
top : 57px;
left : 8px;
}
.special_description_area p {
position: relative;
margin: 10px 0;
overflow: hidden;
font-size: 15px;
font-size: 1.5rem;
line-height: 1.4;
height: auto;
min-height: 84px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.special_archive_title_area, .search_hit_title_area {
text-align : center;
margin : auto;
color: #7a7a7a;
}
.special_archive_title_area h1, .search_hit_title_area h1 {
display : inline-block;
margin: 12px auto 5px;
}
.title_img {
display:none;
}
@media screen and (min-width: 335px) {
.sp_dropdown {
width : 40%;
width : -webkit-calc(40% - 8px);
width : calc(42% - 8px);
}
.special_archive_title_area h1, .search_hit_title_area h1 {
display : inline-block;
margin: 0 0 23px 44px;
}
.search_hit_title_area h1 {
display: inline-block;
margin: 0 0 23px 51px;
}

.title_img {
width: 55px;
margin: 5px 3px 6px;
display: inline-block;
}
}

@media screen and (min-width: 650px) {
h1.special_hit_title {
font-size : 23px;
text-align : center;
margin : 25px auto 10px;
}
.sp_dropdown {
width : 40%;
width : -webkit-calc(41% - 5px);
width : calc(41% - 5px);
}
.special_card_main {
margin : 5px;
}
.special_card_main_first{
width : 98%;
width : -webkit-calc(100% - 10px);	
width : calc(100% - 10px);
padding : 15px;
background-repeat: repeat;
background-size: 100%;
background-position: center;
background-blend-mode: lighten;
}
.special_card_main_sub {
float : left;
width : 48%;
width : -webkit-calc(50% - 10px);
width : calc(50% - 10px);
padding : 5px 1px;
}
.special_card_main:hover {
transform: translateY(1px);
box-shadow: 0 3px 7px -1px rgb(0 0 0 / 0);
transition: all 0.3s 0s ease;
}
.special_card_main:active a{
transition: all 0.3s 0s ease;
box-shadow : 0.5px 2px 6px rgb(0, 0, 0, 0.6) inset;
}

.special_card_main_first .special_description_area p {
height: auto;
font-size: 17px;
font-size: 1.7rem;
margin: 10px 0 0;
}
.special_card_main_first .special_img_area img {
transform: rotate(2deg);
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
}

.special_card_main_first .special_description_area {
padding : 15px;
background-color:rgba(249 249 249 / 95%);
max-width: 450px;
}

.special_card_main_first .special_description_area h4 {
font-size: 23px;
line-height: 1.2;
margin: -5px 0 5px;
}
.special_archive_title_area h1, .search_hit_title_area h1 {
margin : 0 0 18px 30px;
}
.title_img {
width: 55px;
margin: 5px 3px 6px;
display: inline-block;
}
.special_card_main_first .special_description_area h5:after {
top : 57px;
left : 13px;
}

.special_card_main_first::before {
content: '';
position: absolute;
top: 5px;
bottom: 5px;
left: 5px;
right: 5px;
background: inherit;
filter: blur(5px);
z-index: -1;
}

}
/*
***************************************特集アーカイブ用***************************************
***************************************特集アーカイブ用***************************************
***************************************特集アーカイブ用***************************************
*/



/*
***************************************ランダム表示エリア用***************************************
***************************************ランダム表示エリア用***************************************
***************************************ランダム表示エリア用***************************************
*/
/*！！！！ランダム表示エリアタイトル！！！！！*/
.random_title_area_1{
text-align: center;
margin: 0 auto 10px;
}
.random_title_area_2{
width: fit-content;
display: inline-block;
color: #7a7a7a;
}
h1.random_title{
text-align: center;
font-size: 19px;
margin: 10px auto 5px;
}
p.random_sub_title {
text-align: center;
font-size: 14px;
margin: 0 auto 10px;
}
.random_title_img {
display:none;
}
@media screen and (min-width: 330px){
.random_title_img {
width: 60px;
margin: auto 0 3px -4px;
display: inline-block;
}
.random_title_area_2{
margin-left:50px;
}
}
@media screen and (min-width: 650px){
h1.random_title{
font-size: 23px;
margin: 16px auto 5px;
}
p.random_sub_title {
font-size: 16px;
margin: 0 auto 10px;
}
.random_title_img {
width: 75px;
margin: auto 0 3px -4px;
display: inline-block;
}
.random_title_area_2{
margin-left:60px;
}
}
/*！！！！ランダム表示エリアタイトル！！！！！*/

/*！！！！ランダム表示エリア更新ボタン！！！！！*/
.ranking_category_next0 {
width : 90px;
margin: -6px auto 13px;
}
.ranking_category_next02 {
border-radius : 8px;
height : 35px;
width : 99%;
background-color: #fffefb;
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0.3);
margin : auto;
position : relative;
transition : all 0.3s 0s ease;
}
.ranking_category_next02:active{
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0);
transition : all 0.3s 0s ease;
}
.ranking_category_next0 p {
text-align: center;
font-size: 17px;
padding: 7px;
transition: all 0.3s 0s ease;
}
.ranking_category_next1 p {
text-align: center;
font-size: 18px;
padding: 14px;
transition: all 0.3s 0s ease;
}
.ranking_category_next02 a {
position : absolute;
top : 0;
left : 0;
height : 100%;
width : 100%;
z-index : 100;
transition : all 0.3s 0s ease;
}
@media screen and (min-width: 650px){
.ranking_category_next0 {
width : 100px;
}

.ranking_category_next02 {
height : 40px;
}

.ranking_category_next0 p {
font-size: 18px;
padding: 9px;
}

.ranking_category_next02:hover {
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0.0);
}
.ranking_category_next02::after {
content : "";
position : absolute;
top : 0;
right : 0;
bottom : 0;
left : 0;
transition : all 0.3s 0s ease;
border-radius : 8px;
}

.ranking_category_next02:active::after{
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0.6) inset;
z-index : 20;
}
}
/*！！！！ランダム表示エリア更新ボタン！！！！！*/

/*
***************************************ランダム表示エリア用***************************************
***************************************ランダム表示エリア用***************************************
***************************************ランダム表示エリア用***************************************
*/