@charset "utf-8"; /* @media screen and (min-width: 881px) ：ブラウザ幅881px以上向けの指定 */ /* @media screen and (max-width: 880px) ：ブラウザ幅880px以下向けの指定 */ /* ----- 各要素の基本指定 ----- */ /* 「celestite」フォルダでも使用あり、編集する場合はcommon.cssも確認 */ /* スクロールバー常時表示，ベースのフォントサイズ */ html { overflow-y: scroll; font-size: 60.5%; } /* body：下記以外は、個別にid・classなどで指定（各ページの壁紙はbg.cssで指定） */ body { background-color: #ffffff; background-attachment: fixed; color: #000000; font-size: 10px; font-size: 1.0em; font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; white-space: nowrap; letter-spacing: 0.85pt; -webkit-text-size-adjust: 100%; } /* 各要素のフォントサイズ */ h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, p, a, address, input, textarea { font-size: 14px; font-size: 1.4rem; } /* 見出し1 */ h1 { margin-bottom: 0.7em; } /* テキストを入力するブロック要素 */ p { margin-bottom: 1em; } p, ul, dl, dd { line-height: 1.6em; } /* 強調（強調はemのみ使用する為、斜体ではなく太字にする） */ em { font-style: normal; font-weight: bold; } /* ----- リンク関係の指定（位置調節なども含む，menuは別指定） ----- */ /* 「celestite」フォルダでも使用あり、編集する場合はcommon.cssも確認 */ /* リンク1：通常，下線あり */ a:link { color: #000000; } a:visited { color: #7b7c7d; } a:hover { color: #a2d7dd; } a:active { color: #e6e6fa; } a:link, a:visited, a:hover, a:active { text-decoration: underline; } /* リンク2：通常，下線なし */ a.td_none:link, a.td_none:visited, a.td_none:hover, a.td_none:active { text-decoration: none; } /* リンク3：SS一覧のタイトル用，下線なし */ a.title:link { color: #223a70; } a.title:visited { color: #7b7c7d; } a.title:hover { color: #a2d7dd; } a.title:active { color: #e6e6fa; } a.title:link, a.title:visited, a.title:hover, a.title:active { text-decoration: none; } /* リンク4：SS一覧の内容紹介用，下線あり */ a.outline:link { color: #223a70; } a.outline:visited { color: #7b7c7d; } a.outline:hover { color: #a2d7dd; } a.outline:active { color: #e6e6fa; } /* リンク5：白背景用，隠しリンク用，下線なし（基本指定ではないが、便宜上ここに指定） */ a.a2:link { color: #000000; } a.a2:visited { color: #666699; } a.a2:hover { color: #a2d7dd; text-decoration: underline; } a.a2:active { color: #e6e6fa; } a.a2:link, a.a2:visited, a.a2:active { text-decoration: none; } /* ----- の指定，各要素の基本指定以外で、主にidを使用する「font-～」「color」関連の指定 ----- */ /* 「celestite」フォルダでも使用あり、編集する場合はcommon.cssも確認 */ /* 小さめのフォント1：メニューリンク，注記，SSの紹介文など */ #top h2, #top h3, #top_menu dt, #top_menu dd, #menu li, #pulldown-menu li, #record_date dt, #record_date dd, #record p a, #topic, #topic_indigo, #topic_orange, #top_menu_mobile_notes, #genre p, #genre li, #top #notes p, #top #notes li, #record_log_date dt, #record_log_date dd, #text #text_like_note, #text #introduce #notes li, #shed_a, #shed_a a, #supplementation, #supplementation li, #relation, #relation a, .am_rival_notes, #title_index dd, #title_index dd a, #time_order #introduce p, #time_order #notes, #list1 h2, #list1 ul li, #list1 a, #list2 h2, #list2 ul li, #list2 a, #list3 h2, #list3 ul li, #list3 a, #list_others h2, #list_others ul li, #angel h2, #a_profile ul li, #a_profile p, #a_profile a, #a_personality p, #brave-angel p, #loop h1, #loop h2, #loop_preface p, #loop_preface li, .loop_contents p, .loop_contents li, #loop_flow p, #loop_ps p, #story #notes, #shed #introduce #notes p, #shed_story #introduce p, #shed_preface p, #shed_others p, #postscript p, #mq h1, #mq p, #mq_link a, .mail table { font-size: 13px; font-size: 1.3rem; } /* 小さめのフォント2：小さめの注記，UP・NEWの文字など */ #topic_gray, #inform, #inform a, #master, #pc, #unofficial, #copyright, #master_notification, #open, #top_menu_pc_notes, #rating_r18 a, #rating_all a, #material .notes, #update, .pc_up, .sp_up, .up { font-size: 12px; font-size: 1.2rem; } /* 小さめのフォント3：以前TOPのカウンタで使用、現在使用箇所なしだが、指定は残す */ #dummy0 { font-size: 1.0rem; } /* color：各コンテンツトップのh1 */ #record_log h1, #text h1, #title_index h1, #shed h1, #link h1 { color: #000033; } /* color：UP，NEWの文字 */ .pc_up, .sp_up, .up { color: #6699ff; } /* color：その他 */ .font_white { color: #ffffff; /* 白背景の隠し文字用-1 */ } .font_orange { color: #ff6600; /* お知らせ用 */ } .font_blue { color: #0068b7; /* お知らせ用 */ } /* ----- 要素内の行揃えの指定 ----- */ /* 「celestite」フォルダでも使用あり、編集する場合はcommon.cssも確認 */ /* 右揃え */ #counter, #open, #permit, #relation_back, #end, #continue, #update, #story_back, #shed_back, .page_up, .a_right { text-align: right; } /* 中央寄せ */ #list1 h2, #list2 h2, #list3 h2, .a_center { text-align: center; } /* ----- 回り込み ----- */ /* 「celestite」フォルダでも使用あり、編集する場合はcommon.cssも確認 */ /* 次の要素を右に回り込ませる */ #top_menu dt, .utm_leni #supplementation li, .utm_seizh #supplementation li, .rg_phil #supplementation li, .rg_azel #supplementation li, .utmc_leni #supplementation li, .utmc_seizh #supplementation li, .imm_leon #relation li, .fd2_clive #relation li, #list1, #list2, #list3, #illust_index li, .f_left { float: left; } @media screen and (max-width: 880px) { #menu li { float: left; } } /* 次の要素を左に回り込ませる */ .f_right { float: right; } /* 回り込みの全解除 */ #contents, #text dl, #title_index dl, .fd2_clive #supplementation, #list_others, .timeorder_c .page_up, #shed dl, .clear_all { clear: both; } @media screen and (min-width: 881px) { #pc_clear_all { clear: both; } } @media screen and (max-width: 880px) { #list1, #list2, #list3 { clear: both; } } /* ----- 要素，id，classで、共通使用する指定（「font-～」「color」，行揃え，回り込み以外） ----- */ /* 「celestite」フォルダでも使用あり、編集する場合はcommon.cssも確認 */ /* 改行するように再指定 */ #top_menu, #story_contents, #shed_story_contents { white-space: normal; } @media screen and (max-width: 880px) { #container, #top #container, #time_order #container, #angel #container, #loop #container, #story #container, #shed_story { white-space: normal; } } /* モバイルのみ・PCのみの改行 */ .br_sp450, .br_sp500, .br_sp550, .br_sp600, .br_sp650, .br_pc { display: none; /* モバイルのみ・PCのみ共通 */ } @media screen and (max-width: 450px) { .br_sp450 { display: block; /* モバイルのみ */ } } @media screen and (max-width: 500px) { .br_sp500 { display: block; /* モバイルのみ */ } } @media screen and (max-width: 550px) { .br_sp550 { display: block; /* モバイルのみ */ } } @media screen and (max-width: 600px) { .br_sp600 { display: block; /* モバイルのみ */ } } @media screen and (max-width: 650px) { .br_sp650 { display: block; /* モバイルのみ */ } } @media screen and (min-width: 710px) { .br_pc { display: block; /* PCのみ */ } } /* モバイル用字下げ（モバイル用改行使用時の文頭位置調整）：「em」の後の数字は字下げ数、便宜上ここで指定 */ @media screen and (max-width: 450px) { .sp_em450 { margin-left: 1em; } } @media screen and (max-width: 500px) { .sp_em500 { margin-left: 1em; } } @media screen and (max-width: 550px) { .sp_em550 { margin-left: 1em; } } @media screen and (max-width: 600px) { .sp_em600 { margin-left: 1em; } } @media screen and (max-width: 650px) { .sp_em650 { margin-left: 1em; } } /* Menu Top，Top以外共通 */ /* 「celestite」フォルダでも使用あり、編集する場合はcommon.cssも確認 */ #top_menu, #menu { position: fixed; /* ブラウザ幅に関係なく位置固定 */ } @media screen and (min-width: 881px) { #top_menu, #menu { top: 3px; left: 10px; background-repeat: no-repeat; background-image: url(usa433w.jpg); background-position: center 98%; background-size: 51px 75px; } #top_menu dt, #top_menu dd, #menu li, #menu p { background-color: rgba(255,255,255,0.8); } } @media screen and (max-width: 880px) { #top_menu, #menu { top: 3px; right:2px; left: 1px; background-repeat: no-repeat; background-image: url(usa332w.jpg); background-position: 96% 65%; background-size: 15px 29px; } #top_menu dt, #top_menu dd, #menu li, #menu p { background-color: rgba(255,255,255,0.8); } } @media screen and (max-width: 370px) { #menu { background-image: none; } } #top_menu, #menu { z-index: 2; background-color: #ffffff; border: solid 1px #afafb0; border-radius: 20px; } #top_menu a, #menu a { text-decoration: none; } /* Menu TOP */ @media screen and (min-width: 881px) { #top_menu { bottom: 3px; width: 163px; padding: 20px 0px 10px 16px; } } @media screen and (max-width: 880px) { #top_menu { width: 88%; height: 23px; margin: 0 auto; padding: 10px 0px 5px 18px; } } @media screen and (max-width: 880px) { #top_menu_pc_notes { display: none; /* 便宜上ここで指定、PCのみ「Menu」の下にPW認証注意書きが表示されるようにする */ } } @media screen and (min-width: 881px) { #top_menu_mobile_notes { display: none; /* 便宜上ここで指定、スマホのみメニュー枠の下にPW認証注意書きが表示されるようにする */ } } @media screen and (max-width: 880px) { #top_menu_mobile_notes { line-height: 1.5em; padding-top: 14px; } } #top h2 { margin: 0px 0px 9px 4px; } #top_menu dt { margin: 0px 1px 0px 1px; } #top_menu dd { margin-bottom: 1em; } @media screen and (max-width: 880px) { #top_menu dt { margin: 0px 12px 0px 0px; } } @media screen and (min-width: 881px) { .sp_up { display: none; /* 便宜上ここで指定 */ } } @media screen and (max-width: 880px) { #top h2, #top_menu dd, .pc_up { display: none; /* 便宜上ここで指定 */ } } /* 右の内容表示枠の左余白 */ /* 「celestite」フォルダでも使用あり、編集する場合はcommon.cssも確認 */ #contents { z-index: 1; margin-left: 225px; /* TOP，更新履歴，Text，SSタイトル一覧，イラスト一覧、Linkで使用 */ } #time_order #contents { margin-left: 188px; /* SS時間順リスト用 */ } #angel #contents { margin-left: 192px; /* 天使設定用 */ } #loop #contents { margin-left: 190px; /* WA5私的設定用 */ } #story #contents, #shed_story #contents { margin-left: 191px; /* SS用 */ } .mail #contents { margin-left: 180px; /* メールフォーム用，html→phpに遷移する為、idではなくclass指定 */ } #like #contents { margin-left: 0px; /* いいね用 */ } @media screen and (max-width: 880px) { #contents, #time_order #contents, #angel #contents, #loop #contents, #story #contents, #shed_story #contents, .mail #contents { margin: 35px 0px 0px 0px; } } @media screen and (max-width: 880px) { #top #contents { margin-top: 20px; } } /* 右の内容表示幅（「↑Page Top」のリンクのアンカーにも使用） */ /* 「celestite」フォルダでも使用あり、編集する場合はcommon.cssも確認 */ #container { width: 575px; /* 更新履歴，Text，SSタイトル一覧，イラスト一覧，Linkで使用 */ } #top #container { width: 500px; /* TOP用 */ } #time_order #container { width: 682px; /* SS時間順リスト用 */ } #angel #container { width: 656px; /* 天使設定用 */ } #loop #container { width: 615px; /* WA5私的設定用 */ } #story #container, #shed_story #container { width: 601px; /* SS用 */ } .mail #container { width: 580px; /* メールフォーム用 */ } #like #container { width: 460px; /* いいね用 */ } @media screen and (max-width: 880px) { #container, #top #container, #time_order #container, #angel #container, #loop #container, #story #container, #shed_story #container, .mail #container { width: 87%; } } @media screen and (max-width: 500px) { #like #container { width: 90%; } } @media screen and (max-width: 450px) { #like #container { width: 85%; } } /* ブロック要素自体の中央寄せ */ /* 「celestite」フォルダでも使用あり、編集する場合はcommon.cssも確認 */ #container, #frame { margin: 0 auto; } /* ページ表示枠の余白 */ /* 「celestite」フォルダでも使用あり、編集する場合はcommon.cssも確認 */ #container { padding: 23px 0px 30px 0px; /* 更新履歴，Text，SSタイトル一覧，SS時間順リスト，天使設定用，WA5私的設定，SS，Linkで使用 */ } #top #container { padding: 0px 0px 0px 0px; /* TOP用 */ } #gift_index #container { padding: 27px 0px 30px 0px; /* イラスト一覧用 */ } #like #container { padding: 0px 0px 0px 0px; /* いいね用 */ } /* コンテンツ紹介コメントの余白 */ /* 「celestite」フォルダでも使用あり、編集する場合はcommon.cssも確認 */ #introduce { margin: 0px 0px 22px 2px; } /* の左余白：SS一覧の注釈・前後編のNoなど */ /* 「celestite」フォルダでも使用あり、編集する場合はcommon.cssも確認 */ .annotation, dt .am_rival, dt .utm_pure, dt .utm_hate, dt .rg_open, dt .rg_close, dt .wa5_parallel { margin-left: 0.7em; } .serial { margin-left: 1em; } @media screen and (max-width: 880px) { .serial { margin-left: 1.2em; } } .am_rival_notes { margin-left: 3px; } /* の左余白：UP */ /* 「celestite」フォルダでも使用あり、編集する場合はcommon.cssも確認 */ #top nav .pc_up, #shed_a .up, #story_category .up, #time_order .up, #shed_category .up, #link .up { margin-left: 0.45em; } #top nav .sp_up { margin-left: 0.4em; } /* 「.page_up」の余白 */ /* 「celestite」フォルダでも使用あり、編集する場合はcommon.cssも確認 */ @media screen and (min-width: 881px) { #record_log .page_up { margin-right: 100px; padding-top: 10px; } } @media screen and (max-width: 880px) { #top .page_up { margin-right: 10px; padding-bottom: 25px; } } /* ブロック要素の下余白を「0px」に再設定 */ /* 「celestite」フォルダでも使用あり、編集する場合はcommon.cssも確認 */ .introduction, #continue, #end, #update, #search p, #material p, .page_up { margin-bottom: 0px; } /* 要素の非表示（その要素のスペースを保持しないで非表示，メディアクエリ分は個別指定） */ /* 「celestite」フォルダでも使用あり、編集する場合はcommon.cssも確認 */ #guide h2, #time_order h1, #gift_index h1, #thanks h2, .none { display: none; } /* 文字の背景を半透明にする：TOP用（左上固定背景を使うことがあるため，背景によって透明度を修正） */ @media screen and (min-width: 881px) { #inform span, #top h1 span, #preface p span, #record_date dd span, #record_date dt span, #record p span, #genre p span, #genre li span, #top #notes p span, #top #notes li span, #master span, #pc span, #unofficial span, #copyright span, #master_notification span, .font_blue, font_orange { background-color: rgba(255,255,255,0.9); /* 0.97 */ } } /* 字下げ：「em」の後の数字は字下げ数 */ /* 「celestite」フォルダでも使用あり、編集する場合はcommon.cssも確認 */ .em0-5 { margin-left: 0.5em; } .em1 { margin-left: 1em; } .em2 { margin-left: 2em; } .em2-5 { margin-left: 2.5em; } .em3 { margin-left: 3em; } /* 行開け：「em」の後の数字は行開け数 */ /* 「celestite」フォルダでも使用あり、編集する場合はcommon.cssも確認 */ .between0 { margin-bottom: 0em; } .between0-5 { margin-bottom: 0.5em; } .between1 { margin-bottom: 1em; } .between1-5 { margin-bottom: 1.5em; } .between2 { margin-bottom: 2em; } .between2-5 { margin-bottom: 2.5em; } .between3 { margin-bottom: 3em; } /* ----- 個別指定 ----- */ /* TOP：冒頭の注意書き */ #inform { line-height: 1.6em; margin: 19px 0px 20px 207px; } @media screen and (max-width: 880px) { #inform { width: 87%; margin: 0 auto; padding-top: 50px; /* 元は50px，スマホのみメニューの下にPW認証の注意書き追記の為、上余白調整 */ } } /* TOP：ロゴ */ #top h1 { margin-left: 0px; /* 今後の調整用に、「0px」にしても項目は削除せずに残す */ } #top #container img { vertical-align: bottom; } /* TOP：サイト概要の各項目 */ #topic, #topic_indigo, #topic_orange, #topic_gray { margin: 0px 0px 10px 2px; } #topic_auth { margin-bottom: 15px; } #topic_auth img { max-width: 100%; height: auto; } #topic { color: #0066cc; } #topic_indigo { color: #043c78; } #topic_orange { color: #ff3333; } #topic_gray { color: #696969; } #preface p { margin: 0px 0px 15px 1px; /* 下は元は13px、bot避け画像の位置調整で修正 */ } #record { color: #043c78; margin: 0px 0px 17px 3px; } #record_date dt { margin-bottom: 3px; } #record_date dd { line-height: 1.75em; margin: 0px 0px 5px 0px; } #record p { margin: 0px 0px 0px 0px; /* 今後の調整用として残す */ } #genre { margin: 0px 0px 17px 2px; } #genre p { margin-bottom: 5px; } #genre li { margin-bottom: 2px; margin-left: 0.2em; } #top #notes { margin: 0px 0px 15px 2px; } #top #notes p { margin-bottom: 3px; } #top #notes li { padding-left: 0.1em; } /* TOP：管理人，動作確認など */ #master, #pc, #unofficial, #copyright, #master_notification { margin-left: 9px; } #pc { margin-bottom: 13px; } #master, #unofficial { margin-bottom: 3px; } #copyright { margin-bottom: 12px; } #master_notification { margin-bottom: 60px; line-height: 1.65em; } /* TOP：開設日 */ #open { margin-right: 1em; margin-bottom: 20px; color: #727171 } /* TOP：許諾 */ #permit { margin-right: 1em; padding-bottom: 25px; } #permit dt { margin-bottom: 1px; } #permit dd { line-height: 1.1em; } /* TOP：ページ上部へのリンク（ブラウザ幅880px以上は非表示） */ @media screen and (min-width: 881px) { #top .page_up { display: none; /* 便宜上ここで指定 */ } }