/*
***************************************サイトカード共通部分***************************************
***************************************サイトカード共通部分***************************************
***************************************サイトカード共通部分***************************************
*/
.ad_type_b{
display: inline-block;
max-width: 500px;
}
.ad_type_b img{
width:  100%;
}
/*CSSの場所取らない問題解決の為の*/
.clearfix::after{
content: "";
clear: both;
display: block;
}
/*cardarea*/
.main_card_area{
float: left;
width:99.5%;
margin:auto;
padding:2px 0;
}

/* ***************************************カード全体と画像*************************************** */
.main_card{
width: 100%;
background-color: #fffefb;
margin:auto;
padding:5px;
border-radius: 8px;
box-shadow: 0 3px 5px -1px rgb(0 0 0 / 0.3);
transition: all 0.3s 0s ease;
transform: translateY(0);
}
.main_card:active {
box-shadow: 0 3px 5px -1px rgb(0 0 0 / 0);
transition: all 0.3s 0s ease;
transform: translateY(1px);
}
.main_card a {
position : absolute;
top : 0;
right : 0;
bottom : 0;
left : 0;
transition : all 0.3s 0s ease;
border-radius : 8px;
z-index : 20;
}
.card_main_img{
width:  100%;
}
.main_card img{
width:  100%;
padding: 0;
}
.main_card > img  {
width: 100%;
padding: 0;
border-radius: 8px 8px 0px 0;
}
/* ***************************************カード全体と画像*************************************** */


.main_card > figure  {
vertical-align: bottom;
position: relative;
}
.main_card > figure img {
width: 100%;
}
.main_card figcaption  {
background-color: #ffffffd9;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
color: #000;
padding: 3px 2px;
line-break: anywhere;
}

@media screen and (min-width: 650px) {
.top_area .main_card_area:first-of-type:first-child .main_card > figure img {
width: 100%;
}
.top_area .main_card_area:first-of-type:first-child .main_card > figure  {
width: 45%;
display: inline-block;
border-radius: 8px 0 0 8px;
padding: 0;
vertical-align: bottom;
position: relative;
}
}


/* ***************************************PRアイコン*************************************** */
.main_card_pop,
.main_card_pop2,
.main_card_pop3,
.main_card_pop4{
position: absolute;
width:77px;
font-size: 13px;
padding:5px 0 5px 5px;
text-align: center;
color: #fff;
top:0;
right: 0;
background-size: cover;
z-index:50;
}
.main_card_pop{
background-image: url(https://webbura.com/img/main/recommened_seal.png);
}
.main_card_pop2{
background-image: url(https://webbura.com/img/main/new_seal.png);
}
.main_card_pop3{
background-image: url(https://webbura.com/img/main/random_seal.png);
}
.main_card_pop4{
background-image: url(https://webbura.com/img/2023/07/002.png);
}
/* ***************************************PRアイコン*************************************** */

/* ***************************************説明文エリア*************************************** */
/*説明エリア全体*/
.card_info{
width:auto;
height:180px;
}
/*タイトルエリア*/
.card_site_title{
position: relative;
width:100%;
height:60px;
margin:0;
}
.main_card h4 {
position: absolute;
text-align:center;
font-size: 17px;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width: 100%;
margin:0;
color: #1a3c8d;
}
.main_card h4 span {
font-size: 13px;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: normal;
}
/*抜粋エリア*/
.card_info .card_site_description{
margin: auto;
font-size: 15px;
font-size: 1.5rem;
line-height: 1.4;
color: #6f6e6e;
padding: 0 0.3rem;
height: auto;
max-height: 95px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.card_info::after {
content: "";
height: 95px;
width: 98%;
width: -webkit-calc(100% - 10px);
width: calc(100% - 10px);
display: block;
bottom: 32px;
position: absolute;
z-index: -10;
left: 50%;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
border: 1px solid #f7f7f7;
background-color: rgb(251 251 251);
}
/*カテゴリーアイコン*/
.card_category_icon{
position: absolute;
white-space: nowrap;
text-align: center;
width: 100%;
margin: 5px auto 0;
bottom: 0;
left: 0;
}
.card_category_icon img{
width:14.4%;
max-width:32px;
border-radius: 0;
}
/* ***************************************説明文エリア*************************************** */
@media screen and (min-width: 350px) {
.main_card_area {
width:50%;
padding:3px;
}
}
@media screen and (min-width: 650px) {
.main_card_area {
width:33.33%;
padding:5px;
}
.main_card:hover {
box-shadow: 0 3px 5px -1px rgb(0 0 0 / 0);
transition: all 0.3s 0s ease;
transform: translateY(1px);
}
.main_card a:active {
box-shadow : 0.5px 2px 6px rgb(0, 0, 0, 0.6) inset;
}
}
/*
***************************************サイトカード共通部分***************************************
***************************************サイトカード共通部分***************************************
***************************************サイトカード共通部分***************************************
*/


/*
***************************************TOPページのみで使用***************************************
***************************************TOPページのみで使用***************************************
***************************************TOPページのみで使用***************************************
*/
/*TOPカード表示エリア全体 */
.top_recommended_new_main{
width: 99%;
max-width: 750px;
margin: 10px auto 0;
padding: 5px 2px;
}
/*おすすめ、新着、ランダム各リンクボタン表示エリア*/
.main_card_next_select_area01{
float: left;
width:100%;
margin:auto;
padding:6px 0;
white-space: nowrap;
text-align: center;
}

/*おすすめ、新着、ランダム各リンクボタン*/
.main_card_select_button{
height:50px;
background-color: #fffefb;
margin: 0px auto 10px; 
border-radius: 8px;
box-shadow: 0 3px 5px -1px rgb(0 0 0 / 0.3);
transition: all 0.3s 0s ease;
transform: translateY(0);
}
.main_card_select_button:active {
box-shadow: 0 3px 5px -1px rgb(0 0 0 / 0);
transition: all 0.3s 0s ease;
transform: translateY(1px);
}
.main_card_next_select_area01 .button_type_01,
.main_card_next_select_area01 .button_type_02{
display: block;
width: 99%;
max-width: 709px;
}
.main_card_select_button a{
position : absolute;
top : 0;
right : 0;
bottom : 0;
left : 0;
z-index : 50;
transition : all 0.3s 0s ease;
border-radius : 8px;
z-index : 20;
}
.main_card_select_button p{
position: absolute;
text-align:center;
font-size: 18px;
line-height: 1.2;
top:50%;
left:50%;
transform:translate(-50%,-50%);
display: inline-block;
}
.main_card_select_button img{
width: 75px;
margin: auto 0 3px -4px;
display: inline-block;
}

@media screen and (min-width: 350px) {
.top_recommended_new_main{
width: 100%;
max-width: 500px;
padding: 5px 0;
}
}
@media screen and (min-width: 450px) {
.main_card_select_button{
margin: 0 auto 5px; 
}
.main_card_next_select_area01 .button_type_01{
display: inline-block;
width: 49%;
}
}
@media screen and (min-width: 650px) {
.top_recommended_new_main{
max-width: 720px;
}
.main_card_select_button:hover {
box-shadow: 0 3px 5px -1px rgb(0 0 0 / 0);
transition: all 0.3s 0s ease;
transform: translateY(1px);
}
.main_card_select_button a:active {
box-shadow : 0.5px 2px 6px rgb(0, 0, 0, 0.6) inset;
}
.main_card_select_button p {
transition: all 0.3s 0s ease;
}
.main_card_select_button:active p {
transform: translate(-50%,-40%);
}

.top_area .main_card_area:first-of-type {
width:100%;
display: inline-block;
text-align: center;
}
.top_area .main_card_area:first-of-type:first-child img{
width:  45%;
display: inline-block;
border-radius: 8px 0 0 8px;
}
.top_area .main_card_area:first-of-type .card_info{
width: 54%;
display: inline-block;
padding: 0 0 0 5px;
height: 190px;
position: relative;
}
.top_area .main_card_area:first-of-type .card_info::after {
bottom: 32px;
}
.top_area .main_card_area:first-of-type .card_category_icon img{
width:8.5%;
}
.top_area .main_card_area:first-of-type .card_site_description{
text-align: left;
}
.top_area .main_card_area:first-of-type .card_site_title {
margin: 0 0 5px;
}
	
.top_area .main_card_area:first-of-type .card_site_title h4{
font-size: 19px;
line-height: 1.2;
font-weight: 500;
top: 50%;
}
.top_area .main_card_area:first-of-type .card_site_title span{
font-size: 15px;
font-weight: 500;
}
}
@media screen and (min-width: 700px) {
.top_area .main_card_area:first-of-type .card_site_title h4{
top: 30%;
}
}
/*
***************************************TOPページのみで使用***************************************
***************************************TOPページのみで使用***************************************
***************************************TOPページのみで使用***************************************
*/


/*
***************************************特集ページ・固定ページのみで使用***************************************
***************************************特集ページ・固定ページのみで使用***************************************
***************************************特集ページ・固定ページのみで使用***************************************
*/
/*記事内、Point内、サイトカード表示エリア全体 */
.special_page_card_area {
width: 99%;
max-width: 750px;
margin: 10px auto;
padding: 15px 2px 30px;
background-color: #a8a8a825;
}
/*記事内、Point内、サイトカード */
.special_page_card_area .main_card{
max-width: 250px;
width: 100%;
}
.special_page_card_area .main_card_area {
width:100%;
margin:auto;
padding:2px 0;
}


@media screen and (min-width: 455px) {
.special_page_card_area .main_card{
width: 98%;
}
.special_page_card_area{
width: 100%;
padding: 20px 0 30px;
}
.special_page_card_area .main_card_area {
width:50%;
padding:3px;
}
.card_01 .main_card_area {
width:50%;
margin:auto;
padding:5px 0;
}
.card_00 .main_card_area {
width:100%;
margin:auto;
padding:5px 0;
}
.card_00 .main_card {
max-width: 300px;
}


}
@media screen and (min-width: 700px) {
.special_page_card_area{
max-width: 750px;
}
.special_page_card_area .main_card{
max-width: 600px;
}
.special_page_card_area .main_card_area {
width:100%;
display: inline-block;
text-align: center;
}
/*.special_page_card_area .main_card_area img{
width:  45%;
display: inline-block;
}*/
.special_page_card_area .main_card > img {
border-radius: 8px;
margin-bottom:4px;
}

.special_page_card_area .main_card > figure {
width: 45%;
display: inline-block;
border-radius: 8px 0 0 8px;
padding: 0;
vertical-align: bottom;
position: relative;
}
	
.special_page_card_area .main_card_area .card_info{
width: 54%;
display: inline-block;
padding: 0 0 0 5px;
height: 190px;
position: relative;
}
.special_page_card_area .main_card_area .card_info::after {
bottom: 32px;
}
.special_page_card_area .main_card_area .card_category_icon img{
width:8.5%;
}
.special_page_card_area .main_card_area .card_site_description{
text-align: left;
}
.special_page_card_area .main_card_area .card_site_title {
margin: 0 0 5px;
}
}
/*
***************************************特集ページ・固定ページのみで使用***************************************
***************************************特集ページ・固定ページのみで使用***************************************
***************************************特集ページ・固定ページのみで使用***************************************
*/