@import url("https://use.typekit.net/erw6inh.css");
@charset "UTF-8";
a { text-decoration:none; color:#0050ff;}
a:hover { text-decoration:none; color:#0050ff;}
.tCenter { text-align:center !important}
.f140 { font-size:140%;}
.f130 { font-size:130%;}
.f120 { font-size:120%;}
.f110 { font-size:110%;}
.f85 { line-height:normal !important; font-size:85% !important;}
.f80 { line-height:normal !important; font-size:80% !important;}
.hid{visibility: hidden;}
.ftblu {color:#0050ff;}
.ftpnk {color:#ff7ead;}
.ftpur {color:#8b00ff;}

.dotgo {
font-family: "dotgothic16", sans-serif;
font-weight: 400;
font-style: normal;
}
.lores {
font-family: "lores-9-wide", sans-serif;
font-weight: 700;
font-style: normal;
}

body {
background-color:#ffe1ea;
background: url(../img/bg.png); background-size:20px;
background-attachment: fixed;
  color: #ff00a2;
  font-family: "Noto Sans JP", sans-serif;
}
#con-body {background-color:transparent;}
#container{padding:30px 0 0; position:relative;}

a.tbslogo{display:block; background: url(../img/tbs.svg) no-repeat 0 0;background-size:contain; z-index:12;}
a.megu{display:block; background: url(../../img/rabbit.png) no-repeat 0 0;background-size:contain; z-index:999;
animation: pikopiko 2s steps(2, start) infinite;
}

.contents {
  width: 380px;
  min-height:calc(100vh - 30px);
  background-color:#ffe1ea;
  margin:0 auto;
  border:3px solid #ff00a2;
  border-bottom:none;
  border-radius:24px 24px 0 0;
  padding:1.2em 0 0;
  overflow: hidden;
  box-sizing: border-box;
  position:relative;
}

@media all and (min-width:541px) {
.nobr{display: none;	}
a.tbslogo{position:fixed; left:2%;bottom:2.5%; width:70px; height:30px;}
a.megu{position:fixed; right:1%; bottom:1%; width:80px; height:130px;}
}

@media screen and (max-width:540px) {
#container{padding:5% 0 0;}
a.tbslogo{position:absolute; left:0; right:0; bottom:0; width:15%; height:0; padding:6% 0 0; margin:2% auto;}
a.megu{position:fixed; right:1%; bottom:.5%; width:14%; height:0; padding:22% 0 0;}
.contents {width:82%;
  border-radius:8vw 8vw 0 0;
  padding:6% 0 0;
}
}

#blog h1{background: url(../img/h1.png) no-repeat 0 0;background-size:contain; width:76%; height:0; padding:10% 0 0; margin:2em auto;}
.contents h1.ttl{background-color:#ffc6d7; text-align:center; padding:.8em 0; margin:0 auto 1em;
background-image:url(../img/kira.png),url(../img/kira2.png);
background-repeat:no-repeat,no-repeat;
background-position:right 2% center,2% center;
background-size:7%,7%;
font-size:120%;
}
.section {padding:0 1.5em 1.5em; }
.section ul{list-style:none;}
.section ul li{text-align:center; padding:1.5em 0; font-size:120%;}
.section ul li:before {
content:"";
background: url(../img/note.gif) no-repeat right top;
background-size:contain;
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
margin: 0 8px 0 0;
}
.section a{text-decoration: underline; color: #ff00a2;}
.section p{padding:.5em 0; line-height:160%;}

#blog .section{text-align:center;}
#blog a.secret{text-decoration: none; font-size:120%;}

#profile figure{position: relative; width:70%; height:0; padding:55% 0 0; margin:2em auto; background:url(../img/prof.jpg) no-repeat center center; background-size:cover;}
#profile figure img{position:absolute;left:0;top:0; width:100%; height:100%;}
#profile .section h2{color:#fff; background-color:#ff00a2; padding:.4em; margin:1em auto 0;}

#diary .section article{background-color:rgba(255,255,255,0.5); padding:.5em .8em; margin:0 auto .4em;}
#diary .section h2{padding:.25em 0 .4em; border-bottom:1px solid #ffc6d7; font-size:95%;}
#diary .section p{font-size:90%; line-height:150%; padding:.25em 0;}

#bbs .closed{position: relative; width:90%; height:0; padding:75.2148997135% 0 0; margin:4em auto; background:url(../img/closed.png) no-repeat 0 0 ;background-size:cover;}
#secret .section {padding:4em 1.5em 4em; text-align:center;}

/*footer*/
footer .backhome{text-align:right; padding:0 0 .5em;}
footer .backhome a{text-decoration: underline; color: #ff00a2;}
footer .backhome:after {
content:"";
background: url(../img/back.gif) no-repeat right top;
background-size:contain;
display: inline-block;
width: 14px;
height: 14px;
vertical-align: middle;
margin: 0 0 3px 4px;
}
footer{margin:0 auto; padding:1em 1em 3%; text-align:center; position:absolute; left:0; right:0; bottom:0;}
footer p.copy{font-size:70%; line-height:140%; display:inline-block;}
footer a,footer a:hover{color:#ff00a2;}
#blog footer,#profile footer,#diary footer{position:static;}

@media screen and (max-width: 540px) {
.section {padding:0 6% 1.5em;}
#blog h1{margin:6% auto 10%;}
.section ul li{padding:6% 0; font-size:4.5vw;}
.section ul li:before {
background-size:90%;
width:4.5vw;
height:4.5vw;
margin: 0 .8% 0 0;
}
.contents h1.ttl{padding:3% 0; margin:0 auto 5%; font-size:5vw;}
.contents .section p{padding:.5em 0; font-size:3.5vw;}
.contents .section h2{font-size:3.5vw; padding:2% 0;}

#diary .section h2,#diary .section p{ font-size:3.5vw;}
#bbs .closed{margin:20% auto 0;}

footer{padding:2.5% 5% 15%;}
footer p.copy{background:none; font-size:2.1vw; line-height:130%;}
}