@charset "UTF-8";
html {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
  height: 100%;
}

body{
color: #333333;
background-color: #555555;
width:100%;
  height: 100%;
margin: 0px auto;
font-family: "メイリオ", Meiryo,sans-serif;
-webkit-text-size-adjust: none;
font-size: 15px;
letter-spacing: 0.05em;
}

html, body { height: 100%; }

.clear{
clear: both;
height: 0px;
}

a{
text-decoration:none;
color:#333333;
}

a:hover{
-webkit-transition: background-color .6s;
-moz-transition: background-color .6s;
-o-transition: background-color .6s;
-ms-transition: background-color .6s;
transition: background-color .6s;
}

li{
list-style:none;
}

em {
font-style:normal;
display: block;
}

p {
display: block;
}

img {
vertical-align: bottom;
}

table{
border-collapse: collapse;
border-spacing: 0;
}

caption, th, td{
text-align: left;
font-weight: 400;
}

blockquote:before, blockquote:after, q:before, q:after{
content: ?h";
}

blockquote, q{
quotes: ?h" ?g?h;
}

ul{
list-style-type:none;
}

#wrapper {
    display: flow-root;
background: #ffffff;
max-width: 768px;
width: 100%;
margin: 0 auto;
padding: 0 0 0 0;
}

#wrapper nav {
padding: 10px 0;
margin: 5px 10px;
-webkit-overflow-scrolling: touch;
overflow-x: auto;
}

#wrapper nav::-webkit-scrollbar {
height: 5px;
}

#wrapper nav::-webkit-scrollbar-track {
border-radius: 5px;
background: #eee;
}

#wrapper nav::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #999;
}

#wrapper nav ul {
display: table;
}

#wrapper nav ul li {
font-size: 10px;
display: table-cell;
white-space: nowrap;
vertical-align: middle;
padding-right: 26px;
position: relative;
}

#wrapper nav ul li:last-child {
padding-right: 0;
}

#wrapper nav ul li:last-child a {
color:#0045b1;
}

#wrapper nav ul li:last-child:after {
display: none;
}

#wrapper nav ul li:after {
position: absolute;
display: block;
content: ">";
top: 0px;
right: 8px;
}

#wrapper nav ol li a,
#wrapper nav ol li span {
position: relative;
display: block;
top: -4px;
}

#wrapper nav ul li span {
background-color: #eee;
border-radius: 4px;
padding: 6px 8px;
}

#wrapper nav.no-scroll ul {
display: block;
}

#wrapper nav.no-scroll ul li {
display: inline-block;
margin-bottom: 12px;
white-space: normal;
}

#wrapper nav.no-scroll ul li:after {
top: -4px;
}

@media print,screen and (min-width: 1024px) { 
#wrapper nav ul li a:before {
transform: scaleX(1);
transition: transform 0.3s ease;
}
#wrapper nav ul li a:hover:before {
transform: scaleX(0);
}
}


footer{
font-size: 12px;
overflow: hidden;
text-align:center;
  margin-top:auto;

}
footer .dx_info{
overflow: hidden;
position: static;
max-width: 768px;
width: 100%;
margin:0 auto;
background-color: #000000;
}



footer ul li a{
border-top: 1px solid #555555;
display: block;
padding: 18px 10px;
color: #ffffff;
font-weight: bold;
text-decoration: none;
text-align:left;
}

footer .copyright {
background-color: #555555;
font-size: 10px;
color:#ffffff;
overflow: hidden;
padding: 1em 0.5em;
text-align: center;
}
.copyright span {
display: block;
    font-size: 0.8em;
    line-height: 1.4em;
    padding: 0.5em;

}
.copyright hr {
margin: 0.5em auto 1em;
    border: 1px solid #8a8a8a;
    width: 90%;
}
.copyright p {
margin: 0 auto 0.5em;
    font-size: 0.9em;
}

header{
width: 100%;
z-index: 10000;
position: sticky;
background: #000000;
top:0;
}

/* The progress container (grey background) */
.progress-container {
width: 100%;
height: 3px;
background: #cccccc;
}

/* The progress bar (scroll indicator) */
.progress-bar {
height: 3px;
background: #ff9b00;
width: 0%;
}

header h1 {
height: 50px;
}

header h1 a {
display: block;
width:45%;
height: 50px;
padding: 0 0 0 5px;
}

header h1 a figure {
position: relative;
height: 50px;
    max-width: 240px;
}

header h1 a figure img {
width:100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}

header h1 span {
text-indent: -9999px;
overflow: hidden;
display: none;
}

.logo {
max-width:768px;
width:100%;
margin:0 auto;
}

.regist {
width:50%;
height:50px;
top:0;
right:0;
position:absolute;
}

.regist label {
float:right;
width:50px;
}

.regist label a {
padding:5px;
display: block;
}

.regist label a img {
width:100%;
}

.regist p {
font-size: 10px;
color: #ffffff;
display: inline-block;
float: right;
padding: 15px 0;
text-align: right;
}

.loader,
.loader:after {
border-radius: 50%;
width: 30px;
height: 30px;
}

.loader {
margin: 1em auto 0;
font-size: 10px;
position: absolute;
left: 0;
right: 0;
top: 0;
text-indent: -9999em;
overflow: hidden;
border-top: 0.5em solid rgba(107,214,233, 0.2);
border-right: 0.5em solid rgba(107,214,233, 0.2);
border-bottom: 0.5em solid rgba(107,214,233, 0.2);
border-left: 0.5em solid #6bd6e9;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}


.icon-animation {
width: 50px;
height: 200px;
float: left;
display: block;
background: rgba(255, 255, 255, 0.02);
position: relative;
}

.icon-animation span {
width: 35px;
height: 3px;
display: block;
background: #fff;
position: absolute;
right: 10%;
top: 50%;
margin-left: -25px; 
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
}

.type-1 span {
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg); }

.type-1 .top {
-webkit-transform: translateY(-12px);
-ms-transform: translateY(-12px);
transform: translateY(-12px); }

.type-1 .bottom {
-webkit-transform: translateY(12px);
-ms-transform: translateY(12px);
transform: translateY(12px); }

.type-1.is-open .middle {
background: rgba(255, 255, 255, 0); }

.type-1.is-open .top {
-webkit-transform: rotate(-45deg) translateY(0px);
-ms-transform: rotate(-45deg) translateY(0px);
transform: rotate(-45deg) translateY(0px); }

.type-1.is-open .bottom {
-webkit-transform: rotate(45deg) translateY(0px);
-ms-transform: rotate(45deg) translateY(0px);
transform: rotate(45deg) translateY(0px); }



.ismember {
max-width:640px;
width:100%;
margin:0 auto;
}

.ismember img {
width:100%;
}

.ismember em {
display:inline-block;
width:100%;
background:#ff0151;
color:#ffffff;
font-weight:bold;
font-size:16px;
line-height:1.2em;
padding:5px;
}


.information a {
display:block;
}

.information table {
width:100%;
}

.information tr {
width:100%;
background: #e0fdfd;
display:block;
letter-spacing: normal;
vertical-align: middle;
border-radius:5px;
-ms-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #555555;
}

.information tr th {
width:20%;
display: table-cell;
text-align: center;
vertical-align: middle;
padding: 10px 0;
margin:0 5px 0 0;
background: #29a4e0;
color: #ffffff;
font-weight: bold;
font-size: 12px;
border-radius:5px 0 0 5px;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
}

.information tr td {
display: table-cell;
vertical-align: middle;
padding: 10px 0 10px 5px;
color: #000000;
font-weight: bold;
font-size: 12px;
line-height: 1.4em;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

.information tr td small {
font-size:0.9em;
color: #ea5f00;
}

.information_diary div {
width:100%;
}

.information_diary dl {
width:100%;
background: #fee6c1;
}

.information_diary dl dt {
width:20%;
float: left;
text-align: center;
padding: 10px 0;
margin:0 5px 0 0;
background: #e95617;
color: #ffffff;
font-weight: bold;
font-size: 12px;
border-radius:5px 0 0 5px;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
border:1px solid #555555;
}

.information_diary dl dd {
display: block;
padding: 10px 0 10px 5px;
color: #000000;
font-weight: bold;
font-size: 12px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #555555;
border-left: none;
}




h2 {
margin:5px auto 0;
padding:10px 5px;
font-size:1em;
font-weight:bold;
color:#ffffff;
background:#333333;
}

h2.news {
padding: 5px;
}

h2.news img {
width: 8%;
vertical-align: middle;
margin-right: 5px;
}

h2 a {
background:#ff4600;


}

h5 {
background: #e70566;
color: #FFFFFF;
font-size: 1em;
font-weight: bold;
font-style: normal;
line-height: 20px;
overflow: hidden;
padding: 3px 5px;
display: block;
}

.clear{
clear: both;
height: 0px;
}

.toplink{
padding: 0px;
}

.accordion_menu {
margin: 0;
padding: 0;
}

.accordion_menu label {
display: block;
padding: 1em;
color :#333333;
font-weight: bold;
background :#ffffff;
cursor :pointer;
transition: all 0.1s;
border-top:1px solid #e6e6e6;
position:relative;
}

.accordion_menu label:last-child{
border:none;
}

.accordion_menu label:hover {
background :#e6e6e6;
}

.accordion_menu label::before{
	content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #989898;
	border-right: 2px solid #989898;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 3px );
	right: 20px;
	transform: rotate(135deg);
}

.accordion_menu input {
display: none;
}

.accordion_menu .accshow {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}

.cssacc:checked + .accshow {
height: auto;
opacity: 1;
}

/*css*/
/* :::::: toggle button :::::: */
 
#navTgl {
display: none;
}
 
label.open {
cursor: pointer;
height:50px;
/*
position: fixed;
top:0;
right:0;
top: 80%;
left: -30px;
box-shadow: 0px 0px 1px rgb(255,255,255),0px 0px 1px rgb(255,255,255),0px 0px 1px rgb(255,255,255);
*/}

label.close {
cursor: pointer;
position: fixed;
top: 0;
left: 0;
}

.open span {
/*
font-size: 0.9em;
font-weight: bold;
line-height: 50px;
display: block;
padding: 25px 20px 0px 0px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
*/
}
.open span img {
width:auto;
height:100%;
}

.open {
z-index: 750;
/*
width: 60px;
height: 60px;
border-radius: 200px;
color: white;
background-color: rgba(0,0,0,.8);
-webkit-transition: background-color .6s, -webkit-transform .6s;
-moz-transition: background-color .6s, -moz-transform .6s;
-o-transition: background-color .6s, -o-transform .6s;
-ms-transition: background-color .6s, -ms-transform .6s;
transition: background-color .6s, transform .6s;
*/
text-align: center;
}
 
#navTgl:checked + .open {
background-color: ;
color: #ffffff;
z-index: 750;
-webkit-transform: translateX(250px);
-moz-transform: translateX(250px);
-o-transform: translateX(250px);
-ms-transform: translateX(250px);
transform: translateX(250px);
}
 
 
#navTgl:checked + .open span {
padding: 15px 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
 
.close {
pointer-events: none;
z-index: 1;
width: 100%;
height: 100%;
-webkit-transition: background-color .6s;
-moz-transition: background-color .6s;
-o-transition: background-color .6s;
-ms-transition: background-color .6s;
transition: background-color .6s;
}
 
#navTgl:checked ~ .close {
pointer-events: auto;
background-color: rgba(0,0,0,.3);
}
 
/* :::::: drawer menu :::::: */
 
.menu_dx {
z-index: 500;
position: fixed;
top: 0;
left: 0;
border-top: 53px solid #000000;
width: 100%;
height: 100%;
overflow-y: auto;
background-color: #ffffff;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform .6s;
-moz-transition: -webkit-transform .6s;
-o-transition: -webkit-transform .6s;
-ms-transition: -webkit-transform .6s;
transition: transform .6s;
}
 
#navTgl:checked ~ .menu_dx {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
 
.menu_dx p,
.menu_dx li a {
color: #333333;
}
 
.menu_dx p {
text-align: center;
}
 
.menu_dx ul {
padding: 0;
list-style-type:none;
}
 
.menu_dx li {
border-top: 1px solid rgba(195, 195, 195, 0.6);
font-size: .8em;
line-height: 1.4;
}
 
.menu_dx li:first-child {
}
 
.menu_dx li a {
display: block;
padding: 1.5em 2em;
text-decoration: none;
-webkit-transition: background-color .6s;
-moz-transition: background-color .6s;
-o-transition: background-color .6s;
-ms-transition: background-color .6s;
transition: background-color .6s;
}
 
.menu_dx li a:hover {
}
 

.menu_dx li a:before{
left: 3px;
width: 4px;
height: 4px;
border-top: 1px solid #7a0;
border-right: 1px solid #7a0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}



.headline ul {
border-bottom: 1px solid #a0a0a0;
}

.headline ul li {
padding:2%;
background: #ffffff;
margin: 0 auto;
width:100%;
display: block;
border-top: 1px solid #a0a0a0;
}


.headline ul li a p {
padding: 0 10px 3px 5px;
line-height: 1.3em;
overflow: hidden;
font-weight:bold;
word-break: break-all;
}

.headline ul li a span {
font-size: 12px;
color: #636363;
display: block;
font-weight:normal;
}


.headline ul li:hover, .headline ul li:active {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
}

.headline ul li a {
position: relative;
width: 100%;
display: inline-block;
}

.headline ul li a figure{
width:100%;
max-width: 120px;
    max-height: 25vw;
overflow:hidden;
float: right;
}
.headline ul li a figure img {
width: 100%;
}
.headline ul li a:after {
content: "";
display: block;
position: absolute;
top: 50%;
right: 2px;
width: 7px;
height: 7px;
border-right: 2px solid #333333;
border-bottom: 2px solid #333333;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}


.headline ul li.topnews1 {
padding:0;
border:0;
}
.headline ul li.topnews2 {
padding:0;
border:0;
width:50%;
display: table-cell;
    vertical-align: top;
}
.headline ul li.topnews2:nth-child(2) {
border-left:1px solid #a0a0a0;
}
.headline ul li.topnews2 a figure {
width: 100%;
max-width: 100%;
max-height: 30vw;
    overflow: hidden;
display: flex;
justify-content: center;
    align-items: center;
float:none;
}
.headline ul li.topnews2 a figure img {
width: 100%;
    height: 100%;
    object-fit: cover;
}
.headline ul li.topnews2 a:after {
display:none;
}
.headline ul li.topnews2 a p {
padding:0.5em;
}
.headline ul li.topnews1 a {
color: #000000;
display: inline-block;
line-height: 14px;
font-size: 14px;
padding: 0px;
width: 100%;
position: relative;
    vertical-align: middle;
}



.headline ul li.topnews1 a figure{
width: 100%;
max-width: 100%;
    max-height: none;
float: left;
}

.headline ul li.topnews1 a figure img {
margin: auto;
z-index: 50;
width:100%;
}


.headline ul li.topnews1 a p {
font-size: 16px;
font-weight: bold;
font-style: normal;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75),1px 1px 1px rgba(0, 0, 0, 0.75);
padding: 30px 15px 5px 10px;
position: absolute;
bottom: 0;
line-height: 1.2em;
display: block;
width: 100%;
overflow: hidden;
z-index: 70;
background: transparent linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8)) repeat scroll 0% 0%;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.8)));
}

.headline ul li.topnews1 a p span {
display:block;
font-weight:normal;
font-size:12px;
color:#ffffff;

}
.headline ul li.topnews1 a p:after {
content: "";
display: block;
position: absolute;
top: 50%;
right: 7px;
width: 7px;
height: 7px;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}




.indexlink {
margin: 1em auto;
text-align: center;
}
.indexlink a {
padding: 15px 0;
width: 60%;
display: inline-block;
font-weight: bold;
text-align: center;
color: #333333;
background: #eeeeee;
border: 1px solid #8e8e8e;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}


.marquee {
background: #ffffff;
overflow: hidden;
padding: 1em 0;
}

.marquee p {
margin:0;
padding-left:100%;
display:inline-block;
white-space:nowrap;
	-webkit-animation-name:marquee;
	-webkit-animation-timing-function:linear;
	-webkit-animation-duration:15s;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-name:marquee;
	-moz-animation-timing-function:linear;
	-moz-animation-duration:15s;
	-moz-animation-iteration-count:infinite;
	-ms-animation-name:marquee;
	-ms-animation-timing-function:linear;
	-ms-animation-duration:15s;
	-ms-animation-iteration-count:infinite;
	-o-animation-name:marquee;
	-o-animation-timing-function:linear;
	-o-animation-duration:15s;
	-o-animation-iteration-count:infinite;
	animation-name:marquee;
	animation-timing-function:linear;
	animation-duration:15s;
	animation-iteration-count:infinite;
}

@-webkit-keyframes marquee {
from { -webkit-transform: translate(0%);}
99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
from { -moz-transform: translate(0%);}
99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
from { -ms-transform: translate(0%);}
99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
from { -o-transform: translate(0%);}
99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
from { transform: translate(0%);}
99%,to { transform: translate(-100%);}
}






.latestnews {
position: relative;
border-top:1px solid #000000;
border-bottom:1px dotted#000000;
padding: 10px;
font-weight: bold;
background: #eeeeee;
}
.latestnews span {
position: absolute;
right: 5px;
top: 7px;
background: #333333;
color: #ffffff;
padding: 3px 7px;
display: block;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}







.project {
overflow: hidden;
position: static;
width: 100%;
max-width: 640px;
background-color: #ffffff;
display: table;
padding:3px;
}
.project section {
display: table-cell;
vertical-align: top;
width: 33%;
}

.information {
margin: 0px auto;
overflow: hidden;
position: static;
max-width: 640px;
width: 100%;
padding: 1em;
}
.information em {
font-size:12px;
font-style: normal;
}
.information p {
font-size:0.9em;
line-height:1.3em;
}


.contents {
overflow: hidden;
position: static;
max-width: 768px;
width:100%;
background-color: #ffffff;
margin: 0 auto 10px;
    flex: 1;
    overflow-x: hidden;
}
.contents em, .adnw em {
background: #ffd3eb;
color: #ec0055;
font-size: 12px;
font-weight: bold;
font-style: normal;
line-height: 1.2em;
overflow: hidden;
padding: 3px;
display: block;
}
.contents ul {
width:100%;
}
.contents li {
min-height:65px;
display:inline-table;
width:100%;
background-color: #ffffff;
border-bottom: 1px solid #a0a0a0;
position:relative;
}
.contents li:after {
content: "";
display: block;
position: absolute;
top: 30px;
right: 7px;
width: 8px;
height: 8px;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.contents li:first-child {
border-top: 1px solid #a0a0a0;
/*background-color: #ECECEC;*/
}
.contents li a {
display:inline-table;
padding:3px 12px 3px 3px ;
width: 100%;
text-decoration: none;
color: #000000;
font-weight: bold;
}
.contents li img {
width:60px;
float:left;
margin:0 5px 0 0;
}
.contents li p {
font-size:14px;
line-height: 1.2;
}
.contents li span {
font-size: 12px;
font-weight: normal;
line-height: 1.5em;
display: block;
margin: 3px 0 0 0;
overflow: hidden;
}


.contents ul li:hover, .contents ul li:active {
background:#f9e1f9;
}




.diary_top{
max-width: 640px;
width:100%;
background:#ffffff;
}
.detail_img img {
width:100%;
}
.diary_top ul li {
position: relative;
border-bottom: 1px solid #b8b8b8;
display: block;
padding: 0px;
width: auto;
overflow: hidden;
}
.diary_top ul li:after {
content: "";
font-family: 'FontAwesome';
display: block;
position: absolute;
top: 45%;
right: 7px;
width: 7px;
height: 7px;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.diary_top ul li:first-child{
border-top: 1px solid #b8b8b8;
}

.diary_top ul li a {
display: inline-block;
min-height: 60px;
font-size: 14px;
line-height: 1.2em;
padding: 0.5em;
width: 100%;
}
.diary_top ul li a img {
width:20%;
margin:0 5px 0 0;
float:left;
}

.diary_top ul li a em {
color: #000000;
font-weight: bold;
line-height: 1.3em;
font-size: 1em;
padding: 0.5em 15px 0.5em 0.5em;
}
.diary_top ul li a em span {
    font-size: 0.7em;
    background: #313131;
    color: #ffffff;
    padding: 0.5% 1%;
    margin-left: 0.5em;
    border-radius: 5px;
    display: inline;
    vertical-align: middle;
    font-weight: normal;
}

.diary_top ul li a span {
color: #333333;
line-height: 16px;
font-size: 1em;
font-weight:bold;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.diary_top ul li a p {
background:#696969;
color:#ffffff;
font-size:0.8em;
    padding: 0.2em 0.5em;
    display: block;
}


.corner ul {
padding:1em;
}

.corner ul li {
margin:0 0 1em 0;
}
.corner ul li:last-child {
margin-bottom:0;
}
.corner ul li a {
display: block;
overflow:hidden;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.corner ul li a img {
width:100%;

}




.offsite {
background: none repeat scroll 0 0 #FFFFFF;
border-style: solid;
position: relative;
float: left;
width: 50%;
}
.offsite a {
background: #ffffff;
text-decoration: none;
display: block;
max-height: 100%;
}
.offsite img{
width: 100%;
padding:0px;
}
.offsite h3{
color: #000000;
font-weight: bold;
line-height: 14px;
font-size: 14px;
text-align: left;
padding: 2px;
}
.offsite p{
color: #000000;
line-height: 10px;
font-size: 10px;
padding: 5px;
height: 65px;
}







.links li {
display: inline-block;
width: 32%;
color: #000000;
font-size: 9px;
text-decoration: none;
padding: 5px;
}
.links li a {
text-decoration: none;
display: block;
}



#sitemap{
background: #555555;
display: block;
font-size: 12px;
width: 100%;
list-style: none outside none;
float: left;
background-color: #222222;

}


.everyday {
margin: 0px auto;
overflow: hidden;
position: static;
width:100%;
background-color: #ffffff;
}

.everyday ul {
}
.everyday li {
min-height:65px;
display:inline-table;
width:100%;
background-color: #ffffff;
border-bottom: 1px solid #000000;
}
.everyday ul li a:hover, .everyday ul li a:active {
background:#f9e1f9;
}
.everyday li:nth-child(even) {
background-color: #ECECEC;
}
.everyday li a {
display:inline-table;
padding:3px ;
width: 100%;
text-decoration: none;
color: #000000;
font-weight: bold;
}
.everyday li img {
width:25%;
float:left;
margin:0 5px 0 0;
}
.everyday li em {
font-size:12px;
line-height: 1.2;
display:block;
}
.everyday li p {
font-size: 12px;
font-weight: normal;
line-height: 1.5em;
display: block;
margin: 3px 0 0 0;
padding: 0 5px 0 0;
position:relative;
}
.everyday li p:after {
content: "";
display: block;
position: absolute;
top: 40%;
right: 0px;
width: 6px;
height: 6px;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.everyday p span {
color:#fffc0e;
font-weight:bold;
background:#000000;
display: inline-block;
padding:3px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

.everyday p b {
color:#ff00a0;
font-weight:bold;
font-size:14px;
}




.balloon {
width: 100%;
overflow: hidden;
}

.balloon .faceicon {
float: left;
width: 20%;
padding: 1%;
}

.balloon .faceicon img{
width: 100%;
height: auto;
}

.balloon a:hover {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
}

.balloon .faceicon {
float: left;
width: 20%;
padding: 1%;
}



.says {
width: 78%;
float: left;
position: relative;
margin: 5px 0 ;
padding: 10px;
border-radius: 15px;
background: #fed7f0;
}

.says:before {
content: "";
display: inline-block;
position: absolute;
top: 30px;
left: -25px;
border: 10px solid transparent;
border-right: 25px solid #fed7f0;
}

.says em {
font-size: 12px;
font-weight: bold;
color: #000000;
display: block;
margin: 0 0 5px -5px;
}
.says p {
margin: 0;
padding: 0;
line-height:1.4em;
}
.says p b {
color:#ff00a0;
}

.says span {
font-size: 10px;
font-weight: ;
color: #000000;
display: block;
	text-align:right;
}




.pagelink {
padding: 7px;
text-align: center;
background: #c61a45;
color: #ffffff;
font-size: 1.2em;
font-weight: bold;
letter-spacing: 0.2em;
display: block;
width: 90%;
margin: 5px auto;
}



.everyday li em {
padding: 0 .5em .5em 2em;
border-bottom: 1px solid #ccc;
}


.banner_area {
padding:0.5em;
text-align:center;
width:100%;
}
.banner_area a {
display:inline-block;
width:100%;
margin:0 0 5px 0;
}
.banner_area a:hover, .banner_area a:active {
background:#f9e1f9;
}

.banner_area a img {
width:100%;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.banner_area a img:hover, .banner_area a img:active {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
}

.banner_area a p {
text-align: left;
font-weight: bold;
font-size: 12px;
line-height: 1.2em;
display: block;
margin: 3px 0;
}.banner_area a p span {
color:#ff1493;
}

.adnw {
margin: 0px auto;
overflow: hidden;
position: static;
max-width: 640px;
width:100%;
background-color: #ffffff;
}

.adnw ul {
border-top:none;
width:100%;
}
.adnw li {
min-height:65px;
display: inline-block;
width:100%;
background-color: #ffffff;
border-bottom: 1px solid #989898;
position:relative;
}
.adnw li:after {
content: "";
display: block;
position: absolute;
top: 30px;
right: 7px;
width: 8px;
height: 8px;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.adnw li:first-child {
border-top: 1px solid #989898;
/*background-color: #ECECEC;*/
}
.adnw li a {
display:inline-table;
padding:3px ;
width: 100%;
text-decoration: none;
color: #000000;
}
.adnw li a img {
width:25%;
float:left;
margin:0 5px 0 0;
}
.adnw li a p {
font-size:12px;
line-height: 1.2;
padding: 0 15px 0 0;
}
.adnw li a span {
font-size: 12px;
font-weight: bold;
line-height: 1.2em;
display: block;
}
.adnw ul li:hover, .adnw ul li:active {
background:#f9e1f9;
}



.adnw_2, .adnw_3 {
background:#ffffff;
}

.adnw_2 h2, .adnw_3 h2 {
background: #404040;
color: #ffffff;
font-size: 12px;
font-weight: bold;
font-style: normal;
line-height: 1.2em;
overflow: hidden;
padding: 3px;
display: block;
}

.adnw_2 h3, .adnw_3 h3 {
background: #ffd3eb;
color: #ec0055;
font-size: 12px;
font-weight: bold;
font-style: normal;
line-height: 1.2em;
overflow: hidden;
padding: 3px;
display: block;
}

.adnw_2 ul, .adnw_3 ul {
border-top:none;
width:100%;
display: inline-block;
text-align:center;
}
.adnw_2 li {
display: inline-block;
width: 48%;
background-color: #ffffff;
}

.adnw_3 li {
display: inline-block;
width: 32%;
background-color: #ffffff;
}

.adnw_2 li a , .adnw_3 li a {
display: block;
padding:2px 0 ;
width: 100%;
text-decoration: none;
color: #000000;
}
.adnw_2 li a img , .adnw_3 li a img {
width:100%;
}

.adnw_2 ul li:hover, .adnw_2 ul li:active ,.adnw_3 ul li:hover, .adnw_3 ul li:active {
background:#f9e1f9;
}











.infobox {
margin: 0 auto;
padding:1%;
background: #e6e6fa;
border-top: 1px solid #000000;
}

.infobox a {
display:block;
font-size: 100%;
vertical-align: baseline;
line-height: 1em;
text
}

.infobox dl{
width: 100%;
display: inline-block;
}

.infobox dl dt{
width:15%;
float: left;
display: block;
line-height:30px;
font-size:0.5em;
text-align:center;
font-weight:bold;
border-radius:5px;
background: #04b9ea; 
color: #ffffff;
text-shadow:
0px 0px 5px rgba(000,000,000,1),
0px 0px 0px rgba(255,255,255,0.2);
}

.infobox dl dd {
font-size: 12px;
/* text-align: center; */
display: block;
line-height: 30px;
color: #333333;
font-weight: bold;
}
.infobox dl dd em {
display:block;
padding:0 0 0 3px;
overflow: auto;
letter-spacing: -1px;
}






.accordion_menu {
margin: 0;
padding: 0;
}

/*???x??*/
.accordion_menu label {
display: block;
padding:1.3em  1em;
color :#333333;
font-weight: bold;
background :#ffffff;
cursor :pointer;
transition: all 0.1s;
border-top:1px solid #e6e6e6;
position:relative;
}

.accordion_menu label:last-child{
border:none;
}


/*???x???z?o?[??*/
.accordion_menu label:hover {
background :#e6e6e6;
}

.accordion_menu label::before{
	content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #989898;
	border-right: 2px solid #989898;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 3px );
	right: 20px;
	transform: rotate(135deg);
}


/*?`?F?b?N?͉B??*/
.accordion_menu input {
display: none;
}

/*???g?・\???ɂ??Ă???*/
.accordion_menu .accshow {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}

/*?N???b?N?Œ??g?\??*/
.cssacc:checked + .accshow {
height: auto;
opacity: 1;
}








.top_scroll {
z-index: 950;
position: fixed;
top:70%;
right:-30px;
width: 60px;
height: 60px;
border-radius: 200px;
color: white;
background-color: rgba(0,0,0,.8);
text-align: center;
-webkit-transition: background-color .6s, -webkit-transform .6s;
transition: background-color .6s, transform .6s;
box-shadow: 0px 0px 1px rgb(255,255,255),0px 0px 1px rgb(255,255,255),0px 0px 1px rgb(255,255,255);
}
.top_scroll a{
position: absolute;
width: 18px;
height: 18px;
border: 4px solid transparent;
border-left-color: #FFF;
border-top-color: #FFF;
display: block;
top: 26px;
left: 10px;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
}
.top_scroll a span{
position: absolute;
width: 18px;
height: 18px;
border: 4px solid transparent;
border-left-color: #FFF;
border-top-color: #FFF;
top: 26px;
left: 10px;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg)
}


.companylist {
background:#ffffff;
padding: 10px 5px;
margin: 0 auto 10px;
}
.companylist h2 {
background:#333333;
color:#ffffff;
padding:10px 5px;
margin:0 0 5px 0;
}

.companylist ul {
width:100%;
display:inline-block;
margin:0 auto;
text-align:center;
font-size: 0;

}
.companylist ul li {
width:19%;
display: inline-block;
}
.companylist ul li a {
padding:0 3px;
display:block;
}

.companylist ul li a img {
width:100%;
}

.companylist ul li a img:hover {
opacity: 0.6;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
-webkit-transition: 0.1s ease-in-out;
-moz-transition: 0.1s ease-in-out;
-o-transition: 0.1s ease-in-out;
transition: 0.1s ease-in-out;
}



.add_link{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
background: -moz-linear-gradient(#f0f0f0, #e0e0e0);
background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#e0e0e0));
overflow:hidden;
}

.Main_Copy {
margin: 5px 5px;
border: 1px solid rgb(204, 204, 204);
border-radius: 4px 4px 4px 4px;
background: none repeat scroll 0% 0% #e6e6fa;
}

.Main_Copy a.Icon_Link{
margin:0px;
padding:2px 20px 2px 2px !important;

}


.Main_Copy_Box dl{
position:relative;
}

.Main_Copy_Box dl dt{
width:46px;
height:36px;
line-height:36px;
font-size:0.5em;
text-align:center;
border-radius:4px;
border:1px solid #ffffff;
background:#2489ff;
color: #ffffff;
}

.Main_Copy_Box dl dd {
position: absolute;
top: 1px;
left: 52px;
font-size: 1em;
text-align: center;
line-height: 2.5em;
color: #333333;
font-weight:bold;
}


.Main_Copy2 {
margin: 5px 5px;
border: 1px solid rgb(204, 204, 204);
border-radius: 4px 4px 4px 4px;
background: none repeat scroll 0% 0% #e6e6fa;
}

.Main_Copy2 a.Icon_Link{
margin:0px;
padding:2px 20px 2px 2px !important;

}

a.Icon_Link{
display:block;
font-size: 100%;
vertical-align: baseline;
text-decoration: none !important;
-moz-box-sizing: border-box;
line-height: 1em;
}



.Main_Copy_Box2 dl{
position:relative;
}

.Main_Copy_Box2 dl dt{
width:46px;
height:36px;
line-height:36px;
font-size:0.5em;
text-align:center;
border-radius:4px;
border:1px solid #ffffff;
background: #fa0845;
color: #ffffff;
}

.Main_Copy_Box2 dl dd {
position: absolute;
top: 1px;
left: 52px;
font-size: 1em;
text-align: center;
line-height: 2.5em;
color: #333333;
font-weight:bold;
}



.project {
margin: 5px auto;
overflow: hidden;
position: static;
width: 100%;
max-width: 640px;
border-radius: 5px;
border: 3px solid #ffffff;
background-color: #ffffff;
display: table;
}
.project section {
display: table-cell;
vertical-align: top;
width: 33%;
}
.project h2{
background: #333333;
border-radius: 5px 5px 0px 0px;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
line-height: 16px;
overflow: hidden;
padding: 5px;
text-shadow: 0 0 3px #555555;
}
.project h2 a{
color: #EBFB11;
text-decoration: none;
font-size: 12px;
line-height: 16px;
padding: 2px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: -moz-linear-gradient(#888888, #555555);
background: -webkit-gradient(linear, left top, left bottom, from(#888888), to(#555555));
float: right;
border: 1px solid #222222;
}

.diary {
background:#E7E7E7;
display:table;
word-break: break-word;
}
.diary section {
display:table-cell;
}
.diary section a img {
width:100%;
font-size:14px;
}
.diary section a em {
font-weight:bold;
padding: 3px;
}
.diary section a p {
font-size:12px;
padding: 3px 0;
text-align:right;
}


.project_list ul{
width:100%;
}
.project_list ul li:nth-child(1){
width:100%;
border: 1px solid #dcdcdc;
border-top:none;
}
.project_list ul li:nth-child(2){
width:50%;
border: 1px solid #dcdcdc;
border-top:none;
border-right:none;
float:left;
}
.project_list ul li:nth-child(3){
width:50%;
border: 1px solid #dcdcdc;
border-top:none;
float:left;
}
.project_list ul li a {
width:100%;
display:block;
}
.project_list ul li a img{
width:100%;
}


.bokupro {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
margin: 5px auto;
overflow: hidden;
position: static;
max-width: 640px;
width:100%;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 3px solid #ffffff;
background-color: #ffffff;
}
.bokupro em {
background: #333333;
border-radius: 5px 5px 0px 0px;
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
font-style: normal;
line-height: 20px;
overflow: hidden;
padding: 5px;
text-shadow: 0 0 3px #555555;
display: block;
}
.bokupro ul {
border: 1px solid #CACACA;
border-top:none;
}
.bokupro li {
min-height:65px;
display:inline-table;
width:100%;
background-color: #FBFBFB;
border-bottom: 1px solid #CACACA;
position:relative;
}
.bokupro li:after {
content: "";
display: block;
position: absolute;
top: 30px;
right: 7px;
width: 8px;
height: 8px;
border-right: 1px solid #555;
border-bottom: 1px solid #555;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.bokupro li:nth-child(even) {
background-color: #ECECEC;
}
.bokupro li a {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display:inline-table;
padding:5px 12px 5px 5px ;
width: 100%;
text-decoration: none;
color: #333333;
font-weight: bold;
}
.bokupro li img {
width:60px;
float:left;
margin:0 5px 0 0;
}
.bokupro li p {
font-size:12px;
line-height: 1.2;
}
.bokupro li span {
font-size: 11px;
font-weight: normal;
line-height: 1.5em;
display: block;
margin: 3px 0 0 0;
}


.wrestlerclm a {
display: inline-block;
width: 100%;
padding: 5px;
background: #F5F5F5;
}
.wrestlerclm a img{
width:20%;
float: left;
margin: 0 5px 0 0;
}
.wrestlerclm a em{
color:#11AF34;
font-weight:bold;
font-size:16px;
}
.wrestlerclm a p{
font-weight:bold;
font-size:12px;
margin: 3px 0;
}
.wrestlerclm a span{
font-size:12px;
display:block;
text-align:right;
}

.project_list a img {
width:100%;
}
.project_list a em {
padding: 5px;
border: 1px solid #dcdcdc;
border-top: none;
background: #F3F3F3;
font-size: 12px;
font-weight: bold;
line-height: 1.2;
}



.adnw {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
margin: 5px auto;
overflow: hidden;
position: static;
max-width: 640px;
width:100%;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 3px solid #ffffff;
background-color: #ffffff;
}
.adnw em {
background: #333333;
border-radius: 5px 5px 0px 0px;
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
font-style: normal;
line-height: 20px;
overflow: hidden;
padding: 5px;
text-shadow: 0 0 3px #555555;
display: block;
}
.adnw ul {
border: 1px solid #CACACA;
border-top:none;
width:100%;
}
.adnw li {
min-height:65px;
display:inline-table;
float:left;
width:100%;
background-color: #FBFBFB;
border-bottom: 1px solid #CACACA;
position:relative;
}
.adnw li a {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display:inline-table;
padding:3px ;
width: 100%;
text-decoration: none;
color: #333333;
}
.adnw li a img {
width:25%;
float:left;
margin:0 5px 0 0;
}
.adnw li a p {
font-size:12px;
line-height: 1.2;
}
.adnw li a span {
font-size: 14px;
font-weight: bold;
line-height: 1.5em;
display: block;
margin: 3px 0 0 0;
}








.everyday {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
margin: 5px auto;
overflow: hidden;
position: static;
max-width: 640px;
width:100%;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 3px solid #ffffff;
background-color: #ffffff;
}
.everyday h5 {
background: #e70566;
border-radius: 5px 5px 0px 0px;
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
font-style: normal;
line-height: 20px;
overflow: hidden;
padding: 5px;
display: block;
}
.everyday ul {
border: 1px solid #CACACA;
border-top:none;
}
.everyday li {
min-height:65px;
display:inline-table;
width:100%;
background-color: #FBFBFB;
border-bottom: 1px solid #CACACA;
}

.everyday li:nth-child(even) {
background-color: #ECECEC;
}
.everyday li a {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display:inline-table;
padding:5px 12px 5px 5px ;
width: 100%;
text-decoration: none;
color: #333333;
font-weight: bold;
}
.everyday li img {
width:60px;
float:left;
margin:0 5px 0 0;
}
.everyday li em {
font-size:12px;
line-height: 1.2;
display:block;
margin:0 0 5px 0;
}
.everyday li p {
font-size: 12px;
font-weight: normal;
line-height: 1.5em;
display: block;
margin: 3px 0 0 0;
padding: 0 5px 0 0;
position:relative;
}
.everyday li p:after {
content: "";
display: block;
position: absolute;
top: 40%;
right: 0px;
width: 6px;
height: 6px;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.everyday em span {
color:#fffc0e;
font-weight:bold;
background:#333333;
display: inline-block;
padding:3px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

.everyday p b {
color:#ff00a0;
font-weight:bold;
font-size:14px;
}




.everyday li em {
position: relative;
padding: 0 .5em .5em 2em;
border-bottom: 1px solid #ccc;
}
.everyday li em::before,
.everyday li em::after {
position: absolute;
content: '';
border-radius: 100%
}
.everyday li em::before {
top: .2em;
left: .2em;
z-index: 2;
width: 14px;
height: 14px;
background: rgba(255, 69, 255, 0.5);
}
.everyday li em::after {
top: .7em;
left: .7em;
width: 12px;
height: 12px;
background: rgba(251, 202, 202, 0.5);
}


.bubble_off{
display: none;
}
#float_header {
display: none;
width: 100%;
position: fixed;
left: 0px;
top: 15px;
z-index: 999;
padding: 0 auto;

}

#float_footer {
display: none;
width: 100%;
position: fixed;
left: 0px;
bottom: 15px;
z-index: 999;
padding: 0 auto;
}

#popup_bookmark {
position: relative;
width: 100%;
margin: 0px auto;
}
#popup_bookmark img{
width:100%;
}

#bookmark_close{
position: absolute;
display: block;
top: -1vw;
left: 0.5vw;
width:32px;
height:32px;
border:0;
background-color:black;
border-radius:32px;
margin:0;
padding:0;
transform:scale(0.5);
cursor:pointer;
}
#bookmark_close:before{
content:"";
position:absolute;
display:inline-block;
top:4px;
left:13px;
width:6px;
height:24px;
border:0;
margin:0;
padding:0;
background-color:white;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
#bookmark_close:after{
content:"";
position:absolute;
display:inline-block;
top:4px;
left:13px;
width:6px;
height:24px;
border:0;
margin:0;
padding:0;
background-color:white;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}
#bookmark_close:hover{
background-color:red;
}


#mypage_close{
position: absolute;
display: block;
top: 0;
right: 0;
width:40px;
height:40px;
border:0;
background-color:black;
border-radius:32px;
margin:0;
padding:0;
transform:scale(0.5);
cursor:pointer;
background:#ffffff;
}
#mypage_close:before{
content:"";
position:absolute;
display:inline-block;
top:4px;
left:17px;
width:6px;
height:30px;
border:0;
margin:0;
padding:0;
background-color:#000000;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
#mypage_close:after{
content:"";
position:absolute;
display:inline-block;
top:4px;
left:17px;
width:6px;
height:30px;
border:0;
margin:0;
padding:0;
background-color:#000000;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}
#mypage_close:hover{
background-color:#ffffff;
}





#popup_mypage {
position: absolute;
top: 50px;
right: 10px;
z-index: 1000;
width:50%;
}
#popup_mypage img {
width:100%;
}
.animated { 
animation-duration: 12s; 
animation-fill-mode: both; 
animation-timing-function: linear; 
animation-iteration-count:infinite; 
} 

@keyframes shake { 
0%, 100% {transform: translateX(0);} 
10%, 30%, 50%, 70%, 90% {transform: translateX(-8px);} 
20%, 40%, 60%, 80% {transform: translateX(8px);} 
} 
.shake { 
animation-name: shake; 
}



.animated2 { 
animation-duration: 5s; 
animation-fill-mode: both; 
animation-timing-function: linear; 
animation-iteration-count:infinite; 
} 

@keyframes bounce { 
0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
40% {transform: translateY(-15px);} 
60% {transform: translateY(-5px);} 
} 

.bounce { 
animation-name: bounce; 
}







.page {
margin: 10px auto 15px;
text-align: center;
width: 100%;
font-size: 10px;
color: #000000;
}

.page ul {
text-align:center;
}
.page ul li {
display:inline-block;
width:10%;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.page ul li a {
padding:15px 0;
display: block;
}
.here{
font-weight:bold;
background:#eeeeee;
}

.page p {
margin: 1em auto;
}


.loginsp {

}
.loginsp ul {
display:inline-block;
width:100%;
text-align:center;
margin:1em auto;
}
.loginsp ul li {
display:inline-block;
width:40%;
}
.loginsp ul li a {
display:block;
background: #e54500;
padding: 1em 0;
font-weight: bold;
color: #ffffff;
}