Plaisir | ナノ

MAIN CONTENTS

SUB CONTENTS

OTHER

ふたりの幕間はおわり（番外編）
しばし永遠を待て（シリーズ）

HOW TO TEMPLATE

REQUEST

美咲さん
お姫様をイメージしたかわいいメイン分岐ページ
イメージカラー：ローズピンク

THANKS

タイトル：enamel
レース素材：sozaico（lace#04 帯A.png）
鍵アイコン：ICOOON MONO（鍵のフリーアイコン13）

INFORMATION

当ページは子ページで作成しています。機能ページで使用する場合は適宜改変を行ってください。

游明朝体を使用しているためWindows環境の場合、文字が薄く感じる場合があります。

※CSSにてレース素材の色を反転していますので、素材は黒のまま使用してください。

※IEでは色の反転CSS（filer）が効かないため、レース素材を非表示にしていますのでご了承ください。

SOUCE CODE

HTML

CSS

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: normal;
    box-sizing: border-box;
    list-style-type: none;
}

a {
    color: #fff;
}

main a {
    color: #e44b68;
    text-decoration: none;
    border-bottom: 1px solid #efefef;
}

main a:hover {
    border-bottom: 1px solid #f8d0d8;
}

body {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝", serif;
    background: repeating-linear-gradient(90deg, #EE8EA0, #EE8EA0 20px, #f1a4b3 0, #f1a4b3 40px);
    text-align: justify;
    margin: 90px 0 0;
    letter-spacing: 0;
}

hr {
    border: none;
    margin: 60px 0;
}

hr::before {
    width: 100%;
    display: block;
    text-align: center;
    content: '●●●';
    font-size: 10px;
    color: #e5e5e5;
    letter-spacing: 10px;
}

article {
    margin: 0 auto 100px;
    background: #fff;
    position: relative;
    opacity: 0.9;
}

article::before,
article::after {
    content: '';
    display: block;
    position: relative;
    background: url(#レース素材_url#) repeat-x; 
    background-size: 500px;
    width: 100%;
    height: 80px;
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
    -ms-filter: invert(100%);
    filter: invert(100%);
}

article::before {
    top: -70px;
}

article::after {
    bottom: -70px;
    -moz-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.wrapper {
    width: 80%;
    max-width: 400px;
    margin: 0 auto;
}

header {
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 40px;
    border-bottom: 1px solid #f2f2f2;
}

header h1 {
    background: url(#鍵アイコン_url#) no-repeat 55% top;
    background-size: 32px;
    margin-top: -50px;
    padding-top: 40px;
    font-family: 'Monsieur La Doulaise', cursive;
    font-size: 50px;
}

header h1 span {
    display: block;
    font-family: 'Bellefair', serif;
    font-size: 14px;
    letter-spacing: 1.2px;
    margin-top: -5px;
    color: #afafaf;
}

main {
    font-size: 12px;
}

main p {
    margin-bottom: 20px;
}

main strong {
    font-weight: 700;
}

main h2 {
    margin: 50px 0 10px;
    text-align: center;
    font-family: 'Bellefair', serif;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

main h3 {
    position: relative;
    letter-spacing: 1px;
    margin: 30px 0 10px;
}

main h2:first-letter {
    font-size: 25px;
    color: #dcc583;
}

main h3 span {
    padding-right: 8px;
    background: #fff;
    z-index: 10;
    color: #afafaf;
}

main h3::before {
  position: absolute;
  top: 50%;
  z-index: -1;
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #efefef;
}

main ul li {
    margin-bottom: 5px;
}

main ul li::before {
    content: '－';
    color: #ddd4bb;
    margin-right: 5px;
    font-size: 10px;
}

/* IE対応 */
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop,
    article::before,
    article::after {
    display: none;
  }
}
</style>