html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
    background: repeat scroll 0 0 ;
	background-image: url(../image/bg.jpg);
	  font-family: 'Lato',"YakuHanJP","游ゴシック",YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  font-feature-settings : "palt";
    font-size: 11px;
	letter-spacing: 0.1em;
}
@media all and (-ms-high-contrast:none) {
	body {
		font-family: 'Lato',"YakuHanJP","メイリオ",Meiryo,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
		  font-feature-settings : "palt";
	}
}
body.section{
}

a:link {
    color: #00abde;
    text-decoration: none;
	transition: .5s;
}
a:visited {
    color: #00abde;
    text-decoration: none;
	transition: .5s;
}
a:hover {
    color: #000000;
    text-decoration: none;
	transition: .5s;
}

a:active {
    color: #00abde;
    text-decoration: none;
	transition: .5s;
}

a img {
    border: none;
}


#content {
    height: 100%;
    margin: 0 40px 0 40px;
}

.container {
	padding: 30px 40px 0 0;
}

#img-container footer {
	line-height: 13px;
    margin: 0 0 40px 0;
	padding: 10px 0 0 0;
	letter-spacing: 0.1em;
	font-size: 9px;
	color: #808080;
}
#d-image {    
    display: none;
}
#d-image img {
    border: medium none;
}
.grow {
    float: left;
    left: -10px;
    position: relative;
}
.thumb {
    display: table;
    height: 240px;
    overflow: hidden;
    padding: 0;
    text-align: left;
    width: 240px;
}
.grow strong {
    display: none;
    font-weight: normal;
    margin-top: 3px;
    text-align: center;
}
.grow em {
    display: none;
    font-style: normal;
    text-align: center;
}
.thumb-it {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.thumb-img {
    display: block;
	margin: 10px 10px 10px 10px;
    width: 240px;
	height: 240px;
}
.t43 {
    margin-top: 43px;
}
.b40 {
    margin:0 0 40px 0;
}
.b10 {
    margin:0 0 10px 0;
}
.col-1-4{
  width: 25%; 
  padding: 10px;
}

.show{
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: pointer;
  display: block;
}

.show .mask{
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
}

.show-third p{
  font-size: 11px; 
  color: #ffffff;
}

.show-third .mask {
  opacity: 0;
  background-color: rgba(0,171,222, 0.7);
  transition: all 0.4s ease-in-out;
}

.show-third h2 {
  font-size: 14px; 
  color: #ffffff;
  margin-top: 40%;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  text-shadow:0px 0px 4px #074e63;
}

.show-third p {  
  margin-top: 5%;
  opacity: 0;
  transition: all 0.2s linear;
  text-shadow:0px 0px 4px #074e63;
}

.show-third img{
  transition: all 0.2s ease-in-out;
}

.show-third:hover img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%);
}

.show-third:hover .mask {
  opacity: 1;
}
.show-third:hover h2,
.show-third:hover p,
.show-third:hover a.info {
  opacity: 1;
}
.show-third:hover p {
  transition-delay: 0.3s;
}
.show-third:hover a.info {
  transition-delay: 0.5s;
}

.mainColumn {
    float: left; 
    margin: 40px 80px 20px 0;
    width: 255px;
}
@media only screen and (max-width:640px) {
  .mainColumn {
	float: left; 
    margin: 60px 80px 20px 0;
    width: 100%;
  }
}

.subColumn {
    float: left;
    margin: 40px 0 40px 0;
    max-width: 640px;
}

.subColumn img {
	width: 100%;
    margin: 0 0 160px 0;
}
.subColumn video {
    margin: 0 0 160px 0;
}
.prev {
	float:left;
    margin: 20px 0 40px 0;
	}
.next {
	float:right;
	margin: 20px 0 40px 0;
}
.dateSection dt {
	font-size: 9px;
    margin: 0 0 5px;
}
.dateSection dd {
    font-size: 13px;
	letter-spacing: 0.08em;
    margin: 0 0 15px;
	line-height: 1.4;
}

.launchSection dt {
	font-size: 9px;
    height: 8px;
    margin: 0 0 5px;
}
.launchSection dd {
    font-size: 13px;
	letter-spacing: 0.08em;
	margin: 0 0 30px 0;
	line-height: 1.4;
}
.noteSection dt {
	font-size: 9px;
    height: 8px;
    margin: 0 0 5px;
}
.noteSection dd {
    font-size: 13px;
	letter-spacing: 0.08em;
    line-height: 1.8;
    margin: 0 0 15px;
	text-align:justify;
}
.dd dir {
 background-color: #99cc00;
}
#back-top {
  position: fixed;  
    right: 26px;  
    bottom: 26px;  
}
#back-top a {
    width: 10px;
    height: 10px;
    display: block;
	font-size: 20px;
    text-align: center;
    text-decoration: none;
    color: #00abde;
}
#back-top a:hover {
    color: #7fd5ee;
}

.mr40 { margin-right:40px;}
.mr20 { margin-right:20px;}

.mainabout {
    float: left;
    margin: 40px 80px 0 0;
    width: 255px;
	height:680px;
	position:relative;
}
@media only screen and (max-width:640px) {
.mainabout  {
    float: left;
    margin: 40px 40px 0 0;
    width: 104%;
	height:480px;
	position:relative;
  }
}
.aboutSection {
	position:absolute;
	bottom:0;
	width: 100%;
}
.aboutSection dt {
    font-size: 9px;
    margin: 0 0 4px;
}
.aboutSection dd {
	font-size: 11px;
    margin: 0 0 20px 0;
}
.aboutSection p {
	font-size: 11px;
	line-height: 1.8;
	text-align: justify;
}
.photoabout {
    float: left;
    margin: 40px 0 40px 0;
    width: 540px;
	height:680px;
	position:relative;
}

.photoabout img {
   position:absolute;
	bottom:0;
}
.aboutlogo {
	position:relative;
	}
.aboutlogo img {
   z-index:2;
   position:absolute;
   top:122px; left:254px
}
.iharaklogo {
	position:relative;
	}
.iharaklogo img {
   z-index:2;
   position:absolute;
   top:222px; left:251px
}
#bg-top {
  position: fixed;  
  left: 0px; 
  top: 0px;
  z-index:-2;
}
#bg-bottom {
  position: fixed;  
    right: 0px;  
    bottom: -1px;  
    z-index:-2;
}
.menu {
  position: fixed;  
  top:40px;
  font-size: 14px;
}
.r25{
margin-right: 25px;
}
.r10{
margin-right: 10px;
}
@media only screen and (max-width:640px) {
.menu {
  position: fixed;  
  top:40px;
  font-size: 28px;
}
}