@charset "UTF-8";


/* 各記事と書籍セクション */
/* PC用の設定 */
@media (min-width: 610px) {
    .page_thumb {
        margin: 0 0 15px 0;
        overflow: auto;
        display: flex; /* 2カラムを良い感じに表示するための設定 */
        position: relative; /* .page_thumb a の基準 */
        background: #ffff;
        box-shadow:rgba(238, 238, 238, 0.509804) 9px 9px 10px -4px;
        -webkit-box-shadow:rgba(238, 238, 238, 0.509804) 9px 9px 10px -4px;
        -moz-box-shadow:rgba(238, 238, 238, 0.509804) 9px 9px 10px -4px;
    }
    .book_card {
        margin: 0 0 15px 0;
        padding: 5px 5px 5px 5px;
        overflow: auto;
        display: flex; /* 2カラムを良い感じに表示するための設定 */
        position: relative; /* .book_card a の基準 */
        background: #ffff;
        box-shadow:rgba(238, 238, 238, 0.509804) 9px 9px 10px -4px;
        -webkit-box-shadow:rgba(238, 238, 238, 0.509804) 9px 9px 10px -4px;
        -moz-box-shadow:rgba(238, 238, 238, 0.509804) 9px 9px 10px -4px;
    }
    .thumbnail_section {
        width: 200px;
        margin: 0 20px 0 0;
        float: left;
    }
    .thumbnail_image {
        width: 100%;
    }
    .thumbnail_description {
        width: 75%;
        float: right;
        margin: 0 20px 0 0;
    }
    .thumb_title {
        color: #333333;
        padding: 0; /* 共通styleのh2での設定をキャンセル */
        margin: 0; /* 共通styleのh2での設定をキャンセル */
    }
    .abstract {
        color: #333333;
        font-size: 13px;
        margin: 0; /* 共通styleのpでの設定をキャンセル */
        /*clear: left;*/
    }
    .hidden_PC_and_tablet {
        display: none;
    }
    .table_pict {
        /* style_frame.cssの.pictだとスマホ表示時にfloat:leftが邪魔をするので新作成 */
        float: left;
        height: 20px;
        margin: 2px 5px 2px 0;
    }
    .book_description {
        width: 65%;
        float: right;
        margin: 0 20px 0 0;
        padding-bottom: 45px;
    }
    .pages_button{
        /* 書籍ページの表紙画像に重ね合わせるページ詳細を確認するボタン */
        position: absolute; 
        bottom: 0; 
        right: 0; 
        width: 60px; 
        height: auto;
    }
    .colophon {
        /* 書籍ページの奥付テーブル */
        position: absolute; 
        right: 10px;
        bottom: 10px;
        width: fit-content;
    }
    th {
        color: #ffff;
        background: gray;
        padding: 5px;
    }
    td {
        color: #333333;
        background: #ffff;
        padding: 5px;
    }
    td a img {
        float:left;
    }
}
/* タブレット・スマホ用の設定 */
@media (max-width: 609px) {
    .page_thumb {
        margin: 0 0 15px 0;
        overflow: auto;
        position: relative; /* .page_thumb a の基準 */
        background: #ffff;
    }
    .book_card {
        margin: 0 0 15px 0;
        overflow: auto;
        position: relative; /* .book_card a の基準 */
        background: #ffff;
    }
    .book_card .thumbnail_image {
        width: 60%;
    }

    .thumbnail_section {
        text-align: center;
        margin: 5px;
    }
    .thumbnail_image {
        width: 100%;
    }
    .thumbnail_description {
        width: 100%;
    }
    .thumb_title {
        color: #333333;
        padding: 0; /* 共通styleのh2での設定をキャンセル */
        margin: 0 10px; /* 共通styleのh2での設定をキャンセル */
    }
    .abstract {
        color: #333333;
        font-size: 13px;
        margin: 0 10px; /* 共通styleのpでの設定をキャンセル */
    }
    .hidden_smartphone {
        display: none;
    }
    .table_pict {
        /* style_frame.cssの.pictだとスマホ表示時にfloat:leftが邪魔をするので新作成 */
        height: 20px;
        margin: 2px auto;
    }
    .pages_button{
        /* 書籍ページの表紙画像に重ね合わせるページ詳細を確認するボタン */
        position: absolute; 
        bottom: 0; 
        right: 20%; 
        width: 50px; 
        height: auto;
    }
    .colophon {
        /* 書籍ページの奥付テーブル */
        /* text-align: center; */
        margin: 0 auto;
        width: fit-content;
    }
    th {
        font-size: 12px;
        color: #ffff;
        background: gray;
        padding: 5px;
    }
    td {
        font-size: 12px;
        color: #333333;
        background: #ffff;
        padding: 5px;
    }
}

.page_thumb:hover {
    background-color: #f8f8f8;
}
.page_thumb:hover .thumbnail_image {
    opacity: 0.4;
    background: #ffff;
}
.page_thumb:hover img {
    opacity: 50%;
}
.page_thumb:hover .date_scrip {
    color: #8f8f8f;
}
.page_thumb:hover .thumb_title {
    color: #8f8f8f;
}
.page_thumb:hover .abstract {
    color: #8f8f8f;
}
.page_thumb a {
    /* .page_thumbを基準にすることで、aタグが要素全体を覆うようにする　https://web-den.com/wrapping-atag */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* thumbnail画像にもリンクをつけるため */
}
.topic {
    font-size: 9px;
    color: #333333;
    background: #ffff;
    padding: 5px;
    border: 1px solid #e3e3e3;
    border-radius: 4px 4px 4px 4px;
    margin: 1px 2px;
    display: inline-block;
}
label > .topic:hover {
    background: #333333;
    color: #fff;
    border: 1px solid #333333;
    text-shadow: 0 0 1px rgba(0,0,0,.7);   
    display: inline-block;
}
.filtering_button:checked + .topic {
    background: #333333;
    color: #fff;
    border: 1px solid #333333;
    text-shadow: 0 0 1px rgba(0,0,0,.7);   
    display: inline-block;
}
.filter_logical_operator {
    /* フィルタリングの論理演算子{AND, OR}を設定するラジオボタン */
    padding: 2px 5px;
    font-size: 11px;
    margin: 0;
    display: inline-block;
    width: 35px;
    text-align: center;
}
input[name="and_or"]:checked + .filter_logical_operator {
    /* フィルタリングの論理演算子{AND, OR}を設定するラジオボタンが選択された時 */
    background: #333333;
    border-color: #333333!important;
    color: #ffff;
}
input#radio-and[name="and_or"] + label{
    border: 1px solid #e3e3e3; border-radius: 4px 0 0 4px;
}
input#radio-or[name="and_or"] + label{
    border: solid #e3e3e3; border-width: 1px 1px 1px 0;border-radius: 0 4px 4px 0;
}

/* shelfの書籍カード設定 */
.filter_card {
    margin: 0 0 15px 0;
    padding: 5px 5px 5px 5px;
    overflow: auto;
    background: #ffff;
    box-shadow:rgba(238, 238, 238, 0.509804) 9px 9px 10px -4px;
    -webkit-box-shadow:rgba(238, 238, 238, 0.509804) 9px 9px 10px -4px;
    -moz-box-shadow:rgba(238, 238, 238, 0.509804) 9px 9px 10px -4px;
}
.colophon td {
    /* 奥付tableの各td要素 */
    font-size: 10px;
    text-align: right;
    padding: 0 5px 0;
}
.book_image-wrapper{
    /* サムネイル画像と重ねるページ詳細画像(ボタン)をまとめるwrapper */
    width: 100%;
}
.book_image-stack{
    /* 表紙サムネイルとページ詳細画像(ボタン)の位置関係を調整するクラス !!.book_image_wraperと統合するとレイアウトが崩れるので統合せず、二重wrapperとするとこと!! */
    position:relative; 
    display: inline-block; 
    width: 100%
}
.book_thumbnail {
    /* 表紙のサムネイル画像 共通クラス.thumbnail_imageの補助 */
    border: 1px solid #e3e3e3; 
    height: auto; 
    display:block;
}
.amazon_button {
    background: rgb(81, 81, 81);
    padding: 1px 10px;
    border-radius: 15px;
    width: fit-content;
    height: 30px;
    display: inline-block;
}
.rakuten_button {
    background: rgb(252, 77, 77); 
    padding: 1px 10px; 
    border-radius: 15px; 
    width: fit-content; 
    height: 30px; 
    display: inline-block;
}

/* codeのindexページ設定 */
table {
    width: 100%;
}