﻿.side-corner-tag {position: fixed;top:1px;right:2px;width:75px;height:75px;z-index:9999;opacity: 1;color: #fff;display: inline-block;padding: 5px;overflow: hidden;font-family: Arial, sans-serif;font-weight: 900;font-size:15px}
.side-corner-tag p {display: inline;}
.side-corner-tag p span {position: absolute;display: inline-block;right: -25px;box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);text-align: center;text-transform: uppercase;top: 22px;background: #40c21b;width: 100px;padding: 3px 10px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg);}


#rup{position:absolute;top:58px;right:562px}
#rup img{width:27px;height:10px}
#fup{position:absolute;top:58px;right:282px}
#fup img{width:27px;height:10px}


#photo{float:left;width:710px;height:400px;margin:0 2px;border-radius:5px;*overflow:hidden}

/*-----------------------------↓-トップ画像注意---------------------------------*/

#viewer{position:relative;width:710px;height:763px;overflow:hidden;}
#viewer img{position:absolute;top:0;left:0;z-index:8;opacity: 0;width:710px;height:763px;border-radius: 2px 2px 0px 0px;}



#viewer img.active{z-index:10;opacity: 1}
#viewer img.last-active{z-index:9}

/*-----------------------------↑-トップ画像注意---------------------------------*/

#pfototext{float:left;position:relative;margin-left:2px;margin-right:2px;width:710px;height:121px;*background:url(icon/cobg.png) no-repeat;background-size:710px 121px;text-shadow:none;font-size:14px;color:#ddd;}



#comment3{position:absolute;width:600px;top:120px;left:195px;margin:0 auto 0 auto;text-align:center;z-index:9999;font-size:24pt;font-style:oblique;background: transparent;animation:text-shadow:1px 1px 1px #0000ae,-1px 1px 1px #0000ff,1px -1px 1px #0000ff,-1px -1px 1px #0000ff;color:#ccc;animation: blinkAnime 5s infinite alternate;}


/*-----------------------------------おはようございます　↓  文字デザイン変更箇所--------------------------------------------------------*/


#welcom1{position:absolute;width:610px;top:420px;margin:0 auto 0 50px;text-align:center;z-index:9999;font-size:16px;color:#fff;text-shadow:0 0 10px #0000ae;*background-color:#0000ff;


/*-----------------↓-アニメーション設定-↓-------------------------------*/

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


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


#logo{position:absolute;top:13px;left:0}
#logo3{position:absolute;top:15px;right:5px;text-align:right;font-size:11px;color:#ddd;font-weight:600;letter-spacing:1px}
#logo3 img{*margin-left:1px;*vertical-align:-1px}

#logo3 #day{font-size:13px;color:#ccc;margin-left:0px;vertical-align:-1.5px;}
#logo3 #day img{width:12px;height:13px;vertical-align:-1.5px;}

#divelogo img{margin-left:2px;vertical-align:-2.5px;}


#java{margin:0 auto;width:600px;padding:10px;color:#ff0000;background-color:#fff;text-shadow:none}


#glo{margin:0;padding:0;width:980px;height:44px;overflow:hidden}
#glo ul{list-style-type:none;margin:0;padding:0}
#glo li{text-indent:-9999px;float:left;width:140px;margin:0;padding:0}
#glo a{display:block;width:980px;height:43px;background:url(icon/top.png) no-repeat;overflow:hidden}
#me1 a{background-position:0 0}
#me2 a{background-position:-140px 0}
#me3 a{background-position:-280px 0}
#me4 a{background-position:-420px 0}
#me5 a{background-position:-560px 0}
#me6 a{background-position:-700px 0}
#me7 a{background-position:-840px 0}

#glo a:hover{background:url(icon/top.png) no-repeat}
#me1 a:hover{background-position:0 -43px}
#me2 a:hover{background-position:-140px -43px}
#me3 a:hover{background-position:-280px -43px}
#me4 a:hover{background-position:-420px -43px}
#me5 a:hover{background-position:-560px -43px}
#me6 a:hover{background-position:-700px -43px}
#me7 a:hover{background-position:-840px -43px}



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



#menu2{float:left;width:133px;height:170px;margin:0}
#menu2 ul{margin:0;padding:0;list-style:none;background:url(icon/menu1-pc.png) no-repeat ;background-size:133px 170px}
#menu2 li{list-style:none;display:block}
#menu2 li a{list-style:none;display:block;color:#d1dcf1;font-size:12px;font-family:sans-serif;text-decoration:none;width:133px;height:43px;line-height:42px;font-weight:700;text-align:center}
#menu2 li a:hover{height:43px;line-height:42px;color:#01fff6;text-decoration:none}
#menu2 li a.fee{font-size:15px;padding-bottom:1px}
#menu2 li a.read{font-size:16px;padding-left:1px}
*#menu2 li a.link{font-size:16px;font-family:Tahoma;color:#fff000;}
*#menu2 li a.link span{font-size:13px;}




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

#menu0{position:relative;width:133px;height:114px;margin-top:-2px}


#menu0-a{width:133px;height:114px;background: url(img/mail.jpg) no-repeat;

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




#menu0-a p{position:absolute;top:-10px;left:4px;width:125px;font-size:17pt}
#menu0-a p .p{position:absolute;top:28px;left:40px;font-size:8pt;}
#menu0-a a{display:block;width:133px;height:114px;color:#eee}
#menu0-a a:hover{color:#ffff00}




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

#menu1{position:relative;width:133px;height:115px;margin-top:1px}
#menu1-a{width:133px;height:115px;background: url(img/yotei.jpg) no-repeat}

#menu1-a p{position:absolute;top:-13px;left:4px;width:125px;font-size:17pt;text-shadow:1px 1px 1px #0000ae,-1px 1px 1px #0000ae,1px -1px 1px #0000ae,-1px -1px 1px #0000ae;}
#menu1-a p b{font-size:10px;vertical-align:5px;margin-left:3px;display:inline-block;transform:skew(8deg,-20deg);}
#menu1-a p .p{position:absolute;top:86px;left:17px;font-size:10px;}
#menu1-a a{display:block;width:133px;height:116px;color:#fff;}
#menu1-a a:hover{color:#ff00ff;}

/*↓点滅*/
#menu1-a a{
animation: blinking 1s ease-in-out infinite alternate;}
@keyframes blinking {
	0% {opacity: 0;}
	30% {opacity: 5;}}
/*↑点滅 0% 0 100% 5 */


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

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



#maizuru{float:left;width:980px;height:34px;margin-bottom:0px;padding-bottom:2px;border-bottom:1px solid #6d6dcf;background:url(icon/copy.gif) no-repeat 15px 11px;overflow:hidden}
#maizuru p{font-size:10px;opacity: 0}
#ht5{float:left;width:980px;height:16px;margin-top:10px;font-size:10px;opacity: 0}



#low-a{float:left;margin-top:7px;padding-top:7px;width:980px;height:40px;overflow:hidden;border-top:1px solid #6d6dcf;border-bottom:1px solid #6d6dcf}
#link{float:left;margin-left:8px;overflow:hidden}
#link ul{list-style-type:none;margin:0;padding:0;width:1056px;height:33px}
#link li{text-indent:-9999px;float:left;width:132px;margin:0;padding:0}
#link a{display:block;width:1056px;height:33px;background:url(icon/link.gif) no-repeat;overflow:hidden}
#men1 a{background-position:0 0}
#men2 a{background-position:-132px 0}
#men3 a{background-position:-264px 0}
#men4 a{background-position:-396px 0}
#men5 a{background-position:-528px 0}
#men6 a{background-position:-660px 0}
#men7 a{background-position:-792px 0}
#men8 a{background-position:-924px 0}

#link a:hover{background:url(icon/link.gif) no-repeat;overflow:hidden}
#men1 a:hover{background-position:0 -33px}
#men2 a:hover{background-position:-132px -33px}
#men3 a:hover{background-position:-264px -33px}
#men4 a:hover{background-position:-396px -33px}
#men5 a:hover{background-position:-528px -33px}
#men6 a:hover{background-position:-660px -33px}
#men7 a:hover{background-position:-792px -33px}
#men8 a:hover{background-position:-924px -33px}



@keyframes blinkAnime{
   0% { color: transparent}
 100% { color: #ccc}
}



