html {
margin:0;
letter-spacing: 0.1em;
}
body {
width:100%;
height:100%;
text-decoration:none;
font-family: "メイリオ";
margin:0;
letter-spacing: 0.1em;
}
a:link,a:visited{
color:#0033CC;
text-decoration:none;
font-family: "メイリオ";
letter-spacing: 2px;
margin:0;
}
a:hover{
color:#0033CC;
text-decoration:underline;
font-family: "メイリオ";
letter-spacing: 2px;
margin:0;
}
table {
border-right:1px;
border-bottom: 0px;
border-left: 0px;
border-top: 0px;
margin:0;
letter-spacing: 0.1em;
}
td{
border-right:0px;
border-bottom: 0px;
border-left: 0px;
border-top: 0px;
font-family: "メイリオ";
letter-spacing: 0.1em;
}
.bar {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0a011e+13,064b87+67,4c5d9b+100 */
background: #0a011e; /* Old browsers */
background: -moz-linear-gradient(top, #0a011e 13%, #064b87 67%, #4c5d9b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #0a011e 13%,#064b87 67%,#4c5d9b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #0a011e 13%,#064b87 67%,#4c5d9b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a011e', endColorstr='#4c5d9b',GradientType=0 ); /* IE6-9 */
}
p{ font-size: 15px; letter-spacing: 2px; font-family: "メイリオ"; }
.geto{
width:100%;margin:0px;height:40px;margin:0px;position:relative;top:-1px;padding:0px;
}
@media only screen and (min-device-width: 880px) {
.blog{
position:relative;
top: 5;
left:250px;
width:500px;
vertical-align: top;
}
.blog td{
font-size:16px;
}
.tripimgtb{
width:500px;
}
}
.Sun {
color:#FF0000;
font-size:12px;
width:27px;
}
.Sat {
color:#0000FF;
font-size:12px;
width:27px;
}
.Mon {
color:#000000;
font-size:12px;
width:27px;
}
.Tue {
color:#000000;
font-size:12px;
width:27px;
}
.Wed {
color:#000000;
font-size:12px;
width:27px;
}
.Thu {
color:#000000;
font-size:12px;
width:27px;
}
.Fri {
color:#000000;
font-size:12px;
width:27px;
}
div {
letter-spacing: 0.1em;
}
.imgBright,
.imgBright2,
.imgBright3 {
position: relative;
display: inline-block;
overflow: hidden;
}
.imgBright:before,
.imgBright2:before,
.imgBright3:before {
content: "";
background-color: rgba(255, 255, 255, 0.4);
height: 100%;
width: 100%;
display: block;
position: absolute;
top: 5;
left: -160%;
transform: skewX(-45deg) translateX(0);
}
.imgBright2:before {
transition: all 0.4s ease-in-out;
}
.imgBright:hover:before,
.imgBright2:hover:before {
transform: skewX(-45deg) translateX(320%);
transition: all 0.4s ease-in-out;
}
.imgBright3:before {
animation: bright 3s ease-in-out 2s infinite;
}
@keyframes bright {
0% {
transform: skewX(-45deg) translateX(0);
}
15% {
transform: skewX(-45deg) translateX(320%);
}
100% {
transform: skewX(-45deg) translateX(320%);
}
}
.menu{
max-height:25px;
}
.screen{
position: relative; top:5px; width:100%;
}
.screen2{
position: relative; top:5px; width:85%;
}
.screen3{
position: relative; top:5px; width:100%;
}
table.top{
width: 60%;
}
img.bg1{
z-index: 1;
position:relative;
top: -50;
left:200px;
width:500px;
opacity:0.5;
}
img.bg2{
z-index: 2;
position:relative;
top: 260;
left:-250px;
width:500px;
opacity:0.4;
}
.tabl{
position:relative;
z-index: 5;
background-color:rgba( 255, 255, 255, 0.90 );
color:#000066;
border-collapse: collapse;
table-layout: fixed;
}
td.prof {
letter-spacing: 0.1em;
white-space: nowrap;
}
td.prof2{
font-size:15px;
line-height:25px;
padding:20px;
position:relative;
top:100px;
white-space: nowrap;
}
.title{
position: relative;
padding: 0px 0px 0px 0px;
background:transparent;
animation-duration: 0.2s;
animation-name: title;
animation-fill-mode: both;
animation-delay: 0.8s;
position: absolute;
left: 0px;
right: 0px;
margin: auto;
z-index:2;
}
@keyframes title {
/*アニメーションを定義します*/
0% {
display: none;
opacity: 0;
top:107px;
margin-right:auto;
margin-left:auto;
margin:auto;
}
15% {
display: inline-block;
opacity: 0.3;
top:107px;
margin:auto;
}
100% {
display: inline-block;
opacity: 1;
top:105px;
margin:auto;
}
}
.mes1{
position: relative;
padding: 0px 0px 0px 0px;
background:transparent;
animation-duration: 0.2s;
animation-name: mes1;
animation-fill-mode: both;
animation-delay: 0.5s;
position: absolute;
left: 0px;
right: 0px;
margin: auto;
z-index:2;
}
@keyframes mes1 {
/*アニメーションを定義します*/
0% {
display: none;
opacity: 0;
top:70px;
right:-20px;
margin:auto;
}
15% {
display: inline-block;
opacity: 0.3;
top:70px;
right:-20px;
margin:auto;
}
100% {
display: inline-block;
opacity: 1;
top:70px;
margin:auto;
}
}
.mes2{
position: relative;
padding: 0px 0px 0px 0px;
background:transparent;
animation-duration: 0.2s;
animation-name: mes2;
animation-fill-mode: both;
animation-delay: 0.6s;
position: absolute;
left: 0px;
right: 0px;
margin: auto;
z-index:2;
}
@keyframes mes2 {
/*アニメーションを定義します*/
0% {
display: none;
opacity: 0;
top:170px;
left:-20px;
margin:auto;
}
15% {
display: inline-block;
opacity: 0.3;
top:170px;
left:-20px;
margin:auto;
}
100% {
display: inline-block;
opacity: 1;
top:170px;
margin:auto;
}
}
@media only screen and (max-device-width: 480px) {
.geto{
width:100%;margin:0px;height:40px;margin:0px;position:relative;top:-1px;padding:0px;
}
.blog{
width: 80%;
}
.blog td{
font-size:26px;
line-height: 35px;
}
.blog p{
font-size:26px;
line-height: 35px;
}
.menu{
max-width:50px;
}
.screen{
position: relative; top:5px; width:100%;
}
.screen2{
position: relative; top:5px; width:85%;
}
.screen3{
position: relative; top:5px; width:100%;
}
table.top{
width: 80%;
}
.trip{
position:relative;
top:50px;
width:90%;
}
.trip td{
font-size: 30px;
}
.tripimgtb td{
font-size:20px;
line-height:45px;
}
.tripimg{
width:800px;;
}
.tripimgtb{
width:80%;
}
img.bg1{
z-index: 1;
position:relative;
top: -50;
left:50px;
width:300px;
opacity:0.5;
}
img.bg2{
z-index: 2;
position:relative;
top: 260;
left:-250px;
width:350px;
opacity:0.4;
}
.tabl{
position:relative;
z-index: 5;
background-color:rgba( 255, 255, 255, 0.90 );
color:#000066;
border-collapse: collapse;
table-layout: fixed;
}
td.prof {
letter-spacing: 0.1em;
white-space: nowrap;
}
td.prof2{
font-size:15px;
line-height:45px;
padding:20px;
position:relative;
top:100px;
left: -250px;
white-space: nowrap;
}