【CSS配布】かわいいのみる夢

/*********************************************************
　 CSS by 夢乃ふわり
*---------------------------------------------------------*
　1.自作発言禁止
　2.改変OK
　3.改変後の二次配布OK
　4.そのままの二次配布はNG
　5.二次配布は元作者が夢乃ふわりで
　　あることを明記しリンクを貼る
*********************************************************/

/*------------------------------------------------
　フォント設定
-------------------------------------------------*/
@font-face{
font-family: Zen-Maru-Gothic;
src: url(https://dl.dropboxusercontent.com/scl/fi/vq4l9id2aa00vhwpd62og/ZenMaruGothicM_sub.woff2?rlkey=g4khpio556gc0lxuzyc2xbuwy&raw=1);
font-display: swap;
}
/*++++++++++++++++
Zen Maru Gothic
https://fonts.google.com/specimen/Zen+Maru+Gothic
https://licenses.opensource.jp/OFL-1.1/OFL-1.1.html
+++++++++++++++++*/
*{font-family: Zen-Maru-Gothic, Malgun Gothic, Meiryo, sans-serif !important;}

/*------------------------------------------------
　共通設定
-------------------------------------------------*/
/*全体の文字色と背景*/
body{
background: url(http://uranai.nosv.org/img/user/data/7/b/5/7b520e9880fc291c77af404e00aa648e.jpeg), #fff;
color: #76627a;
}

/*コンテンツ部分*/
div#topcon_line{
border-bottom: 7px solid;
border-image: linear-gradient(90deg, #e6f3ff, #dcdcfc, #f1dcfc, #ffd6f6) 1;
}
div#topcon{
border: 0;
box-shadow: none;
}
div#wrapper, div#content{
background: transparent;
border: 0;
box-shadow: none;
}
div#topcon,div#container{
background: rgba(255,255,255,0.5);
border: 0;
box-shadow: 0 0 10px rgba(255,255,255,0.5), 0 0 15px rgba(255,255,255,0.5);
}
/*横メニュー*/
div#navigation{
background: transparent;
}
div#navigation h2{
border-bottom: 4px solid;
border-image: linear-gradient(90deg, #e6f3ff, #dcdcfc, #f1dcfc, #ffd6f6) 1;
}
/*リンク*/
a:link{color: #1f97cf;}
a:visited{color: #8188b8;}
a:hover{
text-decoration: none;
filter: blur(1px);
}
/*入力ボックス*/
input[type=text]{
background: #fff;
box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 8px #fff;
color: #b532aa;
border: none;
border-radius: 100vh;
}
form.ipt fieldset input#nm{
text-align: center;
}
/*ボタン*/
input[type=submit]{
background:  rgba(231, 194, 240, 0.6);
box-shadow: 0 0 3px rgba(231, 194, 240, 0.6), 0 0 5px rgba(231, 194, 240, 0.6), 0 0 8px rgba(231, 194, 240, 0.6);
border: none;
border-radius: 100vh;
color: #fff !important;
}
input[type=submit]:hover{
filter: blur(1px);
cursor: pointer;
}
input#sbt{
border-radius: 0;
}
/*文字サイズ大中小*/
span#resizer{
border: none;
background: rgba(255,255,255,0.6);
border-radius: 10px;
}
/*評価欄*/
div.ratingblock{
border: none;
background: rgba(255,255,255,0.6);
border-radius: 20px;
}
div.heart{
filter: brightness(125%) hue-rotate(-20deg) saturate(150%);
}
.unit-rating, .unit-rating li.current-rating, .unit-rating li a:hover {
background-image:  url(http://uranai.nosv.org/img/user/data/e/7/c/e7c945d3ca0edbb532e4fc7e60452b2b.png);
}
/*お気に入り登録*/
div#content .oblock{
border: none;
border-radius: 20px;
}
/*下のボックス*/
div#content .block{
border: none;
background: transparent;
}
div#content div#relitems .block{
border: none;
background: rgba(255,255,255,0.6);
border-radius: 20px;
}
div#content h3{
background: linear-gradient(90deg, #e6f3ff, #dcdcfc, #f1dcfc, #ffd6f6);
border: none;
border-radius: 100vh;
margin-bottom: 15px !important;
color: #5b67ab;
box-sizing: border-box;
box-shadow: 0 0 5px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.5);
}
/*コメント欄*/
form.commentform{
background: rgba(245, 191, 237,0.3) !important;
border:0 !important;
}
span.listitem_noimg{
background: linear-gradient(135deg, rgba(238, 230, 252, 0.5) 70%, rgba(255, 255, 255,0.5) 90%);
margin: 10px 5px;
border-radius: 15px;
padding: 10px;
box-sizing: border-box;
}
span.listitem_noimg:nth-child(2n){
background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 10%, rgba(230, 250, 252,0.5) 30%);
}
p#comments span:last-child{
border-top: 4px solid !important;
border-image: linear-gradient(90deg, #e6f3ff, #dcdcfc, #f1dcfc, #ffd6f6) 1;
}
div#footer{
background-image: url(http://uranai.nosv.org/img/user/data/6/5/7/65723e35c9785a7e9aaba055e7c2bc96.png);
}
/*------------------------------------------------
　トップページ設定
-------------------------------------------------*/
/*タイトル*/
div#header{
border: none;
}
div#header a{
color:#FFF;
font-weight: bold;
text-shadow: 0px 0px 2px #e590f0, 0px 0px 5px #e590f0;
margin-left:3px;
}
/*説明欄*/
div#desc{
background: radial-gradient(100% 100% at left top, rgba(255, 189, 235, 0.3) 0%, transparent 100%),  radial-gradient(100% 100% at right center, rgba(216, 171, 255, 0.3) 0%, transparent 100%), radial-gradient(100% 100% at left bottom, rgba(171, 238, 255, 0.3) 0%, transparent 100%), rgba(255, 255, 255, 0.3);
box-sizing: border-box;
border-radius: 20px;
margin-bottom: 20px;
line-height: 1.8;
padding: 1em;
border: none;
box-shadow: 0 0 5px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.5);
}
/*エピソード選択欄*/
div#content form#dr{
background: linear-gradient(to right, transparent 90%, rgba(255, 171, 242,0.3) 100%), linear-gradient(to left, transparent 90%, rgba(255, 171, 242,0.3) 100%), rgba(255, 255, 255, 0.5);
color: #8c5ed6;
box-sizing: border-box;
border-radius: 20px;
margin-bottom: 20px;
border: none;
box-shadow: 0 0 5px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.5);
}
/*エピソードタイトル*/
form#dr fieldset a{
color: #5593c9;
}
input[type=radio]{
visibility: hidden;
}
input[type=radio] + label {
padding-left:1.5em;
background: none;
display: inline !important;
background: radial-gradient(circle, #7dbaf0 20%, transparent 20%) no-repeat left center;
background-size:1.2em 1.2em;
}
input[type=radio]:checked + label{
background: radial-gradient(50% 50% at 50% 25%, #7dbaf0 50%, transparent 50%), radial-gradient(50% 50% at 25% 50%, #7dbaf0 50%, transparent 50%), radial-gradient(50% 50% at 75% 50%, #7dbaf0 50%, transparent 50%), radial-gradient(50% 50% at 50% 75%, #7dbaf0 50%, transparent 50%);
background-repeat: no-repeat;
background-position: left center;
background-size:1.2em 1.2em;
}

/*------------------------------------------------
　内容ページ設定
-------------------------------------------------*/
/*ページ名*/
div#content div.result h3{
padding: 4px 1em;
}
/*本文*/
p#u_result{
background: linear-gradient(to right, transparent 90%, rgba(255, 171, 242,0.3) 100%), linear-gradient(to left, transparent 90%, rgba(255, 171, 242,0.3) 100%), rgba(255, 255, 255, 0.5);
border-radius: 20px;
margin-bottom: 20px;
border: none;
box-sizing: border-box;
box-shadow: 0 0 5px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.5);
}
div.result div.clearfix{
}
div#content p.result{
line-height: 1.8;
padding: 1em;
}
p#u_pager, div#content p.result_btm{
border-top: 4px solid !important;
border-image: linear-gradient(90deg, #e6f3ff, #dcdcfc, #f1dcfc, #ffd6f6) 1;
}
/*次のページ*/
#u_pager .p_next span{
background: rgba(207, 169, 235,0.2);
border-radius: 100vh;
}

/*機能*/
div#desc strong, p#u_result strong{
display: inline-block;
font-weight: normal;
width: 100%;
margin: 0.5em 0;
padding: 5px 10px;
box-sizing: border-box;
background: rgba(255,255,255,0.5);
border: 4px solid;
border-image: linear-gradient(135deg, #e6f3ff, #dcdcfc, #f1dcfc, #ffd6f6) 1;
color: #8c8c8c;
}
div#desc font, p#u_result font{
display: block;
width: fit-content;
margin: 0.5em auto;
box-sizing: border-box;
padding: 5px 10px;
background: rgba(193, 157, 201,0.5);
box-shadow: 0 0 5px rgba(193, 157, 201,0.5), 0 0 10px rgba(193, 157, 201,0.5);
border-radius: 20px;
font-weight: normal;
color: #fff;
}
div#desc em, p#u_result em{
font-weight: normal;
text-shadow: 0 0.3em 0.5em #FF85D6;
}