#header {
  height: 85px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

#content{
  padding-top: 150px;
}


img.vtab { vertical-align: baseline; }
img.vtat { vertical-align: top; }
img.vtam { vertical-align: middle; }
img.vtab { vertical-align: bottom; }

/* Main __________________________________ */

html { scroll-behavior: smooth;}

body {
	background-color: #ffffff ; 
	margin: 0px 0px 0px 0px;
	padding: 0px;
	font-size:10pt ;
	line-height:150% ;
	color:#555555 ;
	animation: fadeIn 2s ease 0s 1 normal;
   	-webkit-animation: fadeIn 2s ease 0s 1 normal;
}

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

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}

}

tr,td,th {
	text-align:left;
	font-size:10pt ;
	line-height:150% ;
	color:#555555 ;
}

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

a:hover {
	color:#111111;
}

.toplogo {
	height: 85px;
	width: 100%;
	background-color: #ffffff ; 
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.topmenu {
	height: 50px;
	width: 100%;
	background-color: #ffffff ; 
	background-repeat: no-repeat;
	background-image: url(../img/menubk.jpg);
	background-position: center top ;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.topnews {
	width: 1000px ;
	background-color: #ffffff ; 
	border: dashed 1px #9999aa ; 
	border-radius: 6px;
	padding: 5px 5px 5px 5px ;
	margin: 0px 0px 0px 0px;
}

.topshop {
	width: 100%;
	background-color: #eeeeee ; 
	margin: 0px 0px 0px 0px;
	padding: 20px 0px 20px 0px ;
}


.topmai {
	width: 100%;
	background-image: url(../img/topmabk.jpg);
	background-position: center top ;
	margin: 0px 0px 0px 0px;
	padding: 20px 0px 40px 0px ;
}

.topphoto {
	width: 100%;
	background-image: url(../img/topmabk.jpg);
	background-position: center top ;
	margin: 0px 0px 0px 0px;
	padding: 20px 0px 20px 0px ;
}

.topred {
	width:800px ;
	background-color: #fff5f5 ;
	border: solid 1px #ffcccc ; 
	border-radius: 8px;
	padding: 10px;
	margin: 10px;
	font-size:11pt ;
	text-align:center;
	line-height:200% ;
	color:#000000 ;
}


.netitle {
	margin: 0px 0px 0px 0px;
	padding: 10px 0px 15px 0px ;
	font-size:13pt ;
	text-align:center;
	color:#000000 ;

}

.enda {
	width: 100%;
	height: 280px;
	background-image: url(../img/topmabk.jpg);
	background-position: center top ;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	text-align:center;
	line-height:240% ;
	color:#333333 ;
	position:center;
}

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

.enda a:hover {
	color:#333333;
}


h1 {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	font-size:9pt ;
	line-height:150% ;
	font-weight:normal;
	color:#aaaaaa ;
	text-align:right;
}

h2 {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	font-size:9pt ;
	line-height:240% ;
	font-weight:normal;
	color:#333333 ;
	text-align:center;
}


/* Submit __________________________________ */


.subred {
	background-color: #ffeeee ; 
	border: solid 1px #ff6666 ; 
	border-radius: 10px;
	padding: 10px;
	margin: 10px;
	font-size:10pt ;
	color:#ff6666;
}

.subblu {
	background-color: #f4f4ff ; 
	border: solid 1px #112255 ;
	border-radius: 10px;
	padding: 10px;
	margin: 10px;
	font-size:10pt ;
	color:#002299;
}

.subgre {
	background-color: #f4fffa ; 
	border: solid 1px #d4eedd ;
	border-radius: 10px;
	padding: 10px;
	margin: 10px;
	font-size:10pt ;
	color:#009933;
}

.subc {
	background-color: #eeeeee ; 
	border: solid 1px #999999 ;
	border-radius: 4px;
	padding: 6px 30px 6px 30px;
	margin: 6px;
	font-size:10pt ;
	color:#000000;
}


/* Pagetop __________________________________ */

.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 15px;
}

.pagetop a {
    display: block;
    background-color: #ccc;
    text-align: center;
    color: #333333;
    font-size: 12px;
    text-decoration: none;
    padding: 10px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
border:solid 1px #aaaacc; 
border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
}

.pagetop a:hover {
    display: block;
    background-color: #ccccee;
    text-align: center;
    color: #000000;
    font-size: 12px;
    text-decoration: none;
    padding: 10px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
border:solid 1px #aaaacc; 
border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
}


/* Img Transition __________________________________ */

.simg_wrap{
  width: 140px;
  height: 140px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
}

.simg_wrap img{
  width: 100%;
  cursor: pointer;
  transition-duration: 0.5s;
}

.simg_wrap img:hover{
  transform: rotate(340deg);
  transition-duration: 0.5s;
}


/* Img Transition Gray __________________________________ */

img.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

img.gray:hover {
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);
filter: grayscale(0);
}


/* タイトル用 __________________________________ */

.toptwk {
	width: 1000px ;
	background-color: #222222 ;
	border: solid 3px #666666 ; 
	border-radius: 6px;
	padding: 5px 5px 5px 5px ;
	margin: 10px;
	font-size:11pt ;
	text-align: center;
	color:#ffffff ;
}

.toptbl {
	width: 1000px ;
	background-color: #999999 ;
	border: solid 1px #777777 ; 
	border-radius: 6px;
	padding: 5px 5px 5px 5px ;
	margin: 10px;
	font-size:11pt ;
	text-align: center;
	color:#ffffff ;
}

.toptgr {
	width: 1000px ;
	background-color: #115522 ;
	border: solid 1px #003311 ; 
	border-radius: 4px;
	padding: 5px 5px 5px 5px ;
	margin: 10px;
	font-size:11pt ;
	text-align: center;
	color:#ffffff ;
}

.toptor {
	width: 1000px ;
	background-color: #ee8800 ;
	border: solid 1px #ee8800 ; 
	border-radius: 4px;
	padding: 5px 5px 5px 5px ;
	margin: 10px;
	font-size:11pt ;
	text-align: center;
	color:#ffffff ;
}

.toptpi {
	width: 1000px ;
	background-color: #dd4477 ;
	border: solid 1px #dd4477 ; 
	border-radius: 4px;
	padding: 5px 5px 5px 5px ;
	margin: 10px;
	font-size:11pt ;
	text-align: center;
	color:#ffffff ;
}

.topmwk {
	width: 300px ;
	background-color: #f5f5ff ;
	border: dashed 1px #334499 ; 
	border-radius: 12px;
	padding: 20px 10px 20px 10px ;
	margin: 10px;
	font-size:12pt ;
	text-align: center;
	color:#000000 ;
}

/* 下層ページ用 __________________________________ */

.infobk{
	width:100% ;
	background-image: url(../img/infobk.jpg);
	background-position: center top ;
	background-repeat:no-repeat,no-repeat;
	margin: 0px;
	padding: 30px 0px 30px 0px;
	text-align: center;
	font-size:13pt ;
	color:#000000 ;
}




/* NextPage Table 青セット __________________________________  */

.thbkwh { 
	background-color: #ffffff ;
	border: dashed 1px #0033ff ;
	margin: 8px;
	padding: 8px;
	text-align: center;
}

.thbkbl { 
	background-color: #def0f5 ;
	border: dashed 1px #99ccff ;
	margin: 2px;
	padding: 8px;
	vertical-align: middle;
	text-align: center;
}

.tdbkbl { 
	background-color: #ffffff ;
	border: dashed 1px #99ccff ;
	margin: 2px;
	padding: 8px;
}

/* NextPage Table 青緑セット __________________________________  */

.thbkwgb { 
	background-color: #ffffff ;
	border: dashed 1px #0055cc ;
	margin: 8px;
	padding: 8px;
	text-align: center;
}

.thbkgb { 
	background-color: #ddf6ef ;
	border: dashed 1px #99ccff ;
	margin: 2px;
	padding: 8px;
	vertical-align: middle;
	text-align: center;
}

.tdbkgb { 
	background-color: #f1feff ;
	border: dashed 1px #99ccff ;
	margin: 2px;
	padding: 8px;
}

/* Shop Photo Table用 __________________________________  */

.topgbr { 
	background-color: #eeeeee ;
	margin: 4px 4px 4px 4px;
	padding: 12px 4px 1px 4px;
}

.topgbc { 
	background-color: #ffffff ;
	margin: 1px 8px 8px 8px;
	padding: 4px;
}

.spthmenu { 
	width: 150px ;
	background-color: #f0f0f0 ;
	border: solid 1px #cccccc ;
	border-radius: 6px;
	margin: 4px 4px 4px 4px;
	padding: 4px 4px 1px 4px;
	vertical-align: middle;
	text-align: center;

}


/* Anim-box __________________________________  */

.anim-box.kiran {
  opacity: 1;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.anim-box.kiran::before {
  background-color: #fff;
  content: "";
  display: block;
  position: absolute;
  top: -100px;
  left: 0;
  width: 30px;
  height: 100%;
  opacity: 0;
  transition: cubic-bezier(0.32, 0, 0.67, 0);
}
.anim-box.kiran:hover::before {
  animation: kiran 0.9s linear 1;
}
 
@keyframes kiran {
  0% {
    transform: scale(2) rotate(45deg);
    opacity: 0;
  }
  20% {
    transform: scale(20) rotate(45deg);
    opacity: 0.6;
  }
  40% {
    transform: scale(30) rotate(45deg);
    opacity: 0.4;
  }
  80% {
    transform: scale(45) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

/* Anim-box 2 */
.anim-box.bkiran {
  opacity: 1;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.anim-box.bkiran::before {
  background-color: #eeeeee;
  content: "";
  display: block;
  position: absolute;
  top: -100px;
  left: 0;
  width: 30px;
  height: 100%;
  opacity: 0;
  transition: cubic-bezier(0.32, 0, 0.67, 0);
}
.anim-box.bkiran:hover::before {
  animation: kiran 0.9s linear 1;
}
 
@keyframes bkiran {
  0% {
    transform: scale(2) rotate(45deg);
    opacity: 0;
  }
  20% {
    transform: scale(20) rotate(45deg);
    opacity: 0.6;
  }
  40% {
    transform: scale(30) rotate(45deg);
    opacity: 0.4;
  }
  80% {
    transform: scale(45) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}