@charset "UTF-8";

/*
==スパムが届きにくいメアドの書き方
 */
div.mailaddress{
padding:4px 0 4px 0;line-height:1;
}
div.mailaddress b{
color:rgb(37,37,37);font-weight:bold;
}
div.mailaddress b:nth-child(1){
margin:0 8px 0 0;padding:4px 8px 3px 8px;border-radius:4px;background-color:rgb(227,72,60);color:rgb(249,249,249);
}
div.mailaddress img{
width:calc(1px / 2);height:calc(1px / 2);
}

/*
==<span>タグで作るnoimage画像風表示
 */
.noimage{
/*横幅*/width:calc(100px * 1.618);
/*縦幅*/height:100px;line-height:calc(100px - 1px);
/*枠線*/border:solid 1px rgb(199,199,199);
/*背景*/background-color:rgb(249,249,249);
/*文字*/color:rgb(99,99,99);font-size:18px;
/*角丸*/border-radius:4px;
/*外影*/box-shadow:0 0 2px 1px rgb(236,236,236);
/*---以下はそのまま---*/
display:inline-block;margin:0;padding:0;text-align:center;font-family:"Helvetica Neue","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;letter-spacing:0.04em;
}
.noimage::before{
/*title内の文字を表示*/content:attr(title);
}

/*
==アイコンつきリスト<li>タグ
 */
ul{
/*余白リセット*/margin:0;padding:0;list-style:none;
}
li.icon{
/*改行後の文字の位置*/margin-left:1em;text-indent:-1.06em;
}
li.icon::before{
/*長さ*/width:8px;height:8px;
/*余白*/margin:0 8px 2px 2px;
/*---以下はそのまま---*/ 
content:"";display:inline-block;background-size:contain;
}
li.icon.no01::before{/*画像*/background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABFSURBVChTY0AD/6E0TsAIpUEAWTGyOApAlyCoCZsgXk24rMapCZcGEMCqiQlKEw2o4iSSPI1XMQggCxJUjA0ga8ICGBgACd0LCqbV2YIAAAAASUVORK5CYII=");}
li.icon.no02::before{/*画像*/background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABISURBVChTjdE7EgAgCEPB6P3vrBOHQjR8XpOGrcDTsg2btncpUoCFKAJMogywD1WAOdQBrg4YtqcKuGOWge+YRUAeq9IvA8AGgYwHEkwLLPcAAAAASUVORK5CYII=");}
li.icon.no03::before{/*画像*/background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABPSURBVChTY8AD/kNpFMAEpXEBDE14NXBxcYEoFE2MUBobQDcdrBZEYHUrDsBIqgaCnsYApGoAOwkXwOppYm2AG0yMBnyuQABgpGEJPQYGAGraCEtCZEZIAAAAAElFTkSuQmCC");}
li.icon.no04::before{/*画像*/background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABISURBVChTtc9RCgAgCERB6/53LhMXMky2jwYkCB+UqOFDaTrn8rq7ygJIwyqAEDIBWPgSmO4n7cuTbBGqICxCFqSLuxWQ/xCZEr4NByArCAcAAAAASUVORK5CYII=");}
li.icon.no05::before{/*画像*/background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABHSURBVChTY2RgYPgPxDAA4uMFTFCaaEB1DcjOBQNibEDRRKyT4JrQQ4kQYCRVAzzcidUEtgEfQDYIrJZYTxMyGA7QnMrAAADcLwkOnVf3HQAAAABJRU5ErkJggg==");}
li.icon.no06::before{/*画像*/background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAB1SURBVChTY2SAgP9QmhBgBGn4v/PZBwiXAHCXEmBggrJxAhMzEzCGAbwakBXC2ARtQAcoGjJPx4AxDJw5dQbKQrDhnkZWCALTTZdAWQgA9zSy4smmF8E0ugEwgOGH3NP6eDVh9TQ+TThDCaQJBpA1kZg0GBgBfs0oPw963JoAAAAASUVORK5CYII=");}
li.icon.no07::before{/*画像*/background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABZSURBVChTY2RAA29lVP5DmWAg/OQOihoUDrpiGEDWBGcgK4YpwCbGBOYhAWTT0J0DAhgaCAEMDcjOwOYnFCuJ8TTJTsLwFLot6B4n2QasAGQLLv+QaAMDAwDdTSRqE/vPKQAAAABJRU5ErkJggg==");}
li.icon.no08::before{/*画像*/background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABnSURBVChTlY8xDsAgDAMDX+jasf9/UceufUMrRwRZlhm4ARI7JCTAe15fBgPkTsPdK9AChmsaC+B47tQK9abpHjlt2Y3hqa2KXFegesexw/6Xxm0XdNrSKNSbSwPt7CYlKiB3WkTEDwZBVnWwrb2LAAAAAElFTkSuQmCC");}
li.icon.no09::before{/*画像*/background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABdSURBVChTzZBBDsAgCASpF/7/Jh6m7haIbUrrsZMouhkwUX5Fx3bw+A1lsNOQMmheKyirKi+TfOAyxUHWp8zKxIlgDXl/kkGEXGbGWslBNmC9yesv3YWtLy8nn4gMRTojmYw0DEcAAAAASUVORK5CYII=");}

/*
==囲み枠(ボックス)HTML&CSS
 */
/*共通のCSS*/
.box{position:relative;border:solid 1px rgb(199,199,199);border-radius:4px;box-shadow:0 0 2px 1px rgb(236,236,236);background-color:rgb(249,249,249);color:rgb(32,33,36);line-height:1.6;}
.box::before{content:attr(data-title)"";position:absolute;color:rgb(37,37,37);font-weight:bold;line-height:1;letter-spacing:0.02em;}
.box li{background-color:inherit;color:inherit;list-style:none;}
/*個別のCSS*/
.box.no01{margin:16px 0 8px 0;padding:16px 16px 16px 16px;}
.box.no01::before{top:-0.50em;left:14px;padding:0 2px 0 2px;background:linear-gradient(transparent 36%, rgb(249,249,249) 0%);}
.box.no02{margin:24px 0 8px 0;padding:16px 16px 16px 16px;}
.box.no02::before{top:-0.87em;left:14px;padding:0 2px 0 2px;background:linear-gradient(transparent 80%, rgb(249,249,249) 0%);}
.box.no03{margin:12px 0 8px 0;padding:50px 16px 16px 16px;}
.box.no03::before{top:0;left:0;width:calc(100% - 32px);padding:10px 16px 8px 16px;border-bottom:solid 1px rgb(199,199,199);background-color:rgb(238,238,238);}
.box.no04{margin:12px 0 8px 0;padding:48px 16px 16px 16px;}
.box.no04::before{top:16px;left:0;padding:0 0 0 12px;border-left:solid 4px rgb(199,199,199);}
.box.no05{margin:12px 0 8px 0;padding:48px 16px 16px 16px;}
.box.no05::before{top:16px;left:8px;padding:0 0 0 6px;border-left:solid 4px rgb(199,199,199);}
.box.no06{margin:24px 0 8px 0;padding:16px 16px 16px 16px;}
.box.no06::before{content:"例";top:-0.87em;left:10px;width:26px;height:26px;padding:0;border-radius:50%;text-align:center;background-color:rgb(199,199,199);color:rgb(254,254,254);font-size:medium;line-height:28px;}
.box.no07{margin:24px 0 8px 0;padding:16px 16px 16px 16px;}
.box.no07::before{content:"例";top:-0.87em;left:-4px;width:26px;height:26px;padding:0;border-radius:50%;text-align:center;background-color:rgb(199,199,199);color:rgb(254,254,254);font-size:medium;line-height:28px;}

/*
==線を重ねて２色の線を作る方法
 */
div.headline01{
position:relative;
padding:8px 0 8px 0;border-bottom:solid 1px rgb(199,199,199);
font-size:medium;font-weight:bold;
}
div.headline01::after{
content:"";position:absolute;display:block;
width:92px;padding:8px 0 0 0;border-bottom:solid 1px rgb(37,37,37);
} 
div.headline02{
padding:8px 0 0 0;
font-size:medium;font-weight:bold;
}
div.headline02::after{
content:"";display:block;
height:1px;margin:8px 0 0 0;
background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 15%,rgb(199,199,199) 15%,rgb(199,199,199) 100%);
} 
div.headline03{
padding:8px 0 0 0;
font-size:medium;font-weight:bold;
}
div.headline03::after{
content:"";display:block;
height:1px;margin:8px 0 0 0;
background-color:rgb(199,199,199);
background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAAMSURBVBhXY1BVVQUAAOIAcJ8qlFwAAAAASUVORK5CYII=");
background-position:left center;background-repeat:no-repeat;background-size:92px 1px;
} 

/*
==<noscript>タグデザイン例メモ
 */
div.noscript{
display:block;margin:8px 0 0 0;padding:16px;border:solid 1px rgb(199,199,199);box-shadow:0 1px 4px 0 rgb(206,206,206), 0 0 0 1px rgb(216,216,216);font-weight:800;line-height:1.6;
}
div.noscript::after{
content:"JavaScriptを利用してツールの読込と出力を行うため、\AJavaScriptが無効の状態では作動しません。\Aお手数ですが、JavaScriptを有効にした上で、再度アクセスして下さい。";display:block;margin-top:7px;padding-top:8px;border-top:solid 1px rgb(199,199,199);font-weight:400;white-space:pre-wrap;
}

/*
==パンくずリスト
 */
ol.navi{
margin:0;padding:0;list-style:none;color:rgb(32,33,36);letter-spacing:-0.4em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
ol.navi::before{
content:"";display:inline-block;width:12px;height:12px;margin:0 4px 0 0;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADPSURBVEhL7ZHrDcMgDIRJd2EelmGMLMM8DNPKli8yj4CJwr9+EiL4zB0Qt0KM8UtDlu9Cxt57Hq+HaPPVkEPmW8gopSSrkhCCO89z6DEUR+ZgFnIr9MxzztxPT8QFYRTSLY7MgTWkKVjMgSWkWMzMSadZm5ifizZTsx4iMVpHENB7ap2TqDA7ea3XJyVj+WSgH0/MgSWERS1YzcEohLwKYdUc9ELgdRU1K+agDgFN4Yk56IU0AfWPWkU/M/GReRvmG9Qns/Ztv8E/YMrmAOd+eDTG5IIFqkgAAAAASUVORK5CYII=");background-position:left bottom;background-repeat:no-repeat;background-size:12px 12px;
}
ol.navi li{
display:inline-block;color:rgb(32,33,36);letter-spacing:0;
}
ol.navi li:last-child{
margin:0 0 0 4px;
}
ol.navi li a{
display:inline-block;padding:2px 4px 0 4px;color:rgb(32,33,36);text-decoration:none;
}
ol.navi li a:hover{
background-color:rgb(229,243,255);
}
ol.navi li::after{
content:"";display:inline-block;width:12px;height:12px;margin:0 4px 0 4px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACTSURBVEhLzZHRDYAgDETRXdh/IIbRXII/QFuuLYkvMYR43JNaNGqtD56+dXH1dWIsbq2JWY3lIemrPZLpgDUSVkLd4IORiMEsiRrKkJiBqGTrmhHJlgB4JdsC4JFQAsBK7r4e4z8jOvqTveXAFETKgfoyWg7EQEY5WIayysEUzCwH1A3YciAeGCWechNIrJHplPICyuNZ0C03X0QAAAAASUVORK5CYII=");background-position:left bottom;background-repeat:no-repeat;background-size:12px 12px;
}
ol.navi li:last-child::after{
display:inline;
}

/*
==引用表示
 */
blockquote{
position:relative;margin:4px;padding:16px;box-shadow:0 1px 4px 0 rgb(206,206,206), 0 0 0 1px rgb(216,216,216);background-color:rgb(249,249,249);
}
blockquote::before{
content:"";position:absolute;display:inline-block;top:-1px;left:-1px;width:16px;height:16px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAB1SURBVEhL7ZXBDQAhCAQPe6H/gijmLhhjjAfZ/fBjHsYH6wqKyrNQ1XdNQ8xsx54g3fABBWUwulG5uDMzqESinWT1PmF1vwyYxSMyXXmJ2gDSBpByg7CTb6ImYnVUBuzDduO6PmRIG0DKDWYDoXue/VZYZ/IBt+QrU+K2TywAAAAASUVORK5CYII=");background-position:left top;background-repeat:no-repeat;background-size:16px 16px;
}
blockquote::after{
content:"";position:absolute;display:inline-block;bottom:-1px;right:-1px;width:16px;height:16px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABlSURBVEhLY2QAAlVV1f8gGhe4ffs2WB06IEYfIyFFMIBuCbH6mKA0zcCoBQTBqAUEAROuTEQIEKsPpyL0jESsgej6RiOZIBi1gCAYphYQW1uhA2z6RkiVSUmBSNACSgxnYGBgAABlnSq/fRzmfgAAAABJRU5ErkJggg==");background-position:left top;background-repeat:no-repeat;background-size:16px 16px;
}
blockquote p{
margin:0;padding:0;background-color:inherit;line-height:1.6;
}
blockquote p:last-child{
margin:8px 0 0 0;padding:8px 0 0 0;border-top:solid 1px rgb(199,199,199);font-size:small;
}
blockquote p:last-child a{
font-size:medium;font-weight:bold;text-decoration:none;
}
blockquote p:last-child a::after{
content:attr(href)"";display:block;margin:4px 0 0 4em;text-indent:0;color:rgb(37,37,37);font-size:small;font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:0.9;
}
blockquote cite{
font-style:normal;
}

/*
==カレンダー
 */
ul.calendar{
width:calc(15% + 14% + 14% + 14% + 14% + 14% + 15%);max-width:385px;margin:0 auto;padding:0;box-shadow:0 1px 4px 0 rgb(206,206,206), 0 0 0 1px rgb(216,216,216);background-color:rgb(199,199,199);list-style:none;line-height:0;
}
ul.calendar li{
display:inline-block;box-sizing:border-box;width:14%;padding:12px 0;border-right:solid 1px rgb(199,199,199);border-bottom:solid 1px rgb(199,199,199);background-color:rgb(254,254,254);text-align:center;line-height:1;white-space:nowrap;overflow:hidden;
}
ul.calendar li.holiday{/*休日*/
background-color:rgb(252,234,233);color:rgb(158,33,22);font-weight:bold;
}
ul.calendar li:nth-child(7n+2){/*日曜*/
width:15%;border-left:0;background-color:rgb(252,234,233);color:rgb(158,33,22);font-weight:bold;
}
ul.calendar li:nth-child(7n+8){/*土曜*/
width:15%;border-right:0;background-color:rgb(229,243,255);color:rgb(0,100,181);font-weight:bold;
}
ul.calendar li:nth-child(-n+8){/*曜日表示*/
padding:calc(12px / 1.618) 0 calc(12px / 1.618 - 1px) 0;border-bottom:0;background-color:rgb(37,37,37);color:rgb(249,249,249);font-size:small;font-weight:bold;
}
ul.calendar li:nth-child(2){/*曜日表示(日曜)*/
background-color:rgb(158,33,22);
}
ul.calendar li:nth-child(8){/*曜日表示(土曜)*/
background-color:rgb(0,100,181);
}
ul.calendar li:nth-child(-n+15){
border-top:0;
}
ul.calendar li:nth-child(1){/*年月*/
width:100%;padding:16px 0 16px 6.1%;border:0;background-color:rgb(252,252,252);color:rgb(32,33,36);text-align:left;font-size:large;font-weight:bold;
}
ul.calendar span:nth-child(1)::after{/*年*/
content:"年";padding:0 4px 0 4px;font-size:small;
}
ul.calendar span:nth-child(2)::after{/*月*/
content:"月";padding:0 4px 0 4px;font-size:small;
}
ul.calendar li:empty::after{
content:"\003000";
}

/*
==棒グラフ表示
 */
ul.graph{/*全体*/
box-sizing:border-box;width:100%;max-width:500px;margin:0 auto 0 auto;padding:8px;box-shadow:0 1px 4px 0 rgb(206,206,206), 0 0 0 1px rgb(216,216,216);line-height:0;
}
ul.graph li{/*項目*/
display:inline-block;box-sizing:border-box;width:80px;margin:8px 0 0 0;padding:0;border:0;border-right:solid 4px rgb(199,199,199);color:rgb(32,33,36);font-size:medium;line-height:1.6;white-space:nowrap;overflow:hidden;
}
ul.graph li:nth-child(1),ul.graph li:nth-child(2){
margin:0;
}
ul.graph li.graph{/*％数値の部分＋グラフの部分*/
width:calc(100% - 80px);border:0;letter-spacing:-0.4em;
}
ul.graph li.graph::before{/*％数値の部分*/
content:"";display:inline-block;width:60px;color:rgb(0,0,120);text-align:center;letter-spacing:0;
}
ul.graph li.graph::after{/*グラフの部分*/
content:"\003000";display:inline-block;width:calc(100% - 60px);
}
ul.graph li.per00::before{content:"0%";}
ul.graph li.per00::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 0%,rgb(249,249,249) 0%,rgb(249,249,249) 100%);}
ul.graph li.per10::before{content:"10%";}
ul.graph li.per10::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 10%,rgb(249,249,249) 10%,rgb(249,249,249) 100%);}
ul.graph li.per20::before{content:"20%";}
ul.graph li.per20::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 20%,rgb(249,249,249) 20%,rgb(249,249,249) 100%);}
ul.graph li.per30::before{content:"30%";}
ul.graph li.per30::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 30%,rgb(249,249,249) 30%,rgb(249,249,249) 100%);}
ul.graph li.per40::before{content:"40%";}
ul.graph li.per40::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 40%,rgb(249,249,249) 40%,rgb(249,249,249) 100%);}
ul.graph li.per50::before{content:"50%";}
ul.graph li.per50::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 50%,rgb(249,249,249) 50%,rgb(249,249,249) 100%);}
ul.graph li.per60::before{content:"60%";}
ul.graph li.per60::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 60%,rgb(249,249,249) 60%,rgb(249,249,249) 100%);}
ul.graph li.per70::before{content:"70%";}
ul.graph li.per70::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 70%,rgb(249,249,249) 70%,rgb(249,249,249) 100%);}
ul.graph li.per80::before{content:"80%";}
ul.graph li.per80::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 80%,rgb(249,249,249) 80%,rgb(249,249,249) 100%);}
ul.graph li.per90::before{content:"90%";}
ul.graph li.per90::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 90%,rgb(249,249,249) 90%,rgb(249,249,249) 100%);}
ul.graph li.per100::before{content:"100%";}
ul.graph li.per100::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 100%,rgb(249,249,249) 100%,rgb(249,249,249) 100%);} 
ul.graph li.range::before{/*％数値の部分*/
content:"";display:inline-block;width:100px;
}
ul.graph li.range::after{/*グラフの部分*/
content:"\003000";display:inline-block;width:calc(100% - 100px);
}
ul.graph li.per00-30::before{content:"0%-30%";}
ul.graph li.per00-30::after {background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 30%,rgb(249,249,249) 30%,rgb(249,249,249) 100%);}
ul.graph li.per10-20::before{content:"10%-20%";}
ul.graph li.per10-20::after {background:linear-gradient(90deg,rgb(249,249,249) 0%,rgb(249,249,249) 10%,rgb(37,37,37) 10%,rgb(37,37,37) 20%,rgb(249,249,249) 20%,rgb(249,249,249) 100%);}
ul.graph li.per20-30::before{content:"20%-30%";}
ul.graph li.per20-30::after {background:linear-gradient(90deg,rgb(249,249,249) 0%,rgb(249,249,249) 20%,rgb(37,37,37) 20%,rgb(37,37,37) 30%,rgb(249,249,249) 30%,rgb(249,249,249) 100%);}
ul.graph li.per30-40::before{content:"30%-40%";}
ul.graph li.per30-40::after {background:linear-gradient(90deg,rgb(249,249,249) 0%,rgb(249,249,249) 30%,rgb(37,37,37) 30%,rgb(37,37,37) 40%,rgb(249,249,249) 40%,rgb(249,249,249) 100%);}
ul.graph li.per40-50::before{content:"40%-50%";}
ul.graph li.per40-50::after {background:linear-gradient(90deg,rgb(249,249,249) 0%,rgb(249,249,249) 40%,rgb(37,37,37) 40%,rgb(37,37,37) 50%,rgb(249,249,249) 50%,rgb(249,249,249) 100%);} 
ul.graph li.line{
width:100%;margin:16px 0 8px 0;border-top:solid 1px rgb(199,199,199);
}

/*
==ノート風(罫線)表示
 */
div.keisen{
width:100%;
margin:0 auto;padding:1px calc(1em / 2) 0 calc(1em / 2);border:0;
box-sizing:border-box;
background-color:rgb(254,254,254);
background-image:linear-gradient(180deg, transparent calc(1em * 2 - 1px), rgb(199,199,199) 1px);
background-position:left top;
background-size:auto calc(1em * 2);
overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;
font-size:1em;
line-height:calc(1em * 2);
}
div.keisen-tensen{
width:100%;
margin:0 auto;padding:1px calc(1em / 2) 0 calc(1em / 2);border:0;
box-sizing:border-box;
background-color:rgb(254,254,254);
background-image:linear-gradient(90deg, transparent 0%, transparent 50%, rgb(254,254,254) 50%, rgb(254,254,254) 100%), linear-gradient(180deg, transparent calc(1em * 2 - 1px), rgb(199,199,199) calc(1em * 2 - 1px), rgb(199,199,199) calc(1em * 2));
background-position:left top;
background-size:calc(1em / 2) auto, auto calc(1em * 2);
overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;
font-size:1em;
line-height:calc(1em * 2);
}

/*
==リストタグで表を作る
 */
:root{
/*横幅*/--row-width:480px;
/*列数*/--row-num:3;
/*線色*/--row-border-color:rgb(199,199,199);
/*外影*/--row-box-shadow:0 1px 4px 0 rgb(206,206,206), 0 0 0 1px rgb(216,216,216);
/*背景*/--row-background-color:rgb(252,252,252);
/*行間*/--row-line-height:1.6;
/*----*/
/*背景*/--row-midashi-background-color:rgb(37,37,37);
/*文字*/--row-midashi-color:rgb(249,249,249);
} 
ul.row{
width:100%;max-width:var(--row-width);margin:0 auto;padding:0;box-shadow:var(--row-box-shadow);box-sizing:border-box;background-color:var(--row-background-color);line-height:0;
}
ul.row li{
display:inline-block;width:calc(100% / var(--row-num));min-width:1px;padding:8px calc(1em * var(--row-line-height) / 2) 8px calc(1em * var(--row-line-height) / 2);border-top:solid 1px var(--row-border-color);box-sizing:border-box;background-color:var(--row-background-color);vertical-align:top;overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;line-height:var(--row-line-height);
}
ul.row li:nth-child(-n+3){
border-top:0;background-color:var(--row-midashi-background-color);color:var(--row-midashi-color);
}
.rightmenu ul.row li:nth-of-type(1){
padding:8px calc(1em * var(--row-line-height) / 2) 8px calc(1em * var(--row-line-height) / 2);
}

/*
==リンク画像のホバー時
 */
a.link-on-message{
position:relative;
display:inline-block;
width:150px;height:150px;
box-shadow:0 1px 4px 0 rgb(206,206,206), 0 0 0 1px rgb(216,216,216);
}

a.link-on-message:hover::before{
content:"リンク先を見る";
position:absolute;top:0;left:0;
width:150px;height:calc(150px / 3);
margin:calc(150px * 2 / 3) 0 0 0;
background:rgb(49,49,49);
color:rgb(255,255,255);
text-align:center;
line-height:calc(150px / 3);
filter:opacity(95%);
}