﻿dougahtml{overflow-x:auto}
body{margin:0;padding:0;text-align:center;color:#fefefe;background-color:#010163;line-height:1.3;font-family:"メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGOTHIC",sans-serif;text-shadow:1px 1px 2px #00008b;font-weight:700;*background-image:url(icon/bg.gif)}
img{border-style:none}
a{text-decoration:none;color:#fff;outline:none}
a:hover{color:#01fff6;text-shadow:1px 1px 2px #000}
#wrapper{width:980px;margin:0 auto}
#header{position:relative;height:45px}

/*---------カレンダー------6行月　注意---------背景色---#3030F4------------------------*/

#calendar{float:left;background-color:#3030F4;}


/*---------4月と7月の"6"行の月は-------height:140px;--------*/

#calendarbg{float:left;position:relative;width:133px;height:130px;margin-top:10px;background-color:#3030F4}


#clk{position:relative;top:-2px;color:#ddd;font-size:24px;font-family:"メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGOTHIC",sans-serif;}

/*----------------------------------------------*/

/*---------4月,7月以外の"5"行月は------height:133px;---------

#calendarbg{float:left;position:relative;width:133px;height:133px;margin-top:1px;background-color:#3030F4}


#clk{position:relative;top:-5px;color:#ddd;font-size:24px;font-family:"メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGOTHIC",sans-serif;}

----------------------------------------------*/





#tenkiblock{position:relative;width:133px;height:114px;margin-bottom:1px;}
#tenki{width:133px;height:114px;background:url(img/tenkibg.jpg) no-repeat;background-size:133px 120px;overflow:hidden}

#tenki-a{position:absolute;top:0;left:0;}
#tenki-a p{position:absolute;top:-18px;left:0px;width:133px;text-align:center;font-size:17pt;font-style:italic;font-family:arial black;text-shadow:1px 1px 0px #0000ff, -1px -1px 0px #0000ff, -1px 1px 0px #0000ff,  1px -1px 0px #0000ff, 1px 0px 0px #0000ff, -1px  0px 0px #0000ff, 0px 1px 0px #0000ff,  0px -1px 0px #0000ff;}

#tenki-a a{display:block;width:133px;height:118px;}

#tenki1{position:relative;top:50px;right:-10px;width:123px;margin:0 auto;font-size:11pt;}
#tenki1 img{margin-left:7px;vertical-align:-8px;width:28px;height:28px;}

#tenki2{position:relative;top:75px;left:0px;width:133px;margin:0 auto;font-size:11pt;}
#tenki2 img{margin-right:6px;vertical-align:-8px;width:28px;height:28px;}


/*------------カメラ---↓---------------------../diving/camera.jpg----------*/


#livecamera{float:left;position:relative;width:133px;height:114px;margin-bottom:1px}
#camera{width:133px;height:114px;background:url(./diving/FTP.jpg) no-repeat -22px 0px;background-size:170px 114px;overflow:hidden}
#camera-a{position:absolute;top:0;left:0;}

#camera img{filter: brightness(130%); background-color:white; opacity: 0.8;}
/*#camera img{filter: brightness(150%); background-color:white; opacity: 0.5;}*/

#camera-a p{position:absolute;top:-21px;left:-1px;width:133px;text-align:center;font-size:19pt;font-weight:700;font-style:italic;font-family:arial black;text-shadow:1px 1px 0px #0000ff, -1px -1px 0px #0000ff, -1px 1px 0px #0000ff,  1px -1px 0px #0000ff, 1px 0px 0px #0000ff, -1px  0px 0px #0000ff, 0px 1px 0px #0000ff,  0px -1px 0px #0000ff;}
#camera-a a{display:block;width:133px;height:118px}
#camera-a .p{position:absolute;top:96px;left:8px;font-size:10pt;}


/*------------カメラ-----↑-----------------------------*/



#blogbbs{float:left;position:relative;width:133px;height:120px;margin-bottom:1px}
#bbs{width:133px;height:120px;background:url(img/blogbbs.jpg) no-repeat;background-size:133px 120px}
#bbs a:hover{width:133px;height:120px;background:url(img/blogbbs1.jpg) no-repeat;background-size:133px 120px}

#bbs-a p{position:absolute;top:12px;width:133px;margin:0 auto;text-align:center;font-size:15pt;font-style:oblique;}

#bbs-a b{position:absolute;top:106px;right:5px;font-size:9pt;font-style:oblique}

#bbs-a a{position:absolute;top:0px;left:0;display:block;width:133px;height:120px}
#bbs-a a:hover{color:#01fff6}
#bbs-up{position:absolute;top:33px;left:15px}




#deta{position:absolute;top:62pt;left:15pt;width:710px;margin:0 auto;text-align:center;font-size:9pt}
#deta img{vertical-align:-2px}


#yoteiblock{float:left;position:relative;width:133px;height:120px;}


#yotei{width:133px;height:120px;background:url(img/video.jpg) no-repeat;letter-spacing:0.5px;


background-size: cover;   background-position: center;  transition: background-image 0.3s ease; /* スムーズな切り替え */}
#yotei:hover { background-image: url('img/toiawase.jpg'); /* この2行追加でハーバー時 背景画像変更するぞー */}


#yotei2{position:absolute;top:33px;right:0px;font-size:8pt;width:133px;text-align:center;margin:0 auo 0 auto;}
#yotei-a{position:absolute;top:0px;left:0px;text-shadow:color:#ff0000;}





#yotei-a p{position:absolute;top:-3px;left:10px;font-size:14.0pt;font-family:Chick;}
#yotei-a a{display:block;width:133px;height:120px;color:#0000ae;font-weight: 700;text-shadow:
           2px 2px 0px #fff, -2px -2px 0px #fff,
          -2px 2px 0px #fff,  2px -2px 0px #fff,
           2px 0px 0px #fff, -2px  0px 0px #fff,
           0px 2px 0px #fff,  0px -2px 0px #fff;
}
#yotei-a a:hover{color:#ff0000;text-shadow:
           1px 1px 0px #fff, -1px -1px 0px #fff,
          -1px 1px 0px #fff,  1px -1px 0px #fff,
           1px 0px 0px #fff, -1px  0px 0px #fff,
           0px 1px 0px #fff,  0px -1px 0px #fff;}
#yotei-a .expected{font-size:14px;margin:95px auto 0 -5px;}


/*#yotei-a a:hover:after{content:"皆様のご予約お待ちしております。";display:block;position:absolute;top:49px;left:15px;width:95px;text-align:left;font-size:10px;color:#0000ae;background-color:#eee;padding:5px 2px 5px 7px;border-radius:5px;text-shadow:none}*/



#sche-block{float:left}
#sche{position:relative;width:133px;height:120px}


#dule{width:133px;height:240px;background:url(img/yoyaku.jpg) no-repeat}
#scdu-a a{position:absolute;top:5px;left:10px;width:100%;text-align:left;font-size:12px}
#dule1{position:absolute;top:14px;left:8px;width:100%;text-align:left;font-size:24px;text-shadow:2px 1px 0px #0000ff, -1px -1px 0px #0000ff, -1px 1px 0px #0000ff,  1px -1px 0px #0000ff, 1px 0px 0px #0000ff, -1px  0px 0px #0000ff, 0px 1px 0px #0000ff,  0px -1px 0px #0000ff;}



#scdu-a{position:absolute;top:0;left:0}
#scdu-a p{position:absolute;top:20px;left:28px;width:130px;text-align:center;font-size:9pt}

#scdu-a p .p{position:absolute;top:52px;left:-48px;width:133px;margin:0 auto;font-size:15pt;display:inline-block;transform:skew(-18deg,5deg);color:#EBE7E5}

#scdu-a a{display:block;width:133px;height:120px}
#scdu-a a:hover{color:#00fa9a}

/*
#scdu-a a:hover:after{content:"冠島は5月末まで封印、冠島FDダイビングは6月3日、再開します。";display:block;position:absolute;top:50px;left:7px;width:93px;text-align:left;font-size:10px;color:#0000ae;background-color:#eee;padding:5px 2px 5px 7px;border-radius:5px;text-shadow:none}
*/


#asuikublock{position:relative;width:133px;height:60px;margin-top:1px}
#asuiku-a{position:absolute;top:0;left:0;width:133px}
#asuiku-a p{position:absolute;top:-3px;right:0;width:130px;text-align:center;color:#bfdef8;font-size:10pt}
#asuiku-a a{display:block;width:133px;height:60px;*text-shadow:1px 1px 2px #000}
.asuiku-b{position:absolute;top:18px;left:0;width:133px;font-size:9pt;color:#bfdef8;text-shadow:1px 1px 2px #000}
#asuiku-a p b{position:absolute;top:34px;right:10px;color:#bfdef8;font-size:10pt}


#asuiku-a a:hover:after{content:"この予約フォームは2回目以降お越しのリピーターの方 専用です。初めてMDSをご利用のお客様は予約フォームをご利用下さい。";display:block;position:absolute;bottom:-5px;left:0px;width:125px;text-align:left;font-size:10px;color:#000;background-color:#fff000;padding:5px 2px 5px 7px;border-radius:5px;text-shadow:none}



#wasuremonoblock{position:relative;width:133px;height:60px;margin-top:0px}
#wasuremono-a{position:absolute;top:0;left:0;width:133px}
#wasuremono-a p{position:absolute;top:5px;right:0;width:130px;text-align:center;color:#eee;font-size:11pt;*font-family: Times New Roman, "ＭＳ Ｐゴシック";font-style: oblique;text-shadow:1px 1px 2px #0000ff}
*#wasuremono-a a{display:block;width:133px;height:60px;text-shadow:1px 1px 2px #000}
#wasuremono-a a :hover{color:#01fff6}

#wasuremono-a a:hover:after{content:"Anything forgotten";display:block;position:absolute;bottom:1px;width:133px;font-size:11px;color:#fff;*padding-left:20px}

/*---------------------------↓--11秒間 表示後 4秒かけてゆっくり消える--------------------*/


#now{float:left;position:relative;margin:0 2px;width:710px;height:240px;*background-image:url(images/map.jpg);background-size:710px;background-repeat:no-repeat;overflow:hidden;z-index:1000;


    animation: fadeOut 4s ease 11s 1 normal; /*11秒間 表示後 4秒かけてゆっくり消えるぞー*/
    animation-fill-mode: both;
}
@keyframes fadeOut {
    0% {
        opacity: 1; /*初めに存在する*/
    }
    100% {
        opacity: 0; /*最後に消える*/
    }}


/*-----------------------------↓--消えたあとオンマウスで即に出画像-----------------------*/


#now:hover{display: inline-block;animation: fadeIn 0s;

}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }}


#now:hover{display: inline-block;animation: fadeOut 0s;


/*-----------------------------↓--マウスが離れると即に消える------------------------------*/

}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }}


/*----------------------------------------------------------------------------------------*/


#now span#todaydouga{position:absolute;top:55px;left:215px;z-index:-1;}
#now span#nowup {position:absolute;top:86px;right:30px;z-index:-1;}
#now span#nowup img{width:55px;height:15px}
#now span#ohup {position:absolute;top:165px;right:27px;z-index:-1;}
#now span#ohup img{width:32px;height:24px}


#now span#todaytitle a{position:absolute;top:50px;left:40px;width:240px;text-align:left;font-size:20pt;color:#ccc;*background-color:#ccc;z-index:999;font-style:italic;text-shadow:1px 1px 1px #666,-1px 1px 1px #666,1px -1px 1px #666,-1px -1px 1px #666;}

#now span#todaytitle a p#p1{margin-left:-5px}
#now span#todaytitle a p#p11{margin-left:-6px}

#now span#nowtitle a{position:absolute;z-index:999;top:55px;left:535px;text-align:left;width:180px;*background-color:#ccc;font-size:20pt;color:#ddd;font-style:italic;display:inline-block;transform:skew(3deg,-10deg);text-shadow:1px 1px 1px #FB7BFB,-1px 1px 1px #FB7BFB,1px -1px 1px #FB7BFB,-1px -1px 1px #FB7BFB;}

#now span#nowtitle a p#p2{margin-top:-10px;}

#now span#nowtitle a span{margin-top:-20px;margin-left:-10px;vertical-align:-20px}

#now span#nowtitle a:hover{color:#01fff6;}

#now span#dougatitle a{position:absolute;z-index:999;top:170px;left:67px;text-align:left;width:220px;*background-color:#ccc;font-size:20pt;color:#9999ff;font-style:italic;text-shadow:1px 1px 1px #000,-1px 1px 1px #000,1px -1px 1px #000,-1px -1px 1px #000;}




*#now span#dougatitle a span{margin-left:10px;}



















#now span#ohtitle a{position:absolute;z-index:999;top:173px;left:460px;width:230px;font-size:22pt;color:#fff;font-style:italic;text-shadow:1px 1px 1px #444,-1px 1px 1px #444,1px -1px 1px #444,-1px -1px 1px #444;}

#now span#ohtitle a #p4{width:220px;margin-top:5px;margin-left:105px;text-align:left;*background-color:#ccc;font-size:10pt;}

#now span#ohtitle a:hover{color:#01fff6;}












#now span#todaytitle a:hover{color:#01fff6;}
#now span#nowtitle a:hover{color:#01fff6;text-shadow:#444 1px 1px 0,#444 -1px -1px 0,#444 -1px 1px 0,#444 1px -1px 0,#444 0px 1px 0,#444  0-1px 0,#444 -1px 0 0,#444 1px 0 0;}

#now span#dougatitle a:hover{color:#01fff6;}
#now p#p4 a:hover{color:#01fff6;}

#now p{position:absolute;z-index:99;font-size:11px;text-shadow:1px 1px 1px #000;color:#ccc;}
#now p:hover{color:#01fff6;}
#p1 {width:260px;margin-top:0px;margin-left:5px;color:#ccc;}
#p11 {width:260px;margin-top:18px;margin-left:5px;color:#ccc;}
#p2{width:220px;transform:skew(0deg,10deg);margin-left:-70px;text-align:right;color:#ccc;}
#p3{width:210px;margin-top:3px;margin-left:-25px;color:#ccc;}
#p4{width:230px;margin-top:-50px;margin-left:-20px;font-size:11pt;color:#ddd;}



/*---------------------------------------------------------------*/

#video{float:left;position:relative;width:133px;height:240px;background:url(img/video-block.jpg) no-repeat}

#douga{width:133px;height:60px;margin-top:1px}
#douga-a p{position:absolute;top:5px;left:0;width:133px;height:160px;margin:3px auto 0;text-align:center;font-size:18px;}
#douga-a p span{font-size:16pt;margin-left:1px}
#douga-a b{position:absolute;top:90px;right:10px;font-size:12pt;font-style:oblique;}

#diary-up{position:absolute;top:40px;left:8px}

#kai{width:133px;height:60px;margin-top:1px}
#kai-a p{position:absolute;top:0px;left:50;width:133px;height:60px;margin:20px 0 0 60px;text-align:center;font-size:22px;font-style:oblique;}
#kai-a a{position:absolute;top:60px;left:0;display:block;width:133px;height:60px}
#kai-a a:hover{text-shadow:2px 2px 3px #000;}


#pb{width:133px;height:60px;margin-top:1px}
#play-a p{position:absolute;top:2px;left:-20px;width:133px;margin:3px auto 0;text-align:center;font-size:20px;font-style:oblique}
#play-a a{position:absolute;top:120px;left:20px;display:block;width:133px;height:60px}



#slip{width:133px;height:60px;margin-top:1px}
#slip-a p{position:absolute;top:-5px;left:0;width:133px;margin:3px auto 0;text-align:center;font-size:16px;font-style:oblique}
#slip-a a{position:absolute;top:180px;left:0;display:block;width:133px;height:60px}


/*#slip-a a:hover:after{content:"冠島年間ポイント ランキング";display:block;position:absolute;bottom:1px;width:100px;font-size:11px;color:#fff;padding-left:20px}*/


/*#slip{width:133px;height:60px;margin-top:1px}*/
/*#slip-a p{position:absolute;top:5px;left:0;width:133px;margin:3px auto 0;text-align:center;font-size:16px;font-style:oblique}*/

