【CSS配布】波紋

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

/*------------------------------------------------
　フォント設定
-------------------------------------------------*/
@font-face{
font-family: KachouFugetsu;
src: url(https://dl.dropboxusercontent.com/scl/fi/le4psuag7ajoh0sui9vhe/KachouFugetsu.woff2?rlkey=f7w08nm8u2nnm1off5f8skl2k&raw=1);
font-display: swap;
}
*{font-family: KachouFugetsu, Meiryo !important;}

/*------------------------------------------------
　共通設定
-------------------------------------------------*/
/*全体の文字色と背景*/
body{
background: radial-gradient(600px 600px at 100px 100px, transparent 26%, rgba(136,197,237,0.5) 30%, transparent 34%, transparent 38%,rgba(136,197,237,0.5) 42%, transparent 46%), 
radial-gradient(400px 400px at 200px 300px, transparent 26%, rgba(207,217,255,1) 30%, transparent 34%, transparent 38%,rgba(207,217,255,1) 42%, transparent 46%), 
radial-gradient(400px 400px at 60% 30%, transparent 26%, rgba(136,197,237,0.5) 30%, transparent 34%, transparent 38%,rgba(136,197,237,0.5) 42%, transparent 46%),
radial-gradient(300px 300px at 20% 50%, transparent 26%, rgba(207,217,255,1) 30%, transparent 34%, transparent 38%,rgba(207,217,255,1) 42%, transparent 46%),
radial-gradient(500px 500px at 90% 70%, transparent 26%, rgba(207,217,255,0.5) 30%, transparent 34%, transparent 38%,rgba(207,217,255,0.5) 42%, transparent 46%),
radial-gradient(300px 300px at 75% 70%, transparent 26%, rgba(136,197,237,0.5) 30%, transparent 34%, transparent 38%,rgba(136,197,237,0.5) 42%, transparent 46%),
radial-gradient(400px 400px at 10% 90%, transparent 26%, rgba(136,197,237,0.5) 30%, transparent 34%, transparent 38%,rgba(136,197,237,0.5) 42%, transparent 46%), #fff;
color:#666;
}

/*コンテンツ部分*/
div#topcon_line{border:0 !important;}
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.6);
border: 0;
box-shadow: none;
}

/*横メニュー*/
div#navigation{
background: transparent;
}
div#navigation h2{
border-bottom: 2px solid #c6e2f5 !important;
}

/*リンク*/
a:link{color: #1f97cf;}
a:visited{color: #8188b8;}
a:hover{
opacity: 0.6;
text-decoration: none;
position: relative;
top: 1px;
left: 1px;
}

/*入力ボックス*/
input[type=text]{
border: 2px solid #c6e2f5;
border-radius: 100vh;
background: rgba(255,255,255,0.6);
}
/*ボタン*/
input[type=submit]{
background-color: rgba(255,255,255,0.6);
border: 2px solid #c6e2f5;
border-radius: 100vh;
color: #81c5f0;
}
input[type=submit]:hover{
opacity:0.6;
background: radial-gradient(50px 50px at center, transparent 50%, rgba(136,197,237,0.5) 55%, transparent 60%, transparent 65%,rgba(136,197,237,0.5) 70%, transparent 75%);
}
input#sbt{
border-radius: 0;
}
/*文字サイズ大中小*/
span#resizer{
border: 2px solid #c6e2f5;
background: rgba(255,255,255,0.6);
border-radius: 10px;
}
/*下のボックス*/
.block{
border: 0 !important;
}
h3.block_head{
background: transparent !important;
border: none !important;
border-bottom: 2px solid #c6e2f5 !important;
}
/*コメント欄*/
form.commentform{
background: rgba(136,197,237,0.2) !important;
border:0 !important;
}
span.listitem_noimg{
background: rgba(237, 245, 250,0.7);
margin: 10px 5px;
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
}
span.listitem_noimg:nth-child(even){
background: rgba(242, 245, 255,0.5);
}
p#comments span:last-child{
border-top: 2px solid #c6e2f5 !important;
}

/*------------------------------------------------
　トップページ設定
-------------------------------------------------*/
/*タイトル*/
div#header{
border: none;
}
h1.utitle a{
color:#FFF !important;
font-weight: bold;
text-shadow: 0px 0px 2px #88c5ed, 0px 0px 5px #a1b1f0;
margin-left:3px;
}
/*説明欄*/
div#desc{
background: transparent;
border: 6px #c6e4f7 double;
line-height: 1.8;
border-radius: 30px;
padding: 10px;
box-sizing: border-box;
}
/*エピソード選択欄*/
div#content form#dr{
background: linear-gradient(to bottom, transparent 30%, rgba(198, 226, 245,0.3) 100%) !important;
color: #5e8cd6;
box-sizing: border-box;
border: none !important;
border-radius: 30px;
}
/*エピソードタイトル*/
form#dr fieldset a{
color: #365e9e;
}
input[type=radio]{
visibility: hidden;
}
input[type=radio] + label {
padding-left:1.5em;
background: none;
display: inline !important;
background: radial-gradient(circle, #bbb 20%, transparent 20%) no-repeat left center;
background-size:1.2em 1.2em;
}
input[type=radio]:checked + label{
background: radial-gradient(circle, #88c4fe 20%, transparent 60%) no-repeat left center;
background-size:1.2em 1.2em;
}

/*------------------------------------------------
　内容ページ設定
-------------------------------------------------*/
/*ページ名*/
div#content h3{
background: transparent;
border: none;
border-bottom: 2px solid #c6e2f5;
color: #666;
}
/*本文*/
div#content p.result{
line-height: 1.8;
}
p#u_pager, div#content p.result_btm{
border-top: 2px solid #c6e2f5 !important;
}
/*次のページ*/
#u_pager .p_next span{
background: rgba(136,197,237,0.2);
}
/*評価*/
div.heart{
filter: brightness(120%) hue-rotate(-90deg);
}
.unit-rating{
filter: hue-rotate(120deg);
}

/*機能*/
p#u_result strong{
display: inline-block;
font-weight: bold;
width: 100%;
margin: 5px 0;
padding: 5px 10px;
box-sizing: border-box;
background: radial-gradient(25px 25px at 1em center, transparent 50%, rgba(136,197,237,0.5) 55%, transparent 60%, transparent 65%,rgba(136,197,237,0.5) 70%, transparent 75%), rgba(198, 226, 245, 0.2);
color:#365e9e;
}
div#desc em, p#u_result em{
display: block;
max-width: 100%;
overflow: auto;
margin-left: auto;
margin-right: auto;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
box-sizing: border-box;
padding: 10px;
height: auto;   /*高さの上限が必要な場合autoを変える*/
letter-spacing: 1px;   /*フォントのバランスに合わせて文字間を調整*/
}