@charset "utf-8";
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2017/07/09, 18:46:21
    Author     : yutopia
    2020/09/28 kazanek changed "images"id to class
    2021/07/25 kazanek changed "@media" for mobile & small screen(screen max-width, responsive image size etc.)
    2021/08/30 kazanek changed "ul" margin-left 20->30
    2022/01/10 kazanek added "@media .photo"
    2022/03/18 kazanek changed ".revnamelong",".revname" nowrap
    2023/07/02 kazanek added ".photoblock2" for centering photoblock
    2024/03/06 kazanek added ".imagecont .tentsuki"(no text-indent)
    2024/09/18 kazanek added ".prereview .tentsuki" & affiliate gridstyle
    2025/12/26 kazanek edited affiliate area; adjusted photoblock / photoblock2; reset mobile breakpoints

*/

html, body, div, header, nav, ul {
    margin: 0;
    padding: 0;
}

/*横スクロール防止*/
html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}

img {
    max-width: 100%;
    height: auto;
}
/**/

body {
    font-family: 'Noto Sans Japanese',  sans-serif;
    font-size: 12pt;
    font-style: normal;
    background-color: #FFFFFF;
    color: #000000;
    margin: 0;
    width: 100%;
    -webkit-text-size-adjust: 100%;
}

a {
    text-decoration: none;
}

a:link {
    color: #6666FF;
}

a:visited {
    color: #c40026;
}

a:active {
    color: #ffff00;
}

a:hover {
    color: #ffff00;
}

blockquote {
    border: solid;
    border-color: #000000;
    border-width: 0pt;
    padding: 5px;
    font-style:oblique;
}

#header a{
    color: #666666;
    font-size: 90%;
    font-weight: 800;
}

#header table {
    width: 99%;
    border: 0px;
    background-color: #EEEEEE;
    box-shadow:0px 0px 5px 3px rgba(0, 0, 0, 0.2) inset;
    border-style: outset;
    border-color: black;
    border: transparent;
    line-height: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    padding: 0px;
    font-size: 9pt;
}

#header table tbody {
    border: 0px;
    text-align: center;
}

#header table tbody tr {
    text-align: center;
    border: 0px;
}

#header table tbody tr td {
    font-weight: bolder;
    font-size: small;
    padding: 0px;
    border: 0px;
    width: 10%;
}

/*                    */

#maintitle {
    width: calc(100% - 800px);
    text-align: right;
    margin-right: 80px;
    margin-left: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

/*                    */

#main {
    width: calc(100% - 2 * 85px);
    border: solid 1px;
    box-shadow: 0.5em 0.5em 0.5em 0 #696969;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    font-weight: 200;
}

#main hr {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3em;
    margin-bottom: 3em;
}


#interviewer {
    align-self: flex-end;
    margin-right: 20px;
    margin-top: 1em;
    margin-bottom: 1em;
}


.images {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.image1 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 20px;
    width:100%;
}

.image1 ul {
    margin-left: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.image1 li {
    list-style-image: url(../images/cursor.gif);
    line-height: 150%;
}

.image1left {
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    align-items: flex-start;
    width: auto;
    padding-left: 20px;
    padding-top: 0px;
}

.image1right {
    display: flex;
    flex-direction: column;
    flex-basis: auto;
    align-items: flex-end;
    width: 100%;
    padding-right: 20px;
    padding-top: 0px;
}

.image2left {
    display: flex;
    flex-direction: column;
    flex-basis: auto;
    align-items: flex-start;
    width: 100%;
    padding-left: 20px;
    padding-top: 0px;
}

.image2right {
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    align-items: flex-end;
    width: auto;
    padding-right: 20px;
    padding-top: 0px;
}

.image1booktitle {
    background-image: url(../images/back-bar.gif);
    font-size: x-large;
    font-weight: normal;
    color: #FF0000;
    width: 99%;
}

.imagecont{
    padding: 10px;
    width: 90%;
    border-style: solid;
    border-width: 1pt;
    border-color: #000000;
    align-self: center;
}

.prereview{
    width: 90%;
    align-self: center;
    margin-bottom: 2em;
}

.history {
    display:flex;
    flex-direction: row;
    align-items: flex-start;
    margin-top: 3em;
    margin-left: 1em;
    margin-right: 1em;
    padding-left: 1em;
    width:100%;
}

.himage{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-basis: auto;
    margin-top: 2em;
    width: 400px;
}

.hhist{
    flex-direction: row;
    flex-basis: auto;
    align-items: flex-end;
    margin: 2em;
    width:calc(100% - 400px - 10em);
}

.histtitle {
    display: flex;
    background-image: url(../images/back-bar.gif);
    font-size: x-large;
    font-weight: bolder;
    margin-left: 0em;
    margin-right:auto;
    color: #FF0000;
}

.hhist ul {
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
}

.hhist li {
    list-style-image: url(../images/cursor.gif);
    line-height: 150%;
}

_:-ms-lang(x), .imagecont {
    max-width:600px;
}

.imagecont p {
    text-indent: 1em;
    margin:0px;
    line-height: 150%;
}

.prereview p {
    text-indent: 1em;
    margin:0px;
    line-height: 150%;
}
/* no indent*/
.imagecont .tentsuki {
    text-indent: 0em;
}
.prereview .tentsuki {
    text-indent: 0em;
}
/*****/

.ibright1 {
    text-align:right;
}

.ibleft1 {
    text-align:left;
}

.rowwrapper {
    width: 95%;
    font-weight: 300;
    line-height: 130%;
    margin-left: auto;
    margin-right: auto;
    padding:2pt;
    display: flex;
    align-items: flex-start;
}

.revnamelong {
    color: #333333;
    font-weight: bold;
    display:inline;
    white-space: nowrap;
    width: 6em;
}

.revname {
    color: #333333;
    font-weight: bold;
    display:inline;
    white-space: nowrap;
    width: 5em;
}


.revcomme {
    width:100%;
    text-indent:1em;
    display:inline;
}
.revcomme p {
    margin: 0px;
    padding: 0px;
}


.reviewer1 {
    color: #000000;
}
.reviewer2 {
    color: #660000;
}
.reviewer3 {
    color: #006633;
}
.reviewer4 {
    color: #CC3333;
}
.reviewer5 {
    color: #9900FF;
}
.reviewer6 {
    color: #0066CC;
}
.reviewer7 {
    color: #CC6600;
}
.reviewer8 {
    color: #CC0099;
}
.reviewer9 {
    color: #009977;
}

.spoiler {
    color: #FFFFFF;
}

/* アフィリエイトエリアの設定 */
.affiliate{
    width:95%;
    text-align:center;
    display:inline-block;
    margin: 20px auto 20px auto;
}

.affiliate table{/*古いページのため残す*/
    display:inline-block;
}
/** アフィリエイトの画像とAmazonロゴの表組み**/
.affiliate .image-grid {
    display: flex;
    flex-wrap: wrap; /* 折り返しあり */
    justify-content: center; /* 中央揃え */
    gap: 20px; /* 各ペアの間隔 */
    width: 95%; /* 横幅95% */
    margin: 20px auto; /* 上下マージン20pxで中央寄せ */
}

/* 書影とAmazonロゴのペア設定 */
.affiliate .image-pair {
    display: flex;
    flex-direction: column; /* 上下に並べる */
    align-items: center; /* 中央揃え */
    gap: 10px; /* 書影とAmazonロゴの間の隙間 */

}

/* 書影のスタイル */
.image-pair .main-img {
    width: 100px; /* 横幅を100pxに固定 */
    height: auto; /* 高さは元の比率に基づいて自動調整 */
}

/* Amazonロゴのスタイル */
.image-pair a img {
    width: 140px;/* Amazonロゴのサイズを固定 */
    height: auto;
}
/**ここまで**/

/* キャプション付き画像設定 */
/*photoblockは、左本文＋右寄せ画像　画像一つのとき利用　画像の順が逆転することに注意*/
.photoblock{
    text-align: start;
    margin:0px;
    padding:0px;
}
.photoblock::after{
    content:"";
    display:block;
    clear: both;
}

/*photoblock2は、本文の<p>のあとに使用　画像複数枚を中央揃え＆折り返しあり*/
.photoblock2{
    text-align: center;
    margin: auto 0;
    padding:10px;
    display: flex;          /* 追加 */
    justify-content: center;/* 追加 */
    gap: 10px;              /* 追加：写真間の隙間 */
    flex-wrap: wrap;        /* 追加：はみ出したら折り返し */
}
.photoblock2 .photo{
    float: none;          /* 右回り込み無効 */
    flex-basis: auto;     /* ★ 100%を潰す */
    margin: 5px;
}

/*photoはblock,block2共用　画像とキャプションをくくったもの*/
.photo {
    float: right; /* 右寄せに配置します */
    text-align: center; /* 内容を中央揃えします */
    margin: 0 10px 0 20px; /* 余白　上 右 下 左 */
    position: relative; /* 相対的な位置指定を行います */
    display: inline-block; /* インラインブロック要素として表示します */
}
.photo .caption{
    display:block;
    line-height:1.4;  /* キャプションの行間 */
    font-size: 0.9em;
    margin:2px 10px 10px;/* 余白　上 左右　下 */
}
/*****************/


#introduction {
    align-self: flex-start;
    width:75%;
    margin : 20px auto 20px auto;
}

#introduction .int {
    font-weight: bold;
    background-image: url(../images/back-bar.gif);

}

#introduction .intconts {
    line-height: 120%;
    margin-top:5px;
    margin-bottom:5px;
}

footer {
    width:350pt;
    font-size: 10pt;
    margin-right: auto;
    margin-left: auto;
    margin-top:2em;
    margin-bottom: 2em;
}

footer nav{
    text-align: center;
}

footer .ad{
    border:0px;
    border-color: #BBBBBB;
    border-style: solid;
    border-width: 2pt;
}

footer .links{
    margin-top: 2em;
    text-align: center;
}

/* photoblock: 本文が細くなる前に縦積みにする */
@media screen and (max-width:900px){
    .photoblock,
    .photoblock2{
        display:flex;
        flex-direction:column;
        gap:10px;
        align-items:stretch;
    }

    /* photoblock だけ、縦積み時の並びを本文→画像に反転 */
    .photoblock{
        flex-direction: column-reverse;
    }

    /* 画像は中央寄せ（幅は既存ルールに任せる） */
    .photoblock .photo img,
    .photoblock2 .photo img{
        display:block;
        margin:0 auto;
    }
    /* photo を中央寄せにする */
    .photoblock .photo,
    .photoblock2 .photo{
        float:none;              /* ← 右寄せの元凶を殺す */
        text-align:center;       /* ← 中央寄せ */
        margin-left:auto;
        margin-right:auto;
    }
}

/* 画面サイズ768px以下の場合（タブレット縦まで）画像サイズを縮小 */
@media screen and (max-width:768px) {
    #main{
        width:100%;
        max-width:100%;
        margin:0 auto;         /* 中央寄せ維持 */
        box-sizing:border-box;
    }
}

/* スマホ縦・最小表示 */
@media screen and (max-width:500px){
    /* 画面縦長・幅500px以下：書影を消さず、簡易縦並びにする */

    header{
        display:none;
    }

    #maintitle{
        width:100%;
        margin-right:auto;
        margin-left:auto;
        text-align:right;
    }

    #main{
        width:100%;
    }

    /* ★ここがポイント：消さない */
    .images{
        display:flex;
        flex-direction:column;
        gap:12px;
        padding:0 12px;
    }

    /* 1冊ぶんを縦積み */
    .image1{
        flex-direction:column;
        align-items:stretch;
        margin-bottom:0;
    }
    /* image1 */
    .image1left{
        order:1;  /* 画像 */
    }
    .image1right{
        order:2;  /* 説明 */
    }

    /* image2（左右反転構造でも同じ順に） */
    .image2right{
        order:1;  /* 画像 */
    }
    .image2left{
        order:2;  /* 説明 */
    }

    /* 左右カラムをいったん「幅100%」に戻す */
    .image1left, .image1right, .image2left, .image2right{
        width:100%;
        padding-left:0;
        padding-right:0;
        align-items:stretch;
    }

    /* 画像は中央寄せ 200px幅固定 */
    .image1left img, .image2right img{
        display:block;
        width:200px;
        max-width:200px;
        height:auto;
        margin:0 auto 8px auto;
    }

    /* 3) タイトル・li情報を“場所取らない”シンプル表示に */
    .image1booktitle{
        width:100%;
        padding:0;
        margin:0 0 6px 0;
        background:none;
        border:none;
        border-radius:0;
        box-shadow:none;
        font-size:1.05rem;  /* 好みで 1rem に落としてもOK */
        line-height:1.35;
        text-align:left;
    }
    .ibright1 {
        text-align:left !important;/* ← ibright1対策 */
    }

    /* ===== 書誌情報を横並びに ===== */
    .image1 ul{
        list-style:none;
        margin:0 0 8px 0;
        padding-left:1.1em; /* 箇条書きの最低限だけ */
        text-align:left;
    }
    .image1 li{
        display:inline;
        white-space:nowrap;   /* 途中改行を防ぐ */
    }
    /* 区切り記号を自動付与 */
    .image1 li::after{
        content:"・";
        margin:0 0.25em;
    }

    /* 最後の要素だけ区切りを消す */
    .image1 li:last-child::after{
        content:"";
        margin:0;
    }

    /* 4) あらすじ・レビュー枠はスマホ縦では出さない（削除扱い） */
    .imagecont,
    .prereview{
        display:none;
    }

    .rowwrapper{
        width:100%;
    }

    /* .photo は従来どおり */
    .photo{
        float:none;
        display:block;
    }
    .photo img{
        max-width:80%;
        height:auto;
    }

    footer{
        width:100%;
        margin-right:auto;
        margin-left:auto;
    }
}