@charset "Shift_JIS";
/* トップページ */
h2:first-child { margin-top: 5px; }
.column { grid-template-columns: 1fr 235px; column-gap: 10px; margin: 0px 5px; }
.column-right { font-size: 0.75rem; text-align: center; }

/* 更新履歴 */
.up-date { margin: 0px 50px 50px; }
.up-date-title { font-size: 0.75rem; margin-bottom: 3px; }
.up-date-main { border: 1px solid #000000; }
.up-date-main iframe { width: 100%; height: calc(0.75rem * 1.8 * 5); }
.up-date-main div { text-align: center; padding: 30px 0px }

/* ---------------------------------------------------------------------------------------------------- */
/* 左　「このサイトについて」画像 */
.p-cont { line-height: 150%; margin-left: 2em; }

.attention { display: grid; grid-template-columns: 1fr 1fr; column-gap: 5px; margin: 10px 0px; }
.att-A { display: inline-block; border: 1px solid #000000; padding: 5px; }
.att-B { display: flex; flex-direction: column; justify-content: space-around; }
.att-B img { align-self: flex-start; }

/* 左　「サイトマップ」 */
.site-map { display: grid; grid-template-columns: max-content 1fr; column-gap: 10px; row-gap: 5px; font-size: 0.75rem;
    margin: 0px 0px 20px 2em; }


/* ---------------------------------------------------------------------------------------------------- */
/* 右 */
.right-title { margin: 50px 0px 5px; }
.right-title:before { content: "＊\A"; color: var(--main-purple); }
.right-title:after { content: "\A＊"; color: var(--main-purple); }

.right-link a { display: block; color: #000000; border: 1px solid #000000; padding: 5px; margin: 5px 20px; }
.right-link a:hover { color: var(--main-purple); background-color: var(--main-purple-pale); border-color: var(--main-purple); }

.right-new { border: 1px solid #000000; padding: 5px; margin: 10px 0px; }


/* 右　個人出版 */
.publish-title { margin-top: 0px; }
.right-link.Kind a { color: var(--color-kindle); border-color: var(--color-kindle); }
.right-link.Kind a:hover { color: #ffffff; background-color: var(--color-kindle); }

.publish-cover { border: 1px solid var(--main-gray); width: fit-content; padding: 3px; margin: 3px auto 5px; }
.publish-cover img { vertical-align: top; width: 124px; height: 175px; }
.publish-info { color: var(--main-gray); font-size: 0.6rem; margin: 3px; }
.publish-name { font-size: 0.7rem; }

/* 右　TouTube */
.youtube-movie { position: relative; width: 100%; padding-top: 56.25%; margin-top: 3px; }
.youtube-movie iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; }


/* ---------------------------------------------------------------------------------------------------- */
/* 外部リンク */
.outside { display: grid; grid-template-columns: 2fr 1fr; font-size: 0.75rem; text-align: center; margin-top: 50px; }
.outside-title { margin-bottom: 5px; }

/* 外部リンク　Twitter */
.bluesky-widget { border: 1px solid #000000; padding: 5px; margin:5px; }
/*
.twitter-widget { display: grid; grid-template-columns: 1fr 1fr; column-gap: 5px; }
.twitter-TL { border: 1px solid #000000; padding: 5px; }
    .MiyukiS { border-color: #0074da; }
    .MioY { border-color: #847fcd; }
*/

/* 外部リンク　リンク集 */
.outside-link a { display: block; color: #000000; border: 1px solid #000000; padding: 5px; margin: 5px; }
.outside-link a:hover { color: var(--main-blue); background-color: var(--main-blue-pale); border-color: var(--main-blue); }

/* ランキング・同盟 */
.img-banner { display: grid; grid-template-columns: max-content 1fr; column-gap: 30px; font-size: 0.75rem; margin-top: 50px; }
.img-banner img { vertical-align: top; margin: 1px; }
.img-banner-title { margin-bottom: 3px; }
.img-banner-title:before , .img-banner-title:after { content: "＊"; color: var(--main-blue); }


/* ---------------------------------------------------------------------------------------------------- */
/* スマホ対応用 */
@media (max-width: 480px) { 
    .column { grid-template-columns: 1fr; }
    .column-left { margin-bottom: 100px }
    
    .up-date { margin: 0px 20px 50px; }
    
    .p-cont { margin: 0px 10px; }
    
    .attention { grid-template-columns: 1fr; }
    .att-B { flex-direction: row; margin-top: 5px; }
    
    .site-map { margin: 0px 10px; }
    
    .tip { margin: 0px 30px; }
    
    .outside { grid-template-columns: 1fr; }
    .twitter-widget { grid-template-columns: 1fr; }
    .twitter-TL { margin: 5px 30px; }
    
    .outside-link { margin: 10px 30px 0px; }
    
    .img-banner { grid-template-columns: 1fr; margin: 10px; }
    .img-banner-title { margin-top: 10px; }
}
/* ---------------------------------------------------------------------------------------------------- */