@charset "utf-8"; /*全体の設定 ---------------------------------------------------------------------------*/ body { color: #666; /*全体の文字色*/ margin: 0px; padding: 0px; font: 14px "メイリオ", Meiryo, "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";/*文字サイズ・行間・フォント設定*/ background: #FFF; } h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure{ margin: 0px; padding: 0px; } ul{ list-style-type: none; } img { border: none; } input,textarea,select { font-size: 1em; } /*リンク ---------------------------------------------------------------------------*/ a { color: #4169e1; border: none; } a:link { color:#4169e1; text-decoration:none; } a:active { color:#4169e1; text-decoration:none; } a:visited { color:#4169e1; text-decoration:none; } a:hover { color:#f00; text-decoration:underline; } /*コンテナー(HPを囲むブロック) ---------------------------------------------------------------------------*/ #container { width: 1010px; /*コンテナー幅*/ margin-right: auto; margin-left: auto; } /*ヘッダー ---------------------------------------------------------------------------*/ div#header { width: 1010; /*ブロックの幅*/ height: 110px; margin: 0 auto; text-align: left; margin-bottom: 15px; background: url(../img/header.jpg); color:#fff; border-bottom-right-radius: 6px; /* CSS3用丸み*/ border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; /* Safari,Google Chrome用丸み */ -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; padding: 15px 10px 0px 20px; } /*h1ロゴの設定*/ div#header h1 { width: 100%; font-size: 22px; letter-spacing: 0.08em; font-weight: bold; padding: 0 0 10px 0; } .main_title { width: 100%; font-size: 22px; letter-spacing: 0.08em; font-weight: bold; padding: 0 0 10px 0; } div#header a { color: #fff; border: none; padding: 0; } div#header a:hover { color:#00BFFF; text-decoration:underline; } /*メインメニュー ---------------------------------------------------------------------------*/ /*メニュー1個ごとの設定*/ div#menubar ul li { float: left; width: 167px; /*メニュー幅*/ border-right: 1px solid #dcdcdc; /*メニューの右側の線*/ text-align: center; font-weight: bold; margin-bottom: 15px; } div#menubar ul li a { color: #0000FF; text-decoration: none; display: block; -webkit-transition: 0.5s; /*マウスオン時の色が変わるまでの時間*/ transition: 0.5s; /*同上*/ } /*最初のメニュー*/ div#menubar ul li:first-child { border-left: 1px solid #dcdcdc; /*左側の線*/ } /*マウスをhover*/ div#menubar ul li a:hover { background-color: #3030FF; color: #FFF; /*文字色*/ } /*英語表記*/ div#menubar ul li a span { font-size: 9px; display: block; font-weight: normal; letter-spacing: 0.2em; /*文字間隔*/ color: #999; } div#menubar ul li a:hover span { color: #fffbc3; /*マウスオン時*/ } /*コンテンツ(main,side_left,side_rightを囲むブロック) ---------------------------------------------------------------------------*/ #contents { clear: left; width: 100%; } /*コンテンツin(main,side_leftを囲むブロック) ---------------------------------------------------------------------------*/ #contents_in { float: left; width: 780px; } /*メインコンテンツ(中央ブロック) ---------------------------------------------------------------------------*/ #index_main { float: right; /*右側に回り込み*/ width: 550px; padding-bottom: 30px; } #main { float: right; /*右側に回り込み*/ width: 550px; padding-bottom: 30px; } #index_main h2,#main h1 { background-color: #0000FF; /*背景色(古いブラウザだとここの色のみ)*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#75c9f0), to(#0000FF)); /*グラデーション*/ background-image: -webkit-linear-gradient(#75c9f0, #0000FF); /*同上*/ background-image: linear-gradient(#75c9f0, #0000FF); /*同上*/ -webkit-box-shadow: 1px 2px 7px #999; /*影の設定*/ box-shadow: 1px 2px 7px #999; /*同上*/ font-size: 120%; color: #FFF; padding: 5px 10px 5px 15px; clear: both; } #index_main h3,#main h2 { background-color: #ececec; /*背景色(古いブラウザだとここの色のみ)*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#00bfff), to(#1e90ff)); /*グラデーション*/ background-image: -webkit-linear-gradient(#00bfff, #1e90ff); /*同上*/ background-image: linear-gradient(#00bfff, #1e90ff); /*線の幅、線種、色*/ color: #ffffff; font-size: 110%; /*-webkit-box-shadow: 0px 0px 0px 1px #fff inset; 内側への影* / box-shadow: 0px 0px 0px 1px #FFF inset; /*同上 border-top: 1px solid #1e90ff; border-right: 1px solid #1e90ff; border-bottom: 1px solid #1e90ff; border-left: 3px solid #1e90ff; */ padding: 2px 10px 2px 15px; margin-bottom: 12px; } #main p { padding: 5px 5px 20px 5px; } #index_main p { padding: 2px 5px 5px 5px; } .index_entry { padding: 7px 10px 10px; border: 1px solid #ccc; margin-bottom: 20px; } /*サイドコンテンツ ---------------------------------------------------------------------------*/ /*左サイド*/ #side_left { float: left; width: 215px; padding-bottom: 30px; } /*右サイド*/ #side_right { float: right; width: 215px; padding-bottom: 30px; } /*side_left,side_rightコンテンツ内のtitle設定*/ .side_title { font-size: 100%; text-align: center; /*文字をセンタリング*/ background-color: #FFF; /*背景色(古いブラウザだとここの色のみが出ます)*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#FFF)); /*グラデーション*/ background-image: -webkit-linear-gradient(#f2f2f2, #FFF); /*同上*/ background-image: linear-gradient(#f2f2f2, #FFF); /*同上*/ border-top: 3px solid #0000FF; border-right: 1px solid #cfcfcf; border-bottom: 1px solid #cfcfcf; border-left: 1px solid #cfcfcf; -webkit-box-shadow: 0px 0px 0px 1px #FFF inset; /*内側への影*/ box-shadow: 0px 0px 0px 1px #FFF inset; /*同上*/ padding: 3px 0px; /*上下、左右への余白*/ color: #000; } div.box1 { border: 1px solid #cfcfcf; padding: 5px; margin-bottom: 1em; } /*見出しにbox1やメニューが繋がった場合の枠線の重複*/ .side_title + ul, .side_title + .box1 { border-top: none; } /*box1の中にメニューが入った場合の下の余分な余白*/ #side_left .box1 > ul, #side_right .box1 > ul { margin-bottom: 0; } /*side_left,side_rightコンテンツ内のメニュー ---------------------------------------------------------------------------*/ /*メニューブロック全体の設定*/ #side_left ul, #side_right ul { border-top: 1px solid #cfcfcf; border-right: 1px solid #cfcfcf; border-left: 1px solid #cfcfcf; margin-bottom: 1em; /*メニューブロックの下にあけるスペース*/ } /*メニュー1個ごとの設定*/ #side_left ul li a, #side_right ul li a { text-decoration: none; display: block; border-bottom: 1px solid #cfcfcf; /*下側の線の幅、線種、色*/ padding: 0 5px; -webkit-transition: 0.5s; /*マウスオン時の色が変わるまでの時間設定。0.5秒。*/ transition: 0.5s; /*同上*/ background: #FFF; } /*マウスオン時の設定*/ #side_left ul li a:hover, #side_right ul li a:hover { color: #FFF; background-color: #3030FF; } /*フッター設定 ---------------------------------------------------------------------------*/ #footer { clear: both; color: #FFF; text-align: center; padding-top: 15px; padding-bottom: 15px; background-color: #0000CD; } .footer_copyright { font-size:11px; } .footer_copyright a { color: #fff; border: none; } .footer_copyright a:link { color:#fff; text-decoration:none; } .footer_copyright a:active { color:#fff; text-decoration:none; } .footer_copyright a:visited { color:#fff; text-decoration:none; } .footer_copyright a:hover { color:#0f0; text-decoration:underline; } /*ここからタブレット用(481px~800px)環境の設定 ---------------------------------------------------------------------------*/ /*表示を切り替えるウィンドウサイズの指定*/ @media (min-width:481px) and (max-width:800px){ /*コンテナー(HPを囲むブロック) ---------------------------------------------------------------------------*/ #container { width: auto; margin-right: 6px; margin-left: 6px; } /*ヘッダー(サイト名ロゴが入ったブロック) ---------------------------------------------------------------------------*/ div#header { width: 1010; /*ブロックの幅*/ height: 100%; margin: 0 auto; margin-bottom: 15px; background: url(../img/header.jpg); color:#fff; border-bottom-right-radius: 6px; /* CSS3用丸み*/ border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; /* Safari,Google Chrome用丸み */ -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; padding: 15px 10px 5px 10px; text-align: center; } /*h1ロゴの設定*/ div#header h1 { width: 100%; font-size: 24px; letter-spacing: 0.08em; font-weight: bold; padding: 0 0 10px 0; } .main_title { width: 100%; font-size: 24px; letter-spacing: 0.08em; font-weight: bold; padding: 0 0 10px 0; } .main_description { max-width: 100%; font-size: 16px; } /*上部のメインメニュー ---------------------------------------------------------------------------*/ /*メニューブロック全体の設定*/ div#menubar ul { border-top: 1px solid #dcdcdc; /*メニューブロックの上側の線*/ } /*メニュー1個ごとの設定*/ div#menubar ul li { float: left; width: 50%; /*メニュー幅*/ margin-bottom: 0; border-bottom: 1px solid #dcdcdc; /*メニューの下側の線*/ box-sizing: border-box; } div#menubar ul li a { padding: 10px 0px; /*メニュー内の余白*/ } /*最初のメニューの設定*/ div#menubar ul li:first-child { border-left: none; } /*奇数番目のメニューの設定*/ div#menubar ul li:nth-child(odd) { border-left: 1px solid #dcdcdc; /*奇数番目のメニューの左側へ入れる線の設定*/ } /*英語表記の設定*/ div#menubar ul li a span { display: none; /*非表示*/ } /*最後のメニューの設定*/ div#menubar ul li:last-child { margin-bottom: 20px; } /*コンテンツ(main,side_leftを囲むブロック) ---------------------------------------------------------------------------*/ #contents { width: auto; } /*contents_in,main,side_leftコンテンツ ---------------------------------------------------------------------------*/ #contents_in, #main, body.c2 #main, #index_main, body.c2 #index_main, #side_left { float: none; width: auto; } /*side_rightコンテンツ非表示 ---------------------------------------------------------------------------*/ #side_right { display: none; } /*その他 ---------------------------------------------------------------------------*/ .top_pv iframe { max-width: 100%; } /*top広告非表示 ---------------------------------------------------------------------------*/ .top_koukoku { display: none; } .top_koukoku_mobile { display: block; text-align: center; margin: 0 auto; padding: 1px 2px 8px 2px; } } /*ここからスマートフォン用(480px以下)環境の設定 ---------------------------------------------------------------------------*/ /*表示を切り替えるウィンドウサイズの指定*/ @media (max-width : 480px){ /*コンテナー(HPを囲むブロック) ---------------------------------------------------------------------------*/ #container { width: auto; margin-right: 6px; margin-left: 6px; } /*ヘッダー(サイト名ロゴが入ったブロック) ---------------------------------------------------------------------------*/ div#header { width: 1010; /*ブロックの幅*/ height: 100%; margin: 0 auto; margin-bottom: 15px; background: url(../img/header.jpg); color:#fff; border-bottom-right-radius: 6px; /* CSS3用丸み*/ border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; /* Safari,Google Chrome用丸み */ -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; padding: 15px 10px 5px 10px; text-align: center; } /*h1ロゴの設定*/ div#header h1 { width: 100%; font-size: 22px; letter-spacing: 0.08em; font-weight: bold; padding: 0 0 10px 0; } .main_title { width: 100%; font-size: 22px; letter-spacing: 0.08em; font-weight: bold; padding: 0 0 10px 0; } .main_description { max-width: 100%; } /*上部のメインメニュー ---------------------------------------------------------------------------*/ /*メニューブロック全体の設定*/ div#menubar ul { border-top: 1px solid #dcdcdc; /*メニューブロックの上側の線*/ margin-bottom: 20px; } /*メニュー1個ごとの設定*/ div#menubar ul li { float: none; width: 100%; margin-bottom: 0; border-right: none; border-bottom: 1px solid #dcdcdc; /*メニューの下側の線*/ box-sizing: border-box; } div#menubar ul li a { padding: 10px 0px; /*メニュー内の余白。上下、左右。*/ } /*最初のメニューの設定*/ div#menubar ul li:first-child { border-left: none; } /*英語表記の設定*/ div#menubar ul li a span { display: none; /*非表示*/ } /*コンテンツ(main,side_leftを囲むブロック) ---------------------------------------------------------------------------*/ #contents { width: auto; } /*contents_in,main,side_leftコンテンツ ---------------------------------------------------------------------------*/ #contents_in, #main, body.c2 #main, #index_main, body.c2 #index_main, #side_left { float: none; width: auto; } /*side_rightコンテンツ非表示 ---------------------------------------------------------------------------*/ #side_right { display: none; } /*その他 ---------------------------------------------------------------------------*/ .top_pv iframe { max-width: 100%; } /*top広告 ---------------------------------------------------------------------------*/ .top_koukoku { display: none; } .top_koukoku_mobile { display: block; text-align: center; margin: 0 auto; padding: 1px 2px 8px 2px; } .table_animejun { width: 100%; border-collapse:collapse; } .table_animejun tr { border-top: 1px solid #666; border-bottom: none; border-right: none; border-left: none; padding: 5px 0; text-align: left; } .table_animejun th { width: 100%; display: block; border-top: none; border-bottom: none; border-right: none; border-left: none; padding: 5px 0 0 0; } .table_animejun td { width: 100%; display: block; border-top: none; border-bottom: none; border-right: none; border-left: none; padding-bottom: 5px; } #table_animejun_2 { padding: 3px; margin: 0; text-align: center; font-size:16px; } #table_animejun_3 { padding: 3px; margin: 0; text-align: center; font-size:16px; } } /*---------------------------------------------------------------------------*/ /*その他記述/* /*---------------------------------------------------------------------------/* /* ▼ トップへ移動 ▼ */ #page-top { position: fixed; bottom: 50px; right: 10px; font-size: 77%; } #page-top a { background: #666; text-decoration: none; color: #fff; width: 35px; padding: 20px 0; text-align: center; display: block; border-radius: 4px; } #page-top a:hover { text-decoration: none; background: #999; } /* ▲ トップへ移動 ▲ */ /* ▼ タイトルバー(見出し) ▼ */ .gradientA, .gradientB, .gradientC, .gradientD { filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0,startcolorstr=#550000, endcolorstr=#aa0000); /*IE6 IE7 */ -ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0,startcolorstr=#550000, endcolorstr=#aa0000)"; /* IE8 IE9 */ background: -ms-linear-gradient(top left, #550000, #aa0000); /* IE6-9 */ background: -moz-linear-gradient(top, #550000, #aa0000); /* FF3.6+ */ background: -webkit-linear-gradient(top, #550000, #aa0000); /* Chrome10+, Safari5.1+ */ background: -o-linear-gradient(top, #550000, #aa0000); /* Opera 11.10+ */ background: linear-gradient(to bottom, #550000, #aa0000); /* IE10+, W3C */ } .gradientA { padding:4px; /* 内側の余白 */ border-radius:5px; /* 角の丸み */ width:98%; /* 横の長さ */ color:#ffffff; /* 文字の色 */ font-size:120%; /* 文字の大きさ */ margin-top: 0; margin-bottom: 0; font-weight: bold; } .gradientB { padding:4px; /* 内側の余白 */ border-radius:5px; /* 角の丸み */ width:98%; /* 横の長さ */ color:#ffffff; /* 文字の色 */ font-size:100%; /* 文字の大きさ */ font-weight:bold; /* 太字 */ margin-top: 0; margin-bottom: 0; } .gradientC { padding:4px; /* 内側の余白 */ border-radius:5px; /* 角の丸み */ width:85%; /* 横の長さ */ color:#ffffff; /* 文字の色 */ font-size:100%; /* 文字の大きさ */ font-weight:bold; /* 太字 */ } .gradientD { padding:7px; /* 内側の余白 */ border-radius:4px; /* 角の丸み */ width:98%; /* 横の長さ */ color:#ffffff; /* 文字の色 */ font-size:100%; /* 文字の大きさ */ font-weight:bold; /* 太字 */ } .gradientE { background-color: #4169E1; padding:2px 10px; /* 内側の余白 */ border-radius:4px; /* 角の丸み */ width:200px; /* 横の長さ */ color:#ffffff; /* 文字の色 */ font-size:90%; /* 文字の大きさ */ text-align: center; margin-top: 10px; } h4 { display:inline; } /* ▲ タイトルバー(見出し) ▲ */ /* ▼ テーブル ▼ */ .tableA { width:100%; } .table_hou1 { border-collapse:collapse; width:100%; border: 1px; } .table_hou2 { text-align:center; padding:10px; vertical-align:middle; border:1px; border-style:solid solid none none; width:50%; } .table_hou3 { text-align:center; padding:10px; vertical-align:middle; border:1px; border-style:solid none none solid; width:50%; } .table_hou4 { padding-top:20px; padding-right:15px; padding-bottom:20px; padding-left:0px; line-height:150%; vertical-align:middle; border:1px; border-style:solid solid none none; width:50%; } .table_hou5 { padding-top:20px; padding-right:5px; padding-bottom:20px; padding-left:5px; line-height:150%; vertical-align:middle; border:1px; border-style:solid none none solid; width:50%; } /* ▲ テーブル ▲ */ /* ▼ 記事 ▼ */ .entry_top_img { margin: 8px 5px 15px 5px; } .entry_top_img img { max-height: 300px; } .top_pv { margin: 0 0 25px 5px; line-height: 130%; } .top_pv iframe { height: 286px; width: 450px; } .entry_story { margin: 0 5px 3px 5px; line-height:130%; } .story_subtitle { font-size:100%; display:inline; margin-top: 0; margin-bottom: 0; } .entry_link { margin: 0; line-height:130%; font-size:110%; } .housou_day { margin: 0 5px 3px 5px; line-height:130%; } .staff_cast { margin: 0 5px 3px 5px; line-height:130%; } .staffcast_subtitle { font-size:100%; display:inline; margin-top: 0; margin-bottom: 0; } .op_ed { margin: 0 5px 3px 5px; line-height:130%; } .oped_subtitle { font-size:100%; display:inline; margin-top: 0; margin-bottom: 0; } .rakuten_img img { /* 楽天画像 */ max-width:160px; max-height:160px; } .entry_button { margin: 5px 0; } .linkA { /* 公式&Wikiリンク */ font-size:110%; /* 文字の大きさ */ } .linkB { /* 商品リンク */ font-size:110%; /* 文字の大きさ */ line-height:130%; } .infA { /* 商品説明 */ font-size:120%; /* 文字の大きさ */ } .rakuten_shina img { max-width:160px; max-height:160px; } .amazon_shina img { max-width:160px; max-height:160px; } .rakuten_shina { margin-bottom: 30px; text-align: left; } .amazon_shina { margin-bottom: 30px; text-align: left; } .rakuten_bd { text-align: left; width: 100%; } .rakuten_bd th { font-weight:normal; } .td_rakuten_bd1 { width: 120px; padding: 5px 0 20px 0; } .td_rakuten_bd2 { vertical-align: bottom; padding: 5px 0 20px 0; } .rakuten_cd { text-align: left; width: 100%; } .rakuten_cd th { font-weight:normal; } .td_rakuten_cd1 { width: 120px; padding: 1px; } .td_rakuten_cd2 { vertical-align: bottom; padding: 1px; } .amazon_bd { text-align: left; width: 100%; } .amazon_bd th { font-weight:normal; } .td_amazon_bd1 { width: 120px; padding: 0; } .td_amazon_bd2 { vertical-align: bottom; padding: 0; } .amazon_cd { text-align: left; width: 100%; } .amazon_cd th { font-weight:normal; } .td_amazon_cd1 { width: 120px; padding: 1px; } .td_amazon_cd2 { vertical-align: bottom; padding: 1px; } /* ▲ 記事 ▲ */ /* ▼ プラグイン行間 ▼ */ p.p_plugin { line-height:140%; } p.p_plugin2 { line-height:200%; } p.p_plugin3 { line-height:150%; } p.p_plugin4 { /* アニメ */ line-height:140%; font-size:95%; } /* ▲ プラグイン行間 ▲ */ /* ▼ 行間 ▼ */ .gyoukan1 { line-height:200%; } .gyoukan2 { line-height:150%; } .gyoukan3 { line-height:130%; } .gyoukan4 { line-height:180%; } /* ▲ 行間 ▲ */ /* ▼ アニメ一覧 ▼ */ .anime_ran1 { font-size: 120%; line-height:150%; font-weight: bold; } /* ▲ アニメ一覧 ▲ */ /* ▼ ボタン ▼ */ .button1, .button2, .button3, .button4 { padding:5px; font-size:100%; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-shadow: 0 -1px 1px #FFF, -1px 0 1px #FFF, 1px 0 1px #aaa; -webkit-box-shadow: 1px 1px 2px #E7E7E7; -moz-box-shadow: 1px 1px 2px #E7E7E7; background: -moz-linear-gradient(top, #fff, #F1F1F1 1%, #F1F1F1 50%, #DFDFDF 99%, #ccc); background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #F1F1F1), color-stop(0.5, #F1F1F1), color-stop(0.99, #DFDFDF), to(#ccc)); } /* ▲ ボタン ▲ */ /* ▼ トップ広告 ▼ */ .top_koukoku { text-align: center; margin: 0 auto; padding: 1px 5px 10px 5px; } /*ここからPC用(801px以上)環境の設定 ---------------------------------------------------------------------------*/ @media (min-width: 801px){ .top_koukoku_mobile { display: none; } } /* ▲ トップ広告 ▲ */ /* ▼ 右サイド固定広告 ▼ */ .side_right_sr { width: 215px; color: #666; background: #fff; } div.sr_fixed { position: fixed; left: 800; top: 10px; } /*ここからスマートフォン用(481px以上)環境の設定 ---------------------------------------------------------------------------*/ @media (min-width: 481px){ .table_animejun { width: 100%; border-collapse:collapse; } .table_animejun tr { border-top: 1px solid #666; border-bottom: none; border-right: none; border-left: none; padding: 0; text-align: left; } .table_animejun th { width: 45%; border-top: 1px solid #666; border-bottom: none; border-right: 1px solid #666; border-left: none; padding: 3px; margin: 0; } .table_animejun td { width: 55%; border-top: 1px solid #666; border-bottom: none; border-right: none; border-left: none; padding: 3px; margin: 0; } #table_animejun_2 { border-top: 1px solid #666; border-bottom: none; border-right: 1px solid #666; border-left: none; padding: 5px; margin: 0; text-align: center; font-size:16px; } #table_animejun_3 { border-top: 1px solid #666; border-bottom: none; border-right: none; border-left: none; padding: 5px; margin: 0; text-align: center; font-size:16px; } }