@charset "utf-8";

body{
font: 
100%/1.6 "Hiragino Kaku Gothic Pro",
Osaka,"メイリオ","ＭＳ Ｐゴシック","MS PGothic",
Verdana,Arial,sans-serif;
margin:0;
color:#333333; /*文字色*/
background-color: #eee8aa;
}
/*-------------------------
#eee8aa = palegoldenrod（※ 同じ色）
--------------------------*/

a{/*リンクされた文字*/
    color:#000000;
}
a:visited{/*訪問後のリンク*/
    color:#313131;
}
a:hover {/*マウスをのせたとき*/
    color:#990000;/*（若干濃い目のワインレッド）*/
}

/*-------------------------
　　　　ヘッダー
--------------------------*/
header{
    background-color: #3e312b;
}


/*****■■■ TOP絵（760-150）（HOME/.site-map/.update-log）■■■*****/
.top-img{
    background-color:#ffffff;
    margin: 0 auto;
    padding: 0;
    vertical-align: top;
}
/*****■ TOP絵 <h1> 表記、HOMEのみ ■*****/
.top-img h1{
    margin: 0;
}



/* HOME / ページタイトル文字 */

/* web漫画（h2 / メインコンテンツ見出し） */
h2{
    font-family: F66筆ずいせん;
    font-size: xx-large;
    margin: 0;
}

/* サイドメニュー（右カラム）見出し */
h3{
    font-family: F66筆ずいせん;
    font-size: x-large;   
    margin: 0;
}



/* ◆ 更新履歴 ◆ */
.info_top{
    width:60%;
    background-color:#fff;
    border:2px dashed darkkhaki;
    border-radius: 10px; /* ボックス角丸 */
    padding: 15px 20px;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30pt;
    font-size: 90%;
}
/* HOME 更新履歴の日付け */
.update{
    font-family: F66-Handic;
    color: #333333;
    font-weight: bolder;    
    font-size: larger;
    margin-bottom: 10px;
}
/* HOME 更新履歴のリンク（右寄せ）（非表示） 
.update-log_rink{
   text-align: right;
}*/



/* 2カラム参考サイト ** https://shu-sait.com/two-column-layout/ */
/* ■■ 2カラムサイトにする（メイン外枠）■■ */
.wrapper {
    width: 90%;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    margin-bottom: 30px;
}

.main, .side {
    padding: 25px;
}

.main {
    background: #ffffff;
    width: 65%;
    margin-right: 20px;
    border: 2px solid darkkhaki;
    border-radius: 10px; /* ボックス角丸 */
}

.side {
    background: #ffffff;
    width: 25%;
    border: 2px solid darkkhaki;
    border-radius: 10px; /* ボックス角丸 */
}

.side p, ul {
    background-color: antiquewhite;
    border-radius: 10px;
    padding: 30px;
}
/* サイドバー（右）SNS */
.sns{
    margin: 0 auto;
    margin-bottom: 20px;
    width: 100%;
    background-color: antiquewhite;
    border-radius: 10px;
    padding: 20px;
}
.sns img{
    width: 50px;
    height: 50px;
}


/* ◆ HOMEメイン。comic_2カラム（2カラム「コンテンツ」にする）◆ */

.comic_home {
    display: block;
    justify-content: space-around;
    padding: 2rem;
    width: 100%;
    margin: 0 auto;
}

/* .comichome div{
}
 */

.comic_home img {
    display: block;
    margin-bottom: 3rem;
    width: 100%;
    height: auto;
    margin-bottom: 25px;
}

/* HOME/ web漫画個別タイトル用 */
h2.comic-home_title{
    font-family: Hiragino Kaku Gothic Pro;
    font-size: x-large;
    margin-bottom: 25px;
}

/* HOME/ web漫画話数のリンク（背景色/border） */
p.comic-home_link {
    background-color: oldlace;
    border-radius: 10px;
    padding: 20px;
}



/* 横並びコンテンツ（メイン元コード）ここから
.archive {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.archive div {
    margin-bottom: 3rem;
    padding: 3rem;
    width: 35%;
    background-color: #f0f0f0;
}

.archive img {
    display: block;
    margin-bottom: 3rem;
    width: 100%;
    height: auto;
}
（元コード）ここまで*/


/* ◆ ブクマ ◆ */
.bookmark{
    width:80%;
    background-color: #fff;
    border: 2px dashed darkkhaki;
    border-radius: 10px; /* ボックス角丸 */
    padding: 20px 30px;
    margin: 0 auto;
    margin-bottom: 20pt;
    font-size: 90%;
}

/* ◆ このサイトへのリンク ◆ */
.site-link{
    width:80%;
    background-color:#fff;
    border: 2px dashed darkkhaki;
    border-radius: 10px; /* ボックス角丸 */
    padding: 20px 30px;
    margin: 0 auto;
    margin-bottom: 20pt;
    font-size: 90%;
}

/* ◆ フッター（コピーライト） ◆ */
footer{
    width: 100%;
    color: #ffffff;
    background-color: #3e312b;
    padding: 20px;
    text-align: center;
}

/* ◆  ◆ */
.{
    width:80%;
    background-color: #fff;
    border: 2px dashed darkkhaki;
    border-radius: 10px; /* ボックス角丸 */
    padding: 20px 30px;
    margin: 0 auto;
    margin-bottom: 20pt;
    font-size: 90%;
}


/* ■■　HOME（INDEX）以外のページカスタム　ここから　■■ */

/* メイン（本文）以外のちょっとした付け足し用BOXと小さめ文字。 */
/* 例：サイト案内のとこのTwitter紹介など。 */
.smalle-font-box{
    width: 100%;
    padding: 10px 25px;
    background-color :beige;
    border-radius: 20px;
    margin: 0 auto;
    margin-bottom: 30px;
}
.smalle-font{
    font-size: smaller;
}



/* .site-map/ .update-log の、h1+div変更用。other～とh1のセットで変える。 */
.other-page{
    width: 90%;
    margin: 0 auto;
    padding: 10px;
}
.other-page h1{
    font-size: x-large;
    font-family: F66筆ずいせん;
}
.other-page h2{
    font-size: x-large;
    font-family: F66筆ずいせん;
    color: #333333;
}


/* 更新履歴（個別ページ） */
.update-log{
    width: 100%;
    padding: 10px 20px;
    margin: 0 auto;
    font-size: 90%;   
}


/* サイト案内ページ */
h2.about {
    font-size: x-large;
    margin: 0;
}
h2.site-map_h2 {
    font-size: x-large;
    margin: 30px 0px 20px 0px;
}
.site-map {
    display: block;
    justify-content: space-around;
    padding: 1rem 2rem;
    width: 100%;
    margin: 0 auto;
}
/* サイト案内のリスト（サイトマップ代わり） */
.site-map_list {
    padding: 2rem;
    width: 100%;
    margin: 0 auto; 
    line-height: 40px;
    background-color: antiquewhite;
}
/* お問い合わせフォーム（サイト案内ページ） */
.mail-form {
    width:70%;
    height: auto;
    display: block;
    justify-content: space-around;
    padding: 1rem 2rem;
    margin: 0 auto;
}
/********* 非表示 / スマホ用のサイトメニュー（サイト内リンク・リスト）PC 1350px以上 / 非表示 *********/

/* .s-phone_site-map（スマホ用・サイト案内の外枠<div>用 ※ PC共通タグだと、
PC表示時にリストの下に隙間が大きく空くため）（1350px以上のPCでは非表示） */
.s-phone_site-map {
    display: none;
}
/* .s-phone_site-map_list（スマホ用・サイト案内）（1350px以上のPC非表示） */
.s-phone_site-map_list {
display: none;
}

/********* 非表示 / スマホ用のサイトメニュー（サイト内リンク・リスト）PC 1350px以上 / 非表示 *********/





/*----------------------------------------------------------------------

※ 以下、HOME / site-map / update-log 兼用のスマホ用ページ表示（PC非表示） ※

                       ※※※　削除禁止　※※※

------------------------------------------------------------------------*/

/* ■■ PC以外のデバイス用（元コード。別館用）親要素 / ここから ■■ */

@media screen and (max-width: 1350px) {

    .wrapper {
        flex-direction: column;
        width: 90%;
    }
    .main, .side {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
    }
    /*
    .archive div {
        width: 70%;
        margin: 20px auto;
    }
    */


/* 以下、自分で付け足し。ここから */


/* 全ページ共通（スマホ用） */
.smalle-font-box{
  width: 100%;
  margin: 0 auto; 
  margin-bottom: 20px;
}

/* サイトTOP絵（スマホ用）ここから */
.top-img {
  width: 100%;
  margin: 0 auto; 
}
.top-img img {
  max-width: 100%;
  height: auto;
}
/* ここまで */

/* .info（HOME/TOPのお知らせ）（スマホ用） */
.info_top{
    width: 90%;
    margin: 20px auto;
}

/*-------------------------

メモ。
スマホ表示では.comic_homeのpaddingを 0 にしないとPC版のpaddingがそのまま適用される。
ので、スマホ表示では margin / padding を必ずリセット（もしくは調整）する。

--------------------------*/
/* .comic（HOME/ WEB漫画バナーの表示）（スマホ用）*/
.comic_home {
    width: 100%;
    margin: 20px auto;
    padding: 0;
}
.comic_home img {
    width: 100%;
    margin: 20px auto;
}
/* HOME/ web漫画個別タイトル用（スマホ用） */
h2.comic-home_title{
    font-size: large;
}

/* HOME/ web漫画話数のリンク（背景色/border）（スマホ用） 
p.comic-home_link {

}
*/




/* .bookmark（HOME/ブックマーク）（スマホ用） */
.bookmark {
    width: 90%;
    margin: 20px auto;
}
/* .site-link（HOME/このサイトへのリンク）（スマホ用） */
.site-link {
    width: 90%;
    margin: 20px auto;
}



/***** --------------- <hr> --------------- *****/



/*-------------------------

以下、HOME以外（site-map / uodate-log）のページ（スマホ用表示）

--------------------------*/


/* （削除禁止）PC用のサイト案内リンク / スマホ非表示（1350px以上の場合） */
.site-map_list {
    display: none;
}
/* .site-map（スマホ表示用100%・リスト以外のサイト案内BOXとテキスト / タグはPC表示用と共通） */
.site-map {
    width: 100%;
    margin: 20px auto;
    padding: 0;
}
/* .s-phone_site-map（スマホ表示用・サイト案内）（1350px以上のPCでは非表示） */
.s-phone_site-map {
    display: block;
    width: 100%;
    margin: 20px auto;
    padding: 0;
}
/* .s-phone_site-map_list（スマホ表示用・サイト案内）（1350px以上のPCでは非表示） */
.s-phone_site-map_list {
    display: block;
    width: 100%;
    margin: 20px auto;
    padding: 20px 30px;
    line-height: 30px;
    background-color: antiquewhite;
}
/* .mail-form（サイト案内/下部のメールフォーム用）（スマホ用） */
.mail-form {
    width: 100%;
    margin: 20px auto;
    padding: 10px;
}



/*.（スマホ用） */
. {
    width: 100%;
    margin: 20px auto;
}

/* .（スマホ用） */
. {
    width: 100%;
    margin: 20px auto;
}

/* .（スマホ用） */
. {
    width: 100%;
    margin: 20px auto;
}

/* .（スマホ用） */
. {
    width: 100%;
    margin: 20px auto;
}

/* .（スマホ用） */
. {
    width: 100%;
    margin: 20px auto;
}

/* .（スマホ用） */
. {
    width: 100%;
    margin: 20px auto;
}

/* .（スマホ用） */
. {
    width: 100%;
    margin: 20px auto;
}

/* .（スマホ用） */
. {
    width: 100%;
    margin: 20px auto;
}

/*-------------------------
メモ。


--------------------------*/

/* 自分で付け足し。ここまで */
    }
/* ■■ PC以外のデバイス用（元コード。別館用）親要素 / ここまで ■■ */