@charset "utf-8";

/****************************************
Standard Theme
****************************************/

/* All */
html,body,header,main,article,nav,aside,section,footer,
ol,ul,li,h1,h2,h3,h4,h5,h6,div,p,a,span,img {
margin:0;
padding:0;
}

html {
overflow-y:scroll;
}

a {
color:#666666;
}

body {
color:#666666;
font:normal 100%/160% sans-serif;
background-color:#ffffff;
word-break:break-all;
text-size-adjust:none;
}

footer {
padding-top:40px;
padding-bottom:40px;
max-width:928px;
}

footer p {
font:normal 80%/160% sans-serif;
text-align:center;
}

ol,ul,li {
list-style-type:none;
}

header,
main,
footer {
width:100%;
margin:0 auto;
}

main {
background-image:url("decolace.png");
background-size:48px;
background-repeat:repeat-x;
padding-bottom:20px;
}

main h1 {
border-radius:6px;
}

.wt1,
.wt2,
.wt3,
.wt4,
.wt5,
.wt6 {
border-top:2px solid #dddddd;
border-bottom:2px solid #dddddd;
background-image:linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
background-size:16px 16px;
background-repeat:repeat;
background-position:8px 8px;
}

.bt1,
.bt2,
.bt3,
.bt4,
.bt5,
.bt6 {
color:#ffffff;
border-top:2px solid #dddddd;
border-bottom:2px solid #dddddd;
background-image:linear-gradient(0deg, transparent calc(100% - 1px), #666666 calc(100% - 1px)),
linear-gradient(90deg, transparent calc(100% - 1px), #666666 calc(100% - 1px));
background-size:16px 16px;
background-repeat:repeat;
background-position:8px 8px;
}

h1 {
padding:40px 0 20px 0;
color:#999999;
}

h2 {
margin:20px 0 10px 0;
padding:4px 16px;
color:#787878;
}

main p {
padding-bottom:20px;
}

main img {
max-width:100%;
}

.wgbx {
font:bold 16px/160% serif;
color:#999999;
text-align:center;
}

.bdhr {
border-top:2px dotted #dddddd;
margin-top:8px;
padding-top:16px;
}

.linkwd {
padding:4px 0 20px 0;
}

.linklc div,
.linkwd a {
display:inline-block;
box-sizing:border-box;
margin:4px 4px;
padding:4px 12px;
border-radius:8px;
border:2px solid #dddddd;
}

.linksp {
padding:4px 0 20px 0;
}

.linksp a {
display:inline-block;
box-sizing:border-box;
margin:4px 4px;
padding:4px 16px;
border-radius:100px;
border:2px solid #dddddd;
}

.linkud {
padding:24px 0 20px 0;
}

.linkud a {
display:inline-block;
box-sizing:border-box;
margin:4px 4px;
padding:4px 16px;
border-radius:100px;
border:2px solid #dddddd;
}

.lcsp {
padding-top:16px;
}

.mnsp {
padding-top:40px;
}

.bg {
margin:10px auto 20px auto;
max-width:300px;
height:280px;
}

.ctr {
margin-top:60px;
margin-bottom:20px;
padding-top:14px;
padding-bottom:14px;
background-image:none;
background-size:0;
background-repeat:none;
}

.ck {
color:#666666;
background-color:#ffffff;
border-radius:8px;
border:2px solid #dddddd;
padding:2px 16px;
margin:8px 8px 8px 0;
display:inline-block;
}

.pa { 
background-image:linear-gradient(0deg, transparent calc(100% - 2px), #dddddd calc(100% - 2px)),
linear-gradient(90deg, transparent calc(100% - 2px), #dddddd calc(100% - 2px));
background-size:18px 18px;
background-repeat:repeat;
background-position:16px 4px;
}

.gd {
margin:0;
padding:0;
max-width:300px;
height:300px;
background-image: radial-gradient(circle closest-side, #ffffff99, transparent);
}

.padk { 
background-image:linear-gradient(0deg, transparent calc(100% - 2px), #999999 calc(100% - 2px)),
linear-gradient(90deg, transparent calc(100% - 2px), #999999 calc(100% - 2px));
}

input[type="file"],
input[type="button"] {
display:none;
}

::placeholder {
color:#cccccc;
}

.weblogo {
margin:2px 2px;
max-width:64px;
border-radius:6px;
border:2px solid #dddddd;
vertical-align:bottom;
}

.webwing {
padding:0 8px;
max-width:32px;
}

.webrabbit {
padding:28px 16px 20px 16px;
max-width:80px;
}

.banneren,
.bannerjp,
.bannerbken,
.bannerbkjp {
padding:8px 4px;
max-width:200px;
}

.gallery {
box-sizing:border-box;
padding:8px 0 16px 0;
margin:0;
font-size:0;
}

.gryw {
display:inline-block;
box-sizing:border-box;
padding:0;
margin:0;
max-width:288px;
font-size:0;
}

.grysam {
margin:2px 2px;
max-width:64px;
border-radius:6px;
border:2px solid #dddddd;
vertical-align:bottom;
}

.grymod {
max-width:320px;
border-radius:6px;
}

.rf {
transform:scale(-1, 1);
}

.fa {
width:36px;
height:36px;
margin:0 auto;
padding:122px 0 0 0;
}

.fb {
width:24px;
height:24px;
margin:0 auto;
padding:0 0 20px 0;
}

.fv {
border:2px solid #dddddd;
vertical-align:top;
width:32px;
height:32px;
border-radius:4px;
margin:0;
padding:0;
}

.fvdk {
border:2px solid #999999;
}

.fu img {
border-radius:4px;
border:2px solid #dddddd;
vertical-align:top;
width:24px;
height:24px;
margin:0;
padding:0;
}

.movie {
border-radius:8px;
vertical-align:top;
width:24px;
height:24px;
margin:0;
padding:0 8px 0 0;
}

.modal {
z-index:999;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
padding:20px 0;
text-align:center;
}

.modal:not(:target) {
opacity:0;
visibility:hidden;
transition:opacity .3s, visibility .3s;
}

.modal:target {
opacity:1;
visibility:visible;
transition:opacity .4s, visibility .4s;
}

.modal::after {
display:inline-block;
height:96%;
margin-left:-.06em;
vertical-align:middle;
content:"";
}

.modal .modwin {
box-sizing:border-box;
display:inline-block;
z-index:16;
max-width:600px;
position:relative;
padding:32px 32px 16px 32px;
border-radius:8px;
vertical-align:middle;
}

.modal .modwin .modcon {
max-height:80vh;
overflow-y:auto;
}

.modove {
z-index:6;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background:rgba(128, 128, 128, .8);
}

.modal .modclo {
z-index:16;
position:absolute;
top:0;
right:0;
width:32px;
color:#333333 !important;
font-size:20px;
font-weight:700;
line-height:28px;
text-align:center;
text-decoration:none;
text-indent:0;
}

.modal .modclo:hover {
color:#333333 !important;
}

input[type=radio] {
display:none;
}

.rlab {
position:relative;
margin:8px 8px 8px 0;
padding:2px 4px 2px 36px;
width:64px;
display:inline-block;
border:2px solid #dddddd;
border-radius:8px;
}

.rlab:after, .rlab:before {
position:absolute;
content:"";
display:block;
top:50%;
}

.rlab:after {
left:10px;
margin-top:-10px;
width:16px;
height:16px;
border:2px solid #cccccc;
border-radius:50%;
}

.rlab:before {
left:15px;
margin-top:-5px;
width:10px;
height:10px;
background:#cccccc;
border-radius:50%;
opacity:0;
}

input[type=radio]:checked + .rlab:before {
opacity:1;
}

.rlab:hover:after {
border-color:#cccccc;
}

.dark {
color:#ffffff;
background-color:#333333;
}

/* Small */
@media screen and (max-width:480px){

body {
background-color:#ffffff;
}

h1 {
font:bold 24px/160% serif;
}

h2 {
font:bold 100%/160% sans-serif;
}

header,
main,
footer {
box-sizing:border-box;
padding-right:10px;
padding-left:10px;
}

main {
padding-top:40px;
}

.ctr {
box-sizing:initial;
padding-right:0;
padding-left:0;
vertical-align:top;
text-align:left;
max-width:320px;
width:360px;
}

.linklc div,
.linkwd a {
text-align:center;
}

}

/* Medium */
@media screen and (min-width:480px) and (max-width:860px){

body {
background-color:#ffffff;
}

h1 {
font:bold 24px/160% serif;
}

h2 {
font:bold 100%/160% sans-serif;
}

header,
main,
footer {
box-sizing:border-box;
padding-right:40px;
padding-left:40px;
}

main {
padding-top:40px;
}

.ctr {
box-sizing:initial;
padding-right:0;
padding-left:0;
vertical-align:top;
text-align:left;
max-width:320px;
width:360px;
}

.linklc div,
.linkwd a {
text-align:center;
}

}

/* Large */
@media screen and (min-width:860px){

body {
text-align:center;
}

h1 {
font:bold 24px/160% serif;
}

h2 {
font:bold 115%/160% sans-serif;
}

main {
display:inline-block;
vertical-align:top;
text-align:left;
width:600px;
padding-top:40px;
padding-right:20px;
padding-left:20px;
margin-top:20px;
margin-bottom:20px;
border:2px solid #dddddd;
border-radius:10px;
}

.linklc div,
.linkwd a {
text-align:center;
}

.ctr {
max-width:300px;
padding-right:24px;
padding-left:24px;
margin-bottom:0;
border:0;
border-radius:0;
}

}
/* End */