@charset "Shift_JIS";

/* テンプレート#019 * designed by starlit * http://sky.starlit.biz/ */

/* 全称セレクタ--------------------------------------------- */

* {
margin:0;padding:0;
font:normal normal normal 12px/1.6 "Lucida Grande","Hiragino Kaku Gothic ProN",Meiryo,"メイリオ",sans-serif;
border:none;
}

/* 全体指定------------------------------------------------- */

body {
color:#333333;
text-align:center;
margin-bottom:50px;/* ページ下部余白 */
}

html {
scrollbar-arrow-color:#333333;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-3dlight-color:#ffffff;
scrollbar-track-color:#ffffff;
scrollbar-shadow-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
}

/* リンク--------------------------------------------------- */

a{text-decoration:none;font-size:100%}
a:link,a:visited {color:#333333;}
a:active {color:#333333;}
a:hover {color:#f26b7a;position:relative;top:1px;left:1px;}

/* 文字----------------------------------------------------- */

em {color:#333333;font-weight:bold;}/* 強調 */
strong {color:#333333;font-weight:bold;font-size:120%;border-bottom:2px solid #f26b7a;}/* より強い強調 */
del {text-decoration:line-through;}/* 削除 */
ins {text-decoration:underline;}/* 追加 */
small {font-size:80%;}/* 文字を小さく */

/* 他指定--------------------------------------------------- */

ul li {list-style:none;}/* リストマーク(非表示) */
img.img {border:1px solid #333333;}/* 画像周りの枠を付けたい場合 */
#wrapper br.clear {clear:both;}/* float解除用 */


/* ********************************************************* */
/* レイアウト */
/* ********************************************************* */


/* 横幅指定 */
#wrapper {width:870px;}
#header,#footer,ul#menu {width:850px;}/* 850px+10px+10px(padding分)=870pxという計算 */
#contents,#wrapper hr {width:840px;}

/* 全体 */
#wrapper {
margin:0px auto 8px auto;
padding:0px 10px;
/* ↓全体のライン指定 */
border-left:3px solid #333333;
border-right:3px solid #333333;
border-bottom:3px solid #333333;
/* ↓背景色指定 */
background:#ffffff;
/* ↓角を丸くする指定 */
border-radius:0px 0px 20px 20px;
-webkit-border-radius:0px 0px 20px 20px;
-moz-border-radius:0px 0px 20px 20px;
}

/* ヘッダー */
#header {
height:400px;/* トップ画像の縦幅に合わせて適時変更して下さい */
position:relative;
margin:0px auto;
padding:0px 0px;
text-align:center;
background:url(img/top-1.jpg) no-repeat bottom;/* トップ画像のアドレスはここ */
/* ↓画像の角を丸くする指定 */
border-radius:0px 0px 20px 20px;
-webkit-border-radius:0px 0px 20px 20px;
-moz-border-radius:0px 0px 20px 20px;
}

/* メイン(1カラム用) */
#contents {
margin:25px auto 0px auto;
text-align:left;
}

/* フッター */
#footer {
margin:30px auto 0px auto;
padding:12px 0px 10px 0px;
text-align:center;
border-top:1px solid #333333;/* ライン指定 */
}

/* #contents内の左右BOX(2カラム)指定---------------------- */

/* メインカラム */
#main_m {
float:left;/* 左寄せ */
width:580px;/* 横幅 */
margin:0px 0px;
padding:0px 0px;
}

/* サブカラム */
#main_s {
float:right;/* 右寄せ */
width:220px;/* 横幅 */
margin:0px 0px;
padding:0px 0px;
}
/* カラムの左右を入れ替えたい場合はfloatの「left」「right」を入れ替えて下さい。 */


/* ********************************************************* */
/* ヘッダー */
/* ********************************************************* */


/* サイトタイトル */
#header h1 {
color:#333333;
font-size:130%;
font-family:"Century Gothic",sans-serif;
letter-spacing:1px;
height:30px;
line-height:30px;
/* ↓背景色と透過指定 */
background:#d9eb52;
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity:0.6;
/* ↓斜めにする為の指定 */
width:420px;
text-align:right;
padding:2px 45px 2px 0px;
position:absolute;
top:38px;/* 位置指定 */
right:-48px;/* 位置指定 */
transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-moz-transform:rotate(20deg);
-o-transform:rotate(20deg);
-ms-transform:rotate(20deg);
/* 角を丸く */
border-radius:0px 3px 3px 0px;
-webkit-border-radius:0px 3px 3px 0px;
-moz-border-radius:0px 3px 3px 0px;
}
/* ↑非表示にしたい場合はdisplay:none;を入れて下さい */


/* ********************************************************* */
/* メニュー */
/* ********************************************************* */


ul#menu {
margin:15px auto 0px auto;
padding:5px 0px;
text-align:center;
background:#333333;/* 背景色指定 */
border-radius:13px;
-webkit-border-radius:13px;
-moz-border-radius:13px;
}

ul#menu li {
color:#555555;
padding:0px 0px 0px 2px;
display:inline;/* 横並び指定 */
}

/* メニュー用リンク */
ul#menu li a:link,ul#menu li a:active,ul#menu li a:visited {
color:#f0f2dc;
font-size:110%;
font-family:"Century Gothic",sans-serif;
letter-spacing:1px;
}

/* マウスが乗ったとき↓ */
ul#menu li a:hover {
color:#d9eb52;
font-size:110%;
font-family:"Century Gothic",sans-serif;
letter-spacing:1px;
}

/* メニュー下のライン指定 */
#wrapper hr {
height:8px;
margin:7px auto;
background:url(img/back.gif) repeat;
}
/* ↑非表示にしたい場合はdisplay:none;を入れて下さい */


/* ********************************************************* */
/* カラム内指定 */
/* ********************************************************* */


/* 見出し--------------------------------------------------- */

#contents h2,#contents h3,#contents h4 {
color:#333333;
font-size:120%;
font-weight:bold;
letter-spacing:1px;
margin:0px 0px 12px 0px;
padding:0px 0px 1px 10px;
border-left:10px solid #333333;
}

/* サブカラムタイトル */
#main_s div.title {
color:#ffffff;
font-size:100%;
font-family:"Century Gothic",sans-serif;
margin:0px 0px 10px 0px;
padding:2px 10px;
background:#8ac7de;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}


/* P段落(左)メインカラム------------------------------------ */

#contents p {
font-size:100%;
margin:0px 1px 20px 1px;
padding:0px 0px;
line-height:170%;
}

/* 余白調節 */
#contents p.blank1 {margin:0px 1px 10px 1px;} 
#contents p.blank2 {margin:0px 1px 30px 1px;} 

/* 段落下部にライン付き */
#contents p.line1 {
margin:0px 1px 12px 1px;
padding:0px 0px 12px 0px;
background:url(img/w-line.gif) repeat-x bottom;/* ドット画像 */
}
#contents p.line2 {
margin:0px 1px 12px 1px;
padding:0px 0px 12px 0px;
border-bottom:1px solid #333333;/* ライン指定 */
}

/* P段落(右)サブカラム------------------------------------ */

#main_s p {
font-size:100%;
margin:0px 10px 10px 10px;
padding:0px 0px;
line-height:150%;
background:#ffffff;
}

/* 段落下部にライン付き */
#main_s p.line1 {
margin:0px 10px 12px 10px;
padding:0px 0px 12px 0px;
background:url(img/w-line.gif) repeat-x bottom;/* ドット画像 */
}
#main_s p.line2 {
margin:0px 10px 12px 10px;
padding:0px 0px 12px 0px;
border-bottom:1px solid #333333;/* ライン指定 */
}

/* P段落カラム共通------------------------------------ */

/* ノート線付き */
#contents p.note {
font-size:100%;
line-height:22px;/* 行間(ノート線の画像の高さに合わせてます) */
background:url(img/note.gif);
}

/* 文字を小さく */
#contents p.small {
font-size:80%;
line-height:180%;/* 行間 */
}

/* 真ん中寄せにする */
#contents p.center {text-align:center;}

/* 枠付きBOX1 */
#contents p.box1 {
font-size:100%;
line-height:160%;/* 行間 */
padding:10px 10px;
border:1px solid #e4e6d0;
background:#f0f2dc;
}

/* リスト--------------------------------------------------- */

#contents ul.list01,#contents ul.list02 {margin:0px 1px 10px 1px;}
#contents li {padding:0px 0px 1px 0px;}

/* リストマーク(白丸) */
#contents ul.list01 li {
font-size:100%;
list-style:circle inside;
}

/* リストマーク(画像) */
#contents ul.list02 li {
font-size:100%;
padding-left:15px;
background:url(img/ci-b44.gif) no-repeat left center;
}

/* テーブル------------------------------------------------- */

#contents table.table1 {
margin:0px 2px 20px 2px;
background:#333333;/* テーブル線の色指定 */
}

#contents table.table1 td {
padding:8px 10px;
background:#ffffff;
}

/* td色付き */
#contents table.table1 td.td1 {
background:#d9eb52;
}
#contents table.table1 td.td2 {
background:#8ac7de;
}

/* 戻りリンク----------------------------------------------- */

#contents ul.pagetop  {
margin:0px 0px 5px 0px;
text-align:right;
}

#contents ul.pagetop li {
padding:0px 0px 0px 3px;
display:inline;/* 横並び */
}


/* ********************************************************* */
/* フッター */
/* ********************************************************* */


#footer ul {padding:0px 0px 4px 0px;}

#footer ul li {
color:#333333;
font-size:90%;
display:inline;/* 横並び指定 */
}

#footer ul li a {
font-family:"Century Gothic",sans-serif;
letter-spacing:1px;
}

#footer p {
color:#333333;
font-size:90%;
margin:0px 0px 3px 0px;
}


/* ********************************************************* */
/* 著作権表示部分 */
/* ********************************************************* */


address {
color:#333333;
font-size:90%;
margin:0px 0px 15px 0px;
}

address a {
color:#cccccc;
font-size:100%;
font-family:"Century Gothic",sans-serif;
}


/* ********************************************************* */


/* ページによってトップ画像を表示させない */
/* htmlファイル内<div id="header">を<div id="header2">にしてみて下さい */
/* 画像を使用していないページは使用画像の著作権表示を外して下さい */
/* 設定は以下 */

/* ヘッダー */
#header2 {
height:40px;/* 適時変更 */
margin:0px auto;
padding:0px 0px;
text-align:right;
}

/* サイトタイトル */
#header2 h1 {
color:#333333;
font-size:130%;
font-family:"Century Gothic",sans-serif;
letter-spacing:1px;
padding:15px 20px 0px 20px;
}
/* ↑非表示にしたい場合はdisplay:none;を入れて下さい */


/* ********************************************************* */
<html lang="ja">
<head>
<meta http-equiv="content-Type" content="text/html; charset=Shift_JIS" />
<meta name="referrer" content="unsafe-url">
<title>トップ用テスト - 人魚の涙</title>
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1">


<link rel="stylesheet" type="text/css" href="https://alicex.jp/css/pc_contents.css" />
<meta name="author" content="トップ用テスト - 人魚の涙">
<link rel="canonical" href="https://alicex.jp/mermaidxxx/1/">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Oswald');

body{
font-family:"Open Sans Condensed","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color: #555;
background:#fff;
text-transform:uppercase;
margin:0;
padding:0;}

@media screen and (min-width:601px){
.wrapper{
width:520px;
margin:0 auto;}

.menu a{
width:60px;
margin:0 5px;}

h2,h3{
margin-right:15px;
width:80px;}
}

@media screen and (max-width: 600px){
.wrapper{
width:100%;
margin:0 auto;}

.menu a{
width:50px;
margin:0 3px;}

h2,h3{
margin-right:5px;
width:70px;}
}

.top{
margin:50px 20px 20px;
padding:5px;
background:repeating-linear-gradient(-45deg, #ccc, #ccc 7px, #fff 0, #fff 14px);
border-radius:5px;}

.con{
background:#fff;
margin:0;
padding:15px;
border-radius:5px;}

.menu{
margin:0;
padding:0;}

.menu a{
color:#555;
border:solid 1px #e0ebaf;
background:#e0ebaf;
padding:2px;
display:inline-block;
text-align:center;}

.menu a:hover{
color:#555;
border:solid 1px #e0ebaf;
background:repeating-linear-gradient(-45deg, #e0ebaf, #e0ebaf 3px, #fff 0, #fff 6px);}

.info{
margin:10px 5px;
padding:10px;
background:#f8fbf8;}

strong{
background:linear-gradient(transparent 40%, #f8e58c 0%);
font-weight:normal;
margin:0 1px;
padding:0 2px;}

header{
text-align:center;
margin:0;
padding:0;}

h1{
font-family:"Oswald","メイリオ", sans-serif;
font-size:30px;
margin:10px 0 20px;
padding:10px;
color:#555;
background:linear-gradient(transparent 60%, #f8e58c 0%);
display:inline-block;
}

h2{
color:#555;
font-size:12px;
font-weight:normal;
padding:2px;
border:solid 1px #555;
text-align:center;
display:inline-block;
}

h3{
color:#fff;
background:#555;
font-size:12px;
font-weight:normal;
padding:2px;
border:solid 1px #555;
text-align:center;
display:inline-block;
}

a{
color:#555;
background:none;
text-decoration:none;
padding:0 3px;
transition:0.5s;
border-bottom:solid 1px #f7b977;
}

a:hover{
color:#999;
border-bottom:dashed 1px #f7b977;}

</style>
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#0000ff" alink="#ffffff">


<div class="Wrapper">

<font size="2">

<div class="wrapper">
<div class="top">
<div class="con">
<header><h1>endless sing</h1></header>
<div class="menu"><h2>menu <i class="fa fa-angle-double-right" aria-hidden="true"></i></h2>
<a href="#">info</a> <a href="#">main</a> <a href="#">bkm</a></div>
<div class="info">
ここに注意書きやサイトのこと、更新履歴などをどうぞ。<strong>強調線</strong>が引かれます。おまけの見出し色違い。<br>
<h3>title <i class="fa fa-angle-double-right" aria-hidden="true"></i></h3></div>
<h2>owner <i class="fa fa-angle-double-right" aria-hidden="true"></i></h2>
お休みマン（<a href="#">memo</a> / <a href="#">mail</a>）<br>
<h2>thanks <i class="fa fa-angle-double-right" aria-hidden="true"></i></h2><a href="#">rank</a> <a href="#">rank</a> <a href="#">rank</a> / 123456
</div>
</div>
</div>

<center>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 【PC】ALICE+ -->
<ins class="adsbygoogle"
     style="display:inline-block;width:468px;height:60px"
     data-ad-client="ca-pub-3539312285983558"
     data-ad-slot="9341020781"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>

</font>
<footer style="text-align:center;"><a href="https://alicex.jp/" style="font-size:14px!important;">ALICE+</a></footer>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-99848175-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-99848175-1');
</script>

</body>
</html>