sirius レスポンシブテンプレートのＡＭＰ導入改変手順

レスポンシブ構造にＡＭＰ追加？

シリウスで配布されるレスポンシブテンプレートをGoogleが推奨するモバイル読込み効果..
AMP(Accelerated Mobile Pagesという、Googleが推進しているモバイルページを高速に
表示させるための手法によって作成される構造に適合させる仕様をレスポンシブテンプレートへ
組み込んでみました。

現在の検証は以下...AMP構造として認証されています..

テスト日時: 2019/01/26、4:06
有効な AMP ページです
このページは、Google 検索結果の AMP 検索機能の対象です

現在までにデフォルト2カラムで構造替え完了..
シリウスAMP_HTML構造導入手順.カスタマイズ偏

また、ampstartで配布されるソースをシリウスに導入完了..
sirius_amp｜シリウスへのAMP仕様導入..変更について

参照
https://www.ampstart.com/

導入に関しての説明

レスポンシブテンプレートの改変ですが、当サイトのトップページはシリウス機能のGナビ..
そしてカテゴリーPでは、外部導入のプルダウンタイプのナビで、二つの形態でご案内しますが
大変申し訳ないことですけど...レイアウト等はすでにあたしの勝手なセンス？でカスタマイズ済み..

ノンカスタムレイアウトはなんかいまいちで..どうにも作業意欲湧かず...

ですので、当ページ及びカテゴリーPのレイアウトでよければご利用ください..

ノンレスポンシブTPに関しては...当サイトの意味合いが理解できれば、相応にカスタマイズ
できると思います...

精査すべきこと
当記事では、トツプPからエントリｐ迄すべてAMP対応として説明しておりますが、もともとAMPは
ニュースサイトで速攻表示を目的に開発されたものですので、あなたの現サイトを全てAMPへ
改変することはおすすめしません..

シリウスでいえば、トップサイトはそのままにして、エントリーのみAMP...もしくはカテゴリーと併用..で、
良いと思います..

AMPページは、パソコンでHTMLサイトからリンクで一度呼び込まれる事で認知される事情があります..
トップサイトのサイドバーメニューよりリンクがあれば即認証ということですね..
全てをAMP化するとそれができない..
サブサイトなら全てAMP化してもメインサイトからリンクするという手立てはございますが？

手順ですが、あなたのサイトで導入するのは、エントリーかカテゴリーならいずれかのHTMLを
当サイト案内の記載と入れ替えるだけ..ヘッダー画像は手動導入ですね..

事前精査ください...

ここからはすべてAMPで進めています..

ヘッダー画像について

ヘッダー画像ですが、当構造の場合、サイト全体設定で読み込んだ背景画像が..ヘッダー画像に
見えるようにしているだけ..ですので....理解違いなさらないよう願います。

ヘッダー画像は読み込ませても反映されないということです...

高さ調整は、以下項目のpadding: 200px 0;の200を数値替えします。
デフォルトが当サイト例...数値を小さくすると記事背景がせりあがり狭まります...
400にすると上から下まで画像...になります。

#top #logo, #top h1 {
padding: 200px 0;
width: 600px;
}

そして、スクロールに関しても固定化しており動きません...
高さ..縦サイズですが...好みにより調整可能です...

デフォルト機能では、サイトオプションで背景を設定しますが、各テンプレートのCSSソース
で記述し呼び込ませることになります..

body {
以下の記述を参考に書き直してください..
background-image: url(https://www.affiliateno1.com/img/beauty-1319951_1920.jpg);
border-top: 4px solid #FF4E4E;
color: #333333;
font-family: 'メイリオ', Helvetica, 'Hiragino Kaku Gothic Pro', sans-serif;
font-size: 15px;
line-height:180%;
text-align: center;
letter-spacing: -0.001em;/* iOS4でのテキストの隙間への対応 */
-webkit-text-size-adjust: 100%;/* 文字サイズの自動調整機能のキャンセル */
background-attachment:fixed;
}

画像は、一度サーバーアップ...呼び込むにはサーバ＾内にファイルを送ってからでないと
表示されません..

仕様説明

基本...知っておくこと

AMP構造は、HTMLテンプレート内にスタイルシートCSSも同時に書き込むCSSテンプレート
ですので、シリウスのスタイルシート原本は読み込まれませんので編集すらしません..
あくまで、当サイト記載のHTMLソース内のCSSが読みこまれるのです..
編集する際はこちらを書き換えください...(トップ、カテゴリ、エントリとも個別記載）

文字化け対策
AMP仕様ですので最初に文字化け回避のためシリウス機能...サイトオプションで文字コードを
utf-8に設定してください..

Googleアドセンス取り付ける際の注意
AMP構造では、アドセンスコードであっても、scriptに囲まれた広告コードを配置すれば
AMPサイトとして認証されません..

AMPの自動広告など対応済みコードをご使用ください..

当サイト例
AMP自動広告は使いたくないもので、以下の記述に修正して使ってます..
というより...なんか導入が面倒なんですよね...

それが理由で以下にしてます..
コードのNO...あなたの番号に書き換えれば、そのまま使えます...
data-ad-client="ca-pub-9999999"
data-ad-slot="39999999">

フリースペース1に取り付けたコード
<noReturn>
<amp-ad
layout="fixed-height"
height=100
type="adsense"
data-ad-client="ca-pub-9999999"
data-ad-slot="39999999">
</amp-ad>
</noReturn>

ページ巻末フリースペース2に取り付けたコード
<noReturn>
<amp-ad
layout="fixed"
width=500
height=300
type="adsense"
data-ad-client="ca-pub-99999999"
data-ad-slot="59999999">
</amp-ad>
</noReturn>

サイドバー　フリースペース3.5に取り付けたコード
<noReturn>
<amp-ad
layout="fixed"
width=300
height=250
type="adsense"
data-ad-client="ca-pub-99999999"
data-ad-slot="59999999">
</amp-ad>
</noReturn>

ウェブマスターツールのメタタグ取り付けについて
シリウスのサイト全体設定のメタタグ入力ウィンドウに貼り付けても読み込まれません..

配置する際は、トップ及びカテゴリー　エントリーも全て...head内に貼り付けください...

ソースコード

ここで申し訳ございません
以下ソースを張り替えればほとんど完了するのですが、過労で説明が追い付いておりません
以降,,詳細を含めます..お待ちください..

以下ソースは、シリウスのトップ、カテゴリーテンプレートへ貼り付けください..
エントリーテンプレートは少し違いがあるので、こちらをお使いください..
エントリーページレイアウト

ソースコードここから...
<!doctype html>
<html amp lang="ja">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title><% pageTitle %></title>
<link rel="canonical" href="<% permaLink %>">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

/* メタタグこのあたりに配置がよいでしょう*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption {
background: transparent;
border: 0;
font-size: 100%;
outline: 0;
vertical-align: baseline;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}

body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
div, p, h1, h2, h3, h4, h5, h6 {
_zoom: 1;
display: block;
text-align: left;
}
img {
border: 0;
}
@media screen and (max-width: 899px) {
img {
font-size: 0;
height: auto;
line-height: 0;
max-width: 100%;
vertical-align: top;
}
}
@media screen and (max-width: 640px) {
img {
float: none important;
}
}

:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table {
border-collapse: collapse;
border-spacing: 0;
}
input, select {
vertical-align: middle;
}

p {
width: auto;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
}

/*
==================================================
基本スタイル
==================================================
*/
body {

background-image: url(https://www.affiliateno1.com/responsive-amp/img/beauty-1319951_1920.jpg);
border-top: 4px solid #FF4E4E;
color: #333333;
font-family: 'メイリオ', Helvetica, 'Hiragino Kaku Gothic Pro', sans-serif;
font-size: 15px;
line-height:180%;
text-align: center;
letter-spacing: -0.001em;/* iOS4でのテキストの隙間への対応 */
-webkit-text-size-adjust: 100%;/* 文字サイズの自動調整機能のキャンセル */
background-attachment:fixed;

}
@media screen and (max-width: 770px) {
body {
position: absolute;
top: -10px;

background-image: url(img/ben123.jpg);

}}

h1, h2, h3, h4, h5, h6, .title, dt {
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,'ＭＳＰゴシック',sans-serif;
font-weight: 700;
}
.clear {
clear: both;
font-size: 1px;
line-height: 0;
}
/* リスト
==================================================
*/
ul {
margin: 0 10px;
padding: 10px 0;
}
ul li {
background-image: url(img/li.png);
background-position: 5px 8px;
background-repeat: no-repeat;
padding: 0 0 0 16px;
}
ol {
list-style-type: decimal;
margin: 0 10px;
padding: 10px 0 10px 25px;
}
/* リンク
==================================================
*/
a { color: #0066cc; }
a:hover {
color: #0066cc;
text-decoration: none;
}
a:hover img {
background: none important;
}
a img { background: none important; }
#main a:hover, #menu a:hover, #rmenu a:hover, #pagetop a:hover {
left: 1px;
position: relative;
top: 1px;
}
@media screen and (max-width: 640px) {
#main a:hover, #menu a:hover, #rmenu a:hover, #pagetop a:hover {
left: 0;
position: static;
top: 0;
}
}

/*
==================================================
全体
==================================================
*/

/* レイアウト
==================================================
*/
#wrapper {
overflow: hidden;
text-align: center;
}
#contents {
margin: 0 auto;
padding: 20px 0 50px;
position: relative;
text-align: center;
width: auto;
background-color: #FBF8FB;
}
#layoutbox{
background-color: #FBF8FB;
overflow: hidden;
padding: 5px 10px;
}

#siteNavi {
font-size: 15px;
margin-bottom: 10px;
}
@media screen and (max-width: 899px) {
#contents {
padding: 30px 10px 50px;
width: auto;
}
#layoutbox{
padding: 5px;
}
}
@media screen and (max-width: 640px) {
#contents {
padding: 15px 0 50px;
}
#layoutbox{
padding: 5px 0;
}
#siteNavi {
font-size: 13px;
margin-bottom: 5px;
padding: 0 10px;
}
}

/* ページ上部へ戻る
==================================================
*/
#pagetop {
bottom: -3px;
clear: both;
position: absolute;
right: 10px;
z-index: 5;
}
#pagetop a {
background-image: url(img/pagetop_button.png);
background-position: left top;
background-repeat: no-repeat;
display: block;
height: 28px;
overflow: hidden;
text-indent: -9999px;
width: 100px;
}
@media screen and (max-width: 899px) {
#pagetop {
right: 10px;
}
#pagetop a {
background-image: url(img/pagetop_button2@.png);
background-position: right top;
padding-right: 50px;
}
}
@media screen and (max-width: 640px) {
#pagetop a {
bottom: 0;
overflow: hidden;
right: 0;
width: 100%;
border-top: 3px solid #799eba;
}

#pagetop a {
background-image: url(img/pagetop_button_smp.png);
background-position: center center;
background-repeat: no-repeat;
background-color: #FF4E4E;
border: none;
font-size: 13px;
height: 40px;
line-height: 40px;
padding: 0;
position: relative;
text-align: center;
width: 100%;
}
}

#searchbox {
background-image: url(img/search_input.png);
background-position: right top;
background-repeat: no-repeat;
font-size: 12px;
left: auto;
height: 28px;
margin-left: 0;
position: absolute;
top: 2px;
width: 100%;
max-width: 900px;
}
#searchbox input {
background-color: transparent;
border: none;
cursor: pointer;
height: 24px;
overflow: hidden;
position: absolute;
right: 170px;
text-indent: -9999px;
top: 2px;
vertical-align: middle;
width: 28px;
}
#searchbox form {
margin: 0;
padding: 0;
position: relative;
}
#searchbox .skwd {
background-image: none;
border: 0 none;
cursor: auto;
font-size: 12px;
right: 6px;
line-height: 18px;
text-indent: 0;
width: 160px;
}

@media screen and (max-width: 640px) {
#searchbox {
background-color: #FF4E4E;
background-image: url(img/searchbutton.png);
background-position: 15px 5px;
background-repeat: no-repeat;
margin: 10px auto 5px;
padding: 0 15px;
height: 40px;
top: auto;
right: auto;
position: relative;
width: 100%;
color: #333;
}
#searchbox input {
width: 30px;
height: 26px;
padding: 0;
color: #333;
left: 0px;
-webkit-appearance: none;
}
#searchbox input.skwd {
font-size: 14px;
margin: 0 0 0 30px;
padding: 0px 5px 0 5px;
background-color: #fff;
overflow: hidden;
max-width: 100%;
width: 82%;
}
}

.txt-img {
}
.txt-img img{
margin: 0 8px 8px 8px;
}
.center {
margin-bottom: 5px;
margin-top: 5px;
text-align: center;
}
.float-l { float: left;}
.float-r { float: right;}
.float-l img,
.float-r img {
margin-bottom: 20px;
}
.float-l img {
margin-right: 20px;
}
.float-r img {
margin-left: 20px;
}
.clear, .FloatEnd {
clear: both;
font-size: 1px;
height: 0;
line-height: 0;
}
/* (スマホ用)画像の中央揃え処理 */
@media screen and (max-width: 640px) {
.txt-img{
padding: 0 10px;
text-align: center important;
}
.txt-img,.txt-img img{
float:none important;
}
.float-l p,.float-l{
text-align:center;
float:none;
}
}

#top {
margin: 0 auto;
text-align: left;
width: 900px;
}
#top #logo, #top h1 {
padding: 200px 0;
width: 800px;
}
#top #logo a, #top h1 a {
color: #FF4E4E;
text-shadow: 0 0 1px rgba(78,123,160,.3);
font-size: 26px;
font-weight: 600;
text-decoration: none;
}
#top #logo a img, #top h1 a img {
vertical-align: middle;
}
@media screen and (max-width: 899px) {
#top {
width: auto;
}
#top #logo, #top h1 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 28px 0 28px 10px;
width: 66.6666666667%;
}
}
@media screen and (max-width: 640px) {
#top #logo, #top h1 {
padding: 18px 60px 18px 10px;
width: auto;
}
#top #logo a, #top h1 a {
font-size: 18px;
}
}

/* ヘッダー
==================================================
==================================================
*/
#headerbox .inner {
text-align: center;

}
#header {
height: 350px;
margin: 0 auto;
position: relative;
text-align: left;

position: fixed important;
position: absolute;
top: 0px;
left: 0;
　width: auto;
z-index: -10;
}

#layoutbox{
margin: 0 auto;
padding: 0px 0 5px;
position: relative;

background-color: #FBF8FB;
width: 1000px;

}

@media screen and (max-width: 899px) {
#headerbox {
position: relative;
}
#header {
height: auto important;
width: auto;
}
#header img {
position: static;
}
}
@media screen and (max-width: 640px) {
#header #headertxt {
padding: 15px 15px 5px;
position: static;
width: auto;
}
#header .title {
text-align: center;
text-shadow: 1px 1px 1px rgb(204, 204, 204);
}
#header .title a {
color:#FF4E4E;
font-size: 20px;
}
#header .desc {
color:#343434;
font-size: 12px;
}
}

/* トップメニュー
==================================================
*/
*:first-child+html body {
padding-left: 1px;
}
#nav {
border-bottom: 1px solid #000;
background-color: rgba(0,51,102,0.5);
}
#topmenubox {
margin: 0 auto;
text-align: center;
width: 1000px;
}
#topmenubox #topmenubtn {
display: none;
}
#topmenu ul,#topmenu li{
list-style-image: none;
list-style-type: none;
background-image: none;
}
#topmenu ul {
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,'ＭＳＰゴシック',sans-serif;
font-weight: 400;
overflow: hidden;
width: 1000px;
padding: 10px 0;
}
#topmenu li {
border-left: px solid #799eba;
border-right: px solid #3e6280;
padding: 0;
float: left;
width: 148px;
}
#topmenu li:last-child{
border-right: px solid #799eba;
}
#topmenu li a {
list-style-image: none;
color: #fff;
display: block;
font-size: 1em;
text-shadow: 0 0 1px rgba(255,255,255,.3);
overflow: hidden;
padding: 3px;
text-align: center;
text-decoration: none;
}
#topmenu li a:hover {
text-decoration: underline;
}
@media screen and (max-width: 899px) {
#topmenubox {
padding: 0;
width: auto;

}
#topmenu ul {
background: none repeat scroll 0 0 transparent;
display: table;
width: 100%;
clear: both;
margin: 0;
}
#topmenu li {
background: none repeat scroll 0 0 transparent;
display: table-cell;
float: none;
margin: 0;
padding: 0;
width: auto;
}
#topmenu li:before {
clear: both;
background-color: transparent;
content: "";
height: auto;
left: auto;
position: static;
top: auto;
width: auto;
}
#topmenu li a {
position: relative;
}
}
@media screen and (max-width: 768px) {
#nav {
border-bottom: none;
background-color: none;
display: none;
}
}

/*
==================================================
メインコンテンツ
==================================================
*/
/* 記事領域
==================================================
*/
#main {
float:left;
overflow: hidden;
word-wrap: break-word;
width: 680px;
}

@media screen and (max-width: 899px) {
#main {
width: 72.2222222222%;
}
}
@media screen and (max-width: 640px) {
#main {
float: none;
width: 100%;
}
}
#main .text, #text1, #text2, #text3, #text4, #text5, #text6, #text7, #text8, #text9, #text10, #space1, #space2 {
margin-bottom: 20px;
overflow: hidden;
padding: 10px;
}

/* 見出し
==================================================
*/
#main h2, #main h3 {
background-color: #FF4E4E;
margin-bottom: 5px;
padding: 7px 0;
color: #fff;
padding-left: 17px;
}
#main h2 span, #main h3 span {
display: block;
border-left: 4px solid #eef3f6;
color: #FFF;
font-size: 18px;
text-shadow: 0 0 1px rgba(255,255,255,.3);
margin: 2px 8px;
padding: 4px 0 0 8px;
}
#main .text h3, #text1 h3, #text2 h3, #text3 h3, #text4 h3, #text5 h3, #text6 h3, #text7 h3, #text8 h3, #text9 h3, #text10 h3, #space1 h3, #space2 h3 {
margin: 0 0 5px -10px;
}
#main h4 {
background-image: url(img/h4-border-Bottom.gif);
background-position: left bottom;
background-repeat: repeat-x;
margin: 5px auto;
position: relative;
}
#main h4 span {
background-image: url(img/h4.png);
background-position: left 10px;
background-repeat: no-repeat;
color: #FF4E4E;
text-shadow: 0 0 1px rgba(78,123,160,.3);
display: block;
font-size: 17px;
padding: 3px 0 3px 12px;
position: relative;

}
#main h5 {
background-image: url(img/h5.png);
background-position: left top;
background-repeat: no-repeat;
color: #333333;
text-shadow: 0 0 1px rgba(51,51,51,.1);
font-size: 16px;
line-height: 150%;
margin: 3px auto;
padding-left: 28px;
}
#main h6 {
background-image: url(img/h6.png);
background-position: left 1px;
background-repeat: no-repeat;
color: #333333;
text-shadow: 0 0 1px rgba(51,51,51,.1);
font-size: 16px;
margin: 3px auto;
padding-left: 22px;
line-height: 140%;
}
#main .atn02 {
background-color: #f2f2f2;
background-image: url(img/atn_02.gif);
background-position: 14px 14px;
background-repeat: no-repeat;
margin: 20px 0 10px;
overflow: hidden;
padding: 20px 20px 20px 50px;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
#main .atn02 {
background-image: url(img/atn_02@2x.gif);
-webkit-background-size: 22px 32px;
background-size: 22px 32px;
}
}
#main .atn02 span {
border-bottom: 1px dashed #c2c2c2;
color: #4d4d4d;
font-weight: bold;
padding-bottom: 3px;
}
@media screen and (max-width: 640px) {
#main h2, #main h3 {
margin: 0;
}
#main .text h3, #text1 h3, #text2 h3, #text3 h3, #text4 h3, #text5 h3, #text6 h3, #text7 h3, #text8 h3, #text9 h3, #text10 h3, #space1 h3, #space2 h3 {
margin: 20px -10px 10px;
}
}

/*
==================================================
サイドメニュー
==================================================
*/
/* メニュー
==================================================
*/

#menu img{
max-width:100%;
height:auto;
}

#menu {
float: right;
overflow: hidden;
width: 305px;
}
#menu ul#newEntry, #menu ul#entryarchive, #rmenu ul#newEntry, #rmenu ul#entryarchive {
background-image: url(img/menubox_bg.gif);
background-position: center bottom;
background-repeat: repeat-x;
padding: 0 0 5px 0;
}
#menu .rankbox {
border-bottom: 1px solid #E6E6E6;
font-size: 12px;
margin-bottom: 10px;
padding-bottom: 10px;
}
#menu .rankbox img {
width: 185px;
}
.menubox {
margin-bottom: 25px;
}
.menulist {
margin-bottom: 0 important;
overflow: hidden;
}
.menulist ul {
margin-bottom: 25px;
padding: 0 0 5px 0;
}
.menulist li {
background: none repeat scroll 0 0 transparent;
border-bottom: 1px solid #e6e6e6;
line-height: 150%;
padding: 0;
position: relative;
}
.menulist li a {
background-image: url(img/menu_bg.png);
background-position: 1px 17px;
background-repeat: no-repeat;
color: #333333;
display: block;
font-size: 14px;
padding: 12px 10px 12px 15px;
text-decoration: none;
}
.menulist li a:hover {
color: #FF4E4E;
text-decoration: underline;
}
.menulist .l2 a {
background-image: url(img/menu_bg2.png);
background-position: 15px 18px;
font-weight: normal;
padding-left: 26px;
}
.menulist .l3 a {
background-image: url(img/menu_bg2.png);
background-position: 30px 18px;
font-weight: normal;
padding-left: 41px;
}
#menu .title, #rmenu .title, #menu h4, #rmenu h4 {
background-color: #FF4E4E;
border-bottom: 2px solid #fafafa;
overflow: hidden;
position: relative;
text-shadow: none;
margin: 0;
color: #FFF;
height: 20px;
padding:13px;
}

#menu .title span, #rmenu .title span, #menu h4 span, #rmenu h4 span {

background-position: left 11px;
background-repeat: no-repeat;
color: #fff;text-shadow: 0 0 1px rgba(255,255,255,.3);
display: block;
font-size: 16px;

line-height: 300%;
}

@media screen and (max-width: 899px) {
#menu {
width: 24.4444444444%;
}
#column2 .menulist li a , .menulist .l2 a , .menulist .l3 a {
position: relative;
}
}
@media screen and (max-width: 640px) {
#menu {
float: none;
width: 100%;
}
#menu .title, #rmenu .title, #menu h4, #rmenu h4 {
margin-left: 0;
}
#menu .title span, #rmenu .title span, #menu h4 span, #rmenu h4 span {
font-size: 18px;
}
.menulist ul {
margin-bottom: 5px;
}
.menulist .l2,
.menulist .l3 {
display: none;
}
.menubox {
margin-bottom: 0;
}
#menu .title span, #rmenu .title span, #menu h4 span, #rmenu h4 span {
border-bottom: 1px solid #e6e6e6;
border-left: none;
border-right: none;
border-top: 1px solid #e6e6e6;
}
}

/* バナー領域
==================================================
*/
.bannerbox {
background-color: #FFF;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
behavior: url(css/PIE.htc);
margin-bottom: 10px;
position: relative;
}
.bannerbox ul {
padding: 5px;
}
.bannerbox li {
background: none repeat scroll 0 0 transparent;
margin-bottom: 5px;
padding: 0;
}
.bannerbox li a {
font-size: 15px;
}
.bannerbox li a img {
vertical-align: bottom;
}
@media screen and (max-width: 899px) {
.bannerbox li:before {
background-color: transparent;
content: "";
height: auto;
left: auto;
position: static;
top: auto;
width: auto;
}
.menulist li:before {
background-color: transparent;
}
}
@media screen and (max-width: 640px) {
.bannerbox li {
margin-bottom: 10px;
text-align: center;
}
}

/* 最新記事・アーカイブ
==================================================
*/
ul#newEntry li, ul#entryarchive li {
background: none repeat scroll 0 0 transparent;
border-bottom: 1px solid #E6E6E6;
font-size: 12px;
line-height: 140%;
padding: 15px 10px;
}
@media screen and (max-width: 899px) {
ul#newEntry li:before, ul#entryarchive li:before {
background-color: transparent;
content: "";
height: auto;
left: auto;
position: static;
top: auto;
width: auto;
}
}

/*
==================================================
フッター
==================================================
*/
#footer {
border-top: 3px solid #799eba;
background-color: #000;
color: #FFF;
font-size: 12px;
margin: 0 auto;
text-align: center;
}
#footer .inner {
margin: 0 auto;
overflow: hidden;
padding: 2px 0 2px;
width: 900px;
text-align: center;
font-size: 13px;
}
#footer a {
color: #FFF;
}
#footer p {
float: right;
overflow: hidden;
position: relative;
word-wrap: break-word;
}
#footlinkbox {
background-color: #000;
padding: 10px 10px 5px;
text-align: center;
}
#footermenu {
ont-size: 0;
letter-spacing: -.40em;
line-height: 26px;
margin: 0 auto;
text-align: left;
max-width: 900px;
}
#footermenu span {
display: inline-block;
margin: 0 25px 5px 0;
display: inline;
zoom: 1;
}
#footermenu a {
border-right: 1px solid #799eba;
color: #fff;
letter-spacing: normal;
line-height: 140%;
font-size: 12px;
padding-right: 25px;
text-decoration: none;
}
#footermenu a:hover {
text-decoration: underline;
}
#footer #footsub {
text-align: center;
max-width: 900px;
height: auto;
margin: 10px auto 0;
}
#footer .copyright {
display: block;
background-color: #000;
line-height: 28px;
text-align: center;
font-size: 14px;
}
@media screen and (max-width: 899px) {
#footer .inner {
text-align: center;
max-width: 100%;
}
#footlinkbox {
padding: 15px 0 5px 10px;
}
#footermenu {
max-width: 100%;
}
}
@media screen and (max-width: 640px) {
#footer {
background-image: none;
border-top: none;
}
#footlinkbox {
margin-bottom: 0;
padding: 0;
}
#footermenu span {
border-bottom: 1px solid #799eba;
display: block;
margin: 0;
}
#footermenu a {
border-right: none;
display: block;
font-size: 13px;
padding: 12px 24px 12px 10px;
position: relative;
text-decoration: none;
}

#footermenu {
position: static;
width: auto;
margin: 0;
padding: 0;
}
#footer .inner {
background-color: #000;
padding: 0px 10px 10px 0;
line-height: 130%;
}
#footer #footsub {
text-align: center;
}
#footer #footsub a {
text-decoration: none;
}
#footer #footsub a:first-child {
border-left: none;
}
}

#whatsnew {
margin-bottom: 20px;
position: relative;
}
#whatsnew .title {
background-color: #FF4E4E;

margin-bottom: 5px;
padding: 5px 0;
}
#whatsnew .title span {
background-image: url(img/whatsnew_title.png);
background-position: left top;
background-repeat: no-repeat;
display: block;
color: #FFF;text-shadow: 0 0 1px rgba(255,255,255,.3);
font-size: 18px;
font-weight: 600;
margin: 2px 0px;
padding: 4px 38px;
}
#whatsnew ul {
padding: 0;
}
#whatsnew ul li {
background: none repeat scroll 0 0 transparent;
border-bottom: 1px dotted #ccc;
font-size: 15px;
padding: 10px 15px;
position: relative;
}
#whatsnew ul li span {
padding-right: 10px;
}
@media screen and (max-width: 899px) {
#whatsnew .title {
position: relative;
}
#whatsnew ul li:before {
background-color: transparent;
}
}
@media screen and (max-width: 640px) {
#whatsnew {
background-color: #fbfbfb;
margin-bottom: 0;
padding: 10px 0 0;
}
#whatsnew .title {
margin-right: 0;
border-bottom: none;
}
#whatsnew ul {
background-color: #ffffff;
border-bottom: 1px solid #e6e6e6;
}
#whatsnew ul:last-child {
border-bottom: none;
}
#whatsnew ul li:last-child {
border-bottom: none;
}
#whatsnew ul li span {
color: #666666;
display: block;
padding-right: 0;
}
}

#categorylist {
padding: 10px;
}
#categorylist .catbox {
background-color: #f2f5f8;
margin-right: 10px;
margin-bottom: 30px;
overflow: hidden;
position: relative;
font-size: 15px;
_height: 1%;
}
#categorylist .thumb {
float: left;
padding: 0 20px 0 0;
}
#categorylist .thumb img {
vertical-align: bottom;
}
#categorylist .body {
overflow: hidden;
}
#categorylist .title {
background-image: url(img/h4-border-Bottom.gif);
background-position: left bottom;
background-repeat: repeat-x;
font-weight: 700;
margin-bottom: 10px;
overflow: hidden;
padding: 10px 15px 8px 15px;
}
#categorylist .title a {
background-image: url(img/category_title.png);
background-position: left 9px;
background-repeat: no-repeat;
color: #FF4E4E;
font-size: 18px;
line-height: 1.6;
text-decoration: none;
padding: 6px 22px 13px;
}
#categorylist p {
font-size: 15px;
line-height: 170%;
padding: 0 15px;
}
#categorylist .more {
float: right;
height: 30px;
margin: 10px 1px 1px 0;
padding: 0 15px 15px 0;
_height: 1%;
}
#categorylist .more a {
background-image: url(img/button_more2.png);
background-position: right 6px;
background-repeat: no-repeat;
display: block;
padding-right: 19px;
color: #FF4E4E;
}
#pagelist {
margin-bottom: 10px;
margin-top: 10px;
padding: 10px;
text-align: center;
}
#pagelist ul {
letter-spacing: -0.4em;
padding: 0;
}
#pagelist li {
background: none repeat scroll 0 0 transparent;
display: inline-block;
letter-spacing: normal;
list-style-type: none;
margin: 0 5px 10px;
padding: 0;
display: inline;
zoom: 1;
}
#pagelist a {
background-color: #fbfbfb;
border: 1px solid #e6e6e6;
color: #333333;
display: inline-block;
padding: 6px 15px;
text-align: center;
text-decoration: none;
display: inline;
zoom: 1;
}
#pagelist a:hover {
background-color: #333333;
color: #FFF;
}
@media screen and (max-width: 899px) {
#categorylist .more a {
background-position: right 4px;
display: block;
font-size: 15px;
height: 26px;
line-height: 24px;
overflow: hidden;
position: relative;
text-align: center;
text-indent: inherit;
}
#categorylist .more a:before {
border-bottom: none;
border-left: none;
border-right: 1px solid #ffffff;
border-top: 1px solid #ffffff;
content: "";
height: 4px;
margin-top: -2px;
position: absolute;
right: 16px;
top: 50%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 4px;
}
#pagelist li:before {
background-color: transparent;
content: "";
height: auto;
left: auto;
position: static;
top: auto;
width: auto;
}
}
@media screen and (max-width: 640px) {
#categorylist .catbox {
padding: 15px;
}
#categorylist .thumb {
float: left;
padding: 0 15px 0 0;
}
#categorylist .thumb img {
max-width: 100px;
}
#categorylist .title {
padding: 5px 0;
}
#categorylist .title a {
font-size: 16px;
background-position: left 5px;
line-height: 1.6;
padding: 4px 22px 15px;
}
#categorylist p {
font-size: 14px;
line-height: 150%;
}
}

#entrylist {
margin-right: 10px;
margin-bottom: 20px;
background-color: #f2f5f8;
}
#entrylist .inner {
overflow: hidden;
text-align: left;
}
#entrylist h4 {
background-image: none;
background-color: #FF4E4E;
margin-bottom: 5px;
padding: 5px 0;
}
#entrylist h4 span {
background-image: url(img/entrylist-h4.png);
background-position: left 2px;
background-repeat: no-repeat;
display: block;
color: #FFF;text-shadow: 0 0 1px rgba(255,255,255,.3);
line-height: 32px;
font-size: 18px;
margin: 2px 8px 2px 0;
padding: 4px 8px 2px 38px;
}
#entrylist dl {
overflow: hidden;
position: relative;
top: -1px;
height: 1%;
}
#entrylist dt {
border-top: 1px dotted #ccc;
margin: 0 10px;
padding: 15px 5px;
position: relative;
height: 1%;
}
#entrylist dt:first-child {
border-top: none;
}
#entrylist dt a {
background-image: url(img/entry_title.png);
background-position: left 4px;
background-repeat: no-repeat;
display: inline-block;
font-size: 15px;
font-weight: 500;
line-height: 150%;
padding: 1px 0 1px 19px;
display: inline;
zoom: 1;
}
#entrylist dd {
font-size: 15px;
line-height: 150%;
margin-top: -10px;
padding: 0 10px 15px 25px;
}
#searchresult {
margin-bottom: 20px;
overflow: hidden;
padding: 10px;
}
#relNavigate {
margin-bottom: 15px;
padding-bottom: 10px;
padding-top: 10px;
text-align: center;
}
#relNavigate a {
font-size: 14px;
font-weight: 700;
margin-left: 10px;
margin-right: 10px;
}
@media screen and (max-width: 640px) {
#entrylist {
margin: 0;
padding: 0;
}
#entrylist h4 {
margin-left: -10px;
padding: 8px;
}
#entrylist h4 span {
font-size: 18px;
}
#entrylist dl {
border-bottom: none;
padding: 0 5px;
top: 0;
}
#entrylist dt {
padding: 15px 5px;
}
#entrylist dt:first-child {
border-top: none;
}
#entrylist dt a {
font-size: 15px;
}
#entrylist dt a:hover {
position: relative;
}
#entrylist dd {
font-size: 14px;
line-height: 140%;
padding: 0 5px 15px 20px;
}
#relNavigate a {
background-color: #FBFBFB;
color: #333333;
display: inline-block;
height: 40px;
line-height: 40px;
position: relative;
text-decoration: none;
width: 35%;
z-index: 0;
}
#relNavigate a:hover {
position: relative;
}
#relNavigate a:first-child {
border-bottom: 1px solid #E6E6E6;
border-right: 1px solid #E6E6E6;
border-top: 1px solid #E6E6E6;
}
#relNavigate a:last-child {
border-bottom: 1px solid #E6E6E6;
border-left: 1px solid #E6E6E6;
border-top: 1px solid #E6E6E6;
}
#relNavigate a:before {
background-color: #FBFBFB;
content: "";
height: 29px;
position: absolute;
top: 5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 29px;
z-index: -1;
}
#relNavigate a:first-child:before {
border-bottom: 1px solid #E6E6E6;
border-left: 1px solid #E6E6E6;
left: -15px;
}
#relNavigate a:last-child:before {
border-right: 1px solid #E6E6E6;
border-top: 1px solid #E6E6E6;
right: -15px;
}
}

#sitemaps ul {
margin: 0;
padding: 5px 10px;
}
#sitemaps li {
background-image: none;
line-height: 0;
padding: 0;
}
#sitemaps .l1 {
margin-top: 10px;
}
#sitemaps .l2 {
margin-top: 5px;
}
#sitemaps .l3 {
margin-top: 5px;
}
#sitemaps li a {
background-image: url(img/menu_bg.png);
background-position: left 8px;
background-repeat: no-repeat;
display: inline-block;
line-height: 180%;
list-style-image: none;
list-style-type: none;
padding-left: 12px;
display: inline;
zoom:1;
color: #333;
text-decoration: none;
}
#sitemaps .l1 a {
font-size: 16px;
font-weight: 700;
}
#sitemaps .l2 a {
background-image: url(img/menu_bg2.png);
font-size: 14px;
margin-left: 25px;
}
#sitemaps .l3 a {
background-image: url(img/menu_bg2.png);
background-position: left 6px;
font-size: 12px;
margin-left: 45px;
}

@media screen and (max-width: 640px) {
#sitemaps ul {
padding: 0 10px;
}
#sitemaps li {
border-bottom: 1px solid #ddd;
}
#sitemaps .l1,
#sitemaps .l2,
#sitemaps .l3 {
margin-top: 0;
}
#sitemaps li a {
display: block;
padding: 12px 10px 12px 25px;
text-decoration: none;
}
#sitemaps .l1 a {
background-position: 10px 18px;
line-height: 1.5;
}
#sitemaps .l2 a {
margin-left: 0;
background-position: 25px 20px;
padding: 12px 40px;
}
#sitemaps .l3 a {
font-size: 13px;
background-position: 2px 16px;
padding: 10px 15px;
}
#sitemaps li a:before {
left: 20px;
top: 20px;
}
#sitemaps .l2 a:before {
left: auto;
margin-top: -3px;
right: 20px;
top: 50%;
}
#sitemaps .l3 a:before {
left: 50px;
}
}

#space1, #space2 { margin-bottom: 25px }
#space3, #space4, #space5, #space6 {
line-height: 130%;
padding: 10px;
}

.grayline{
border: 1px solid #CCCCCC;
margin: 10px;
}
.graybg{
margin: 10px;
}

#main .grayline{
margin: 10px;
padding:10px;
margin-bottom:15px;
}

#menu .grayline{
font-size:90%;
padding:8px;
margin-bottom:15px;
}

}

.blog {
border-bottom-color: #e6e6e6;
border-bottom-style: solid;
border-bottom-width: 1px;
margin-bottom: 15px;
overflow: hidden;
padding: 10px;
}
.blog .thumb {
float: left;
margin-right: 15px;
}
.blog .thumb img { width: 125px; }
.blog .title {
background-image: url(img/h6.png);
background-position: 10px 1px;
background-repeat: no-repeat;
color: #333333;
text-shadow: 0 0 1px rgba(51,51,51,.1);
font-size: 16px;
margin: 3px auto;
padding-left: 34px;
line-height: 140%;
}
.blog .title a { color: #333; }
.blog .info {
color: #666;
margin-bottom: 10px;
padding: 0 10px;
}
.blog .info a { color: #666; }
.blog .body {
line-height: 150%;
overflow: hidden;
padding: 0 10px;
}
.blog .more {
font-weight: 700;
margin-bottom: 10px;
margin-top: 10px;
padding-right: 5px;
text-align: right;
}

#searchresult dt {
font-size: 14px;
padding: 5px 0;
}
#searchresult dd {
border-bottom-color: #e6e6e6;
border-bottom-style: solid;
border-bottom-width: 1px;
line-height: 150%;
margin: 0 0 10px;
padding-bottom: 15px;
}
#searchresult b {
color: #0066CC;
}
@media screen and (max-width: 640px) {
#searchresult dt {
padding: 15px 10px 5px;
}
#searchresult dd {
margin: 0 0 0;
padding: 0 10px 15px;
}
}

#linklist {
margin-bottom: 20px;
overflow: hidden;
padding: 10px;
}
#linklist dt {
font-size: 14px;
padding: 5px 0;
}
#linklist dd {
border-bottom-color: #e6e6e6;
border-bottom-style: solid;
border-bottom-width: 1px;
line-height: 130%;
margin: 0 0 10px;
padding-bottom: 15px;
}

#column1 {
background-image: url(img/column_bg.gif);
background-position: center top;
background-repeat: no-repeat;
text-align: center;
}
#column1 #menu, #column1 #main {
float: none;
width: auto;
}
#column1 #main {
margin-left: 0;
padding-bottom: 20px;
}

#column1 #menu {
margin-right: 10px;
}
#column1 #menu .menulist {
padding: 0;
}
#column1 #menu .menubox {
padding-top: 10px;
}
#column1 #menu ul {
background: none repeat scroll 0 0 transparent;
letter-spacing: -0.4em;
padding: 0;
}
#column1 #menu li {
background-image: url(img/menu_bg.png);
background-position: left 5px;
background-repeat: no-repeat;
border: none;
display: inline-block;
letter-spacing: normal;
padding: 0 0 0 4px;
display: inline;
zoom: 1;
}
#column1 #menu li a , #column1 #menu #newEntry li a {
background: none repeat scroll 0 0 transparent;
display: inline;
font-weight: 400;
padding: 0;
text-decoration: underline;
}
#column1 #menu li a:hover , #column1 #menu #newEntry li a:hover {
text-decoration: none;
}
#column1 #menu .menulist li a, #column1 #menu .menulist li.l2 a, #column1 .menulist #menu li.l3 a {
margin: 0 5px;
padding: 0 5px;
}
#column1 #menu ul#newEntry li, #column1 #menu ul#entryarchive li, #column1 #rmenu ul#newEntry li, #column1 #rmenu ul#entryarchive li {
margin: 0 5px;
padding: 0 5px;
background-image: none;
}
@media screen and (max-width: 899px) {
#column1 {
background: none repeat scroll 0 0 transparent;
}
}
@media screen and (max-width: 640px) {
#column1 #main {
margin-left: 0;
padding-bottom: 0;
}
#column1 #menu {
margin-right: 0;
}
#column1 #menu ul {
letter-spacing: normal;
padding: 0 0 5px;
position: relative;
}
#column1 #menu ul#newEntry, #menu ul#entryarchive, #rmenu ul#newEntry, #rmenu ul#entryarchive {
background: none repeat scroll 0 0 transparent;
padding: 0 0 10px 0;
position: relative;
}
#column1 #menu .menubox {
padding-top: 0;
}
#column1 .menulist ul {
background: none repeat scroll 0 0 transparent;
position: relative;
}
#column1 #menu li {
background: none repeat scroll 0 0 transparent;
border-bottom: 1px solid #e6e6e6;
line-height: 150%;
padding: 0;
position: relative;
display: block;
}
#column1 #menu .menulist .l2, #column1 #menu .menulist .l3 {
display: none;
}
#column1 #menu li a {
background-image: url(img/menu_bg.png);
background-position: 20px 17px;
background-repeat: no-repeat;
color: #333333;
display: block;
font-size: 14px;
padding: 12px 10px 12px 35px;
text-decoration: none;
}
#column1 #menu li a:hover {
color: #FF4E4E;
text-decoration: underline;
}
#column1 #menu .menulist li a, #column1 #menu .menulist li.l2 a, #column1 .menulist #menu li.l3 a {
margin: 0;
padding: 12px 10px 12px 35px;
}
#column1 #menu ul#newEntry li, #column1 #menu ul#entryarchive li, #column1 #rmenu ul#newEntry li, #column1 #rmenu ul#entryarchive li {
margin: 0;
padding: 15px 10px;
}
}

/*ヘッダーまわりはサイトに合わせて調整してください*/
header {
padding:30px;
background: skyblue;
display:none;
}

#nav-drawer {

z-index: 2000;
position:fixed;

}

/*チェックボックス等は非表示に*/
.nav-unshown {
display:none;
}

/*アイコンのスペース*/
#nav-open {
display: inline-block;
width: 30px;
height: 22px;
vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
position: absolute;
height: 3px;/*線の太さ*/
width: 25px;/*長さ*/
border-radius: 3px;
background: #FF0A0A;
display:none;
content: '';
cursor: pointer;
}
#nav-open span:before {
bottom: -8px;
}
#nav-open span:after {
bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
display: none;/*はじめは隠しておく*/
position: fixed;
z-index: 99;
top: 0;/*全体に広がるように*/
left: 0;
width: 100%;
height: 100%;
display:none;
opacity: 0;
transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;/*最前面に*/
width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
max-width: 330px;/*最大幅（調整してください）*/
height: 100%;
background: #ffffff;/*背景色*/
transition: .3s ease-in-out;/*滑らかに表示*/
-webkit-transform: translateX(-105%);
transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
display:none;;/*カバーを表示*/
opacity: .5;
}

#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);/*中身を表示（右へスライド）*/
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

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

/*ヘッダーまわりはサイトに合わせて調整してください*/
header {
padding:30px;
background: skyblue;
display: block;

}

#nav-drawer {

z-index: 2000;
position:fixed;
padding:20px;
right: 3px;
}

a { color: #333; }
a:hover {
color: #C50000;
text-decoration: none;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
display:none;
}

/*アイコンのスペース*/
#nav-open {
display: inline-block;
width: 30px;
height:30px;
vertical-align: middle;

}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
position:absolute;
height: 3px;/*線の太さ*/
width: 25px;/*長さ*/
border-radius: 3px;
background: #0A8FFF;
display: block;
content: '';
cursor: pointer;
}
#nav-open span:before {
bottom: -8px;
}
#nav-open span:after {
bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
display: none;/*はじめは隠しておく*/
position: fixed;
z-index: 99;
top: 0;/*全体に広がるように*/
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;/*最前面に*/
width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
max-width: 400px;/*最大幅（調整してください）*/
height: 100%;
background: #FFF;/*背景色*/
transition: .3s ease-in-out;/*滑らかに表示*/
-webkit-transform: translateX(-105%);
transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
display: block;/*カバーを表示*/
opacity: .5;
}

#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);/*中身を表示（右へスライド）*/
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
}

.nav {
padding: 0 px;
margin: 0 auto0px;
width: auto;

}
.fixed {
position: relative;
top: -0;
left: 0;
width: 100%;
z-index: 7999;
}

.dropcc{
zoom: 1;
list-style-type: none;
width: 1000px;
margin: -8px auto 48px;
padding: 0;
}

.dropccbefore, .dropmenu:after{
content: "";
display: table;
}
.dropcc:after{
clear: both;
}
.dropcc li{
position: relative;
width: 20%;

float: left;
margin: 0;
padding: 0;
text-align: center;
}
.dropcc li a{
display: block;
margin: 0;
padding: 15px 20px;
color: #fff;
font-size: 14px;
line-height: 1.7.;
text-decoration: none;

}

.dropcc li ul{
list-style: none;
position: absolute;

z-index: 9999;
top: 100%;
left: 0;
margin: 100;
padding: 0;
}
.dropcc li ul li{
width: 100%;

}
.dropcc li ul li a{
padding: 10px 10px;
border-top: 1px solid #00C5A5;
background: #810000;

text-align: left;

}
.dropcc li:hover > a{
background: #000000;

}
.dropcc li a:hover{
background: #000000;
}

#normalnavvvi li ul {
visibility: hidden;
perspective: 400px;
width: 250px;

}
#normalnavvvi li:hover ul{
visibility: visible;
}
#normalnavvvi ul li{
transform: rotateY(90deg);
transform-origin: 50% 0;
transition: .3s;
}
#normalnavvvi li:hover li{
transform: rotateY(0);
}
#normalnavvvi ul li:nth-child(2) {
transition-delay: .1s;
}
#normalnavvvi ul li:nth-child(3) {
transition-delay: .2s;
}
#normalnavvvi ul li:nth-child(4) {
transition-delay: .3s;
}
#normalnavvvi ul li:nth-child(5) {
transition-delay: .4s;
}

@media screen and (max-width: 640px) {
.dropcc{
zoom: 1;
list-style-type: none;
width: 1000px;
margin: -8px auto 48px;
padding: 0;
display: none;
}

.dropccbefore, .dropmenu:after{
content: "";
display: table;
display: none;
}
.dropcc:after{
clear: both;
}
.dropcc li{
position: relative;
width: 20%;

float: left;
margin: 0;
padding: 0;
text-align: center;
display: none;
}
.dropcc li a{
display: block;
margin: 0;
padding: 15px 20px;
color: #fff;
font-size: 14px;
line-height: 1.7.;
text-decoration: none;
display: none;
}

.dropcc li ul{
list-style: none;
position: absolute;

z-index: 9999;
top: 100%;
left: 0;
margin: 100;
padding: 0;
display: none;
}
.dropcc li ul li{
width: 100%;

display: none;
}
.dropcc li ul li a{
padding: 10px 10px;
border-top: 1px solid #00C5A5;
background: #810000;

text-align: left;

display: none;
}
.dropcc li:hover > a{
background: #000000;

}
.dropcc li a:hover{
background: #000000;
display: none;
}

}

.scrollToTop {
color: #fafafa;
font-size: 1.4em;
box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12), 0 1px 1px 0 rgba(0,0,0,.24);
width: 60px;
height: 60px;
border-radius: 100px;
border: none;
outline: none;
background: #E91E63;
z-index: 9999;
bottom: 10px;
right: 10px;
position: fixed;
opacity: 0;
visibility: hidden;
}
#marker {
position: absolute;
top: 100px;
width: 0px;
height: 0px;
}

</style>

</head>
<body>

<li><a href="#">TOP</a>
<ul>
<li><a href="<% pageDepth %>">トップページ</a></li>
</ul>
</li>
<li><a href="#">質問</a>
<ul>
<li><a class="amp-nav-link" href="https://www.affiliateno1.com/シリウスカスタマイズサポートフォーラム/シリウスカスタマイズサポートフォーラム一覧/">シリウスカスタマイズサポート</a></li>

</ul>
</li>
<li><a href="#">ご案内</a>
<ul>
<li><a href="<% pageDepth %>sitemap.html">サイトマップ</a></li>

</ul>
</li>
<li><a href="#">関連サイト</a>
<ul>
<li><a class="amp-nav-link" href="https://www.affiliateno1.com/">オンラインマニュアルLibrary</a></li>
<li><a class="amp-nav-link" href="https://www.affiliateno1.com/new.sirius.customize/">ニューテンプレートカスタマイズ</a></li>
<li><a class="amp-nav-link" href="https://www.affiliateno1.com/sirius_amp/">外部導入AMPソース公開</a></li>
<li><a class="amp-nav-link" href="https://www.affiliateno1.com/sirius_mobile_amp/">シリウスAMP切り替え</a></li>
</ul>
</li>
<li><a href="#">装飾</a>
<ul>
<li><a class="amp-nav-link" href="https://www.affiliateno1.com/designer/">シリウスサイトに取り付け可能なＣＳＳ装飾品？.まとめ</a></li>

</ul>
</li>
</div>
</div>

<div id="nav-drawer">
<input id="nav-input" type="checkbox" class="nav-unshown">
<label id="nav-open" for="nav-input"><span></span></label>

<a href="<% pageDepth %>sitemap.html">サイトマップ</a>
<div><li><a href="http://ailibrarys.org/drupal/">　drupal</a></li></div>
<div><li><a href="https://joomla-ja.org/">　joomla-ja.org</a></li></div>
<div><li><a href="https://ailibrary-jp.org/">　アイライブラリー|web. creator</a></li></div>
<div><li><a href="https://www.affiliateno1.com/">　オンラインマニュアルLibrary</a></li></div>
<div><li><a href="https://www.affiliateno1.com/sirius.customize/">　シリウスレスポンシブテンプレート専用のカスタマイズまとめ</a></li></div>
</div>
</div>
</div>
<div id="top">
<amp-animation id="showAnim"
layout="nodisplay">
<script type="application/json">
{
"duration": "200ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [{
"selector": "#scrollToTopButton",
"keyframes": [{
"opacity": "1",
"visibility": "visible"
}]
}]
}
</script>

</amp-animation>

<div id="headertxt">
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(div class="title") %>
<% pageDescription | str_replace(id="headertext",class="desc") %>
</div>
</div>
</div>
</div>

<% freeSpace1 %>
<% textTitle1 %>
<% textBody1 %>
<% textTitle2 %>
<% textBody2 %>
<% textTitle3 %>
<% textBody3 %>
<% textTitle4 %>
<% textBody4 %>
<% textTitle5 %>
<% textBody5 %>
<% textTitle6 %>
<% textBody6 %>
<% textTitle7 %>
<% textBody7 %>
<% textTitle8 %>
<% textBody8 %>
<% textTitle9 %>
<% textBody9 %>
<% textTitle10 %>
<% textBody10 %>
<% freeSpace2 %>

<% if:siteMode(normal) %>

<% whatsNew | tag_put(<div class="title"><span>更新履歴</span></div>) | tag_insert(div id="whatsnew") %>

<% else %>

<% AQNewEntries(10) %>
<div class="blog">
<% pageThumbnail | tag_insert(div class="thumb") %>
<div class="title"><a href="<% permaLink %>"><% pageTitle %></a></div>
<div class="info"><% pagePublicDate | parseDatetime(yyyy/MM/dd HH:mm:dd) %> | <% parentPageList_all | tag_insert(span class="plist") %></div>
<div class="body"><% pageBody | tag_strip | str_replace( ,) | oneline | shorten(300,true) %><div class="more"><a href="<% permaLink %>">≫この記事の続きを読む</a></div></div>
</div>

<% /AQNewEntries %>
<% /if %>
</div>
<div id="menu">

<% freeSpace3 %>

<% siteMenu | tag_replace(div class="menubox",div class="menubox menulist") %>
<% subMenu | tag_replace(div class="menubox",div class="menubox menulist") %>
<% freeSpace4 %>
<% freeSpace5 %>

</div>
<br class="clear" />
</div>

</div>
</div>
<div id="footer">
<div class="inner">
<% footerMenu | tag_insert(div id="footlinkbox") %>
<% searchTag | str_replace(,) | str_replace(image,submit) | tag_insert(div id="searchbox") %>
<div id="footsub"><% PRLink %><% sitemapPageLink %></div>
</div>
<div class="copyright">Copyright (C) <% thisYear %> <% siteTitle %>All Rights Reserved.<% accessAnalyzer %></div>
</div>
</div>
</body>
</html>

ここまで...

スポンサー広告

更新履歴

(2019/04/21)エントリーページレイアウトを更新しました