@charset "shift_jis";

#otona_wrap {
	background:url(20140703_otona_bg.jpg) #000 repeat;
	width:100%;
	color:#FFF;
	line-height:1.6;
	clear:both;
}
#otona_head {
	padding:20px 0;
	text-align:center;
	width:900px;
	margin:0 auto;
}

/*itioshi*/
#otona_itioshi {
	width:900px;
	margin:0 auto 30px auto;
	text-align:center;
	padding:10px 0 30px 0;
	font-size:15px;
	background:url(20140703_otona_boxbg.jpg) repeat-y top center;
	clear:both;
}
#otona_itioshi ul {
	width:900px;
	margin: 20px 20px 0 40px;
	text-align:center;
}
#otona_itioshi ul li {
	float:left;
	width:250px;
	list-style:none;
}
.mrl {
	margin:0 35px 0 0px;
}
.mrr {
	margin:0 0px 0 35px;
}
.otona_txt01 {
	clear:both;
	text-align:left;
	padding: 20px 40px 20px 40px;
	line-height:1.3;
}
.otona_txt01 img {
	float:left;
}

.otona_btn {
	float:right;
}





#otona_copyright {
	width:900px;
	margin:15px auto;
	text-align:center;
	padding-bottom:15px;
}


#otona_kanren {
	width:900px;
	margin:0 auto 50px auto;
	text-align:center;
	padding:15px 0 40px 0;
	font-size:12px;
	clear:both;
	background:url(20140703_otona_boxbg.jpg) repeat-y top center;
}

#otona_kanren:after {
	content: "";
	display: block;
	clear: both;
}


.otona_box01 {
	margin:20px auto 0 auto;
}

.otona_box02 {
	margin:40px auto 0 auto;
}

.otona_box01:after {
	content: "";
	display: block;
	clear: both;
}


.otona_kanren_box {
	float:left;
	margin-left:40px;
}
.otona_kanren_box_txt {
	width:346px;
	text-align:left;
	float:right;
	margin-right:40px;
}
.otona_kanren_box_txt p {
	padding:10px 5px;
}

#otona_gensen {
	width:900px;
	margin:0px auto 30px auto;
	text-align:center;
	padding:15px 0 15px 0;
	background:url(20140703_otona_boxbg.jpg) repeat-y top center;
}
#otona_gensen a {
	text-decoration:underline;
	color:#ffedb8;
}
#otona_gensen a:hover {
	text-decoration:none;
}
#otona_gensen table {
	width:820px;
	margin:20px auto;
	text-align:left;

}
#otona_gensen table tr td {
	margin-bottom:30px;	
	vertical-align:top;
}
.w250 {
	width:250px;
	padding-bottom:30px;
}

.view {
   width: 248px;
   height: 248px;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   border:#ffe594 1px solid;
}
.view .mask,.view .content {
   width: 250px;
   height: 250px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}

.view-fifth img {
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-fifth .mask {
   background-color: rgba(146,96,91,0.3);
   -webkit-transform: translateY(250px);
   -moz-transform: translateY(250px);
   -o-transform: translateY(250px);
   -ms-transform: translateY(250px);
   transform: translateY(250px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.view-fifth:hover .mask {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-fifth:hover .t01 {
   -webkit-transform: translateY(-250px);
   -moz-transform: translateY(-250px);
   -o-transform: translateY(-250px);
   -ms-transform: translateY(-250px);
   transform: translateY(-250px);
}
.view-fifth:hover p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.otona_meilmaga {
	text-align:center;
	background:url(20140703_otona_bnrbg.jpg);
	width:819px;
	height:70px;
	margin:0 auto;
	font-size:18px;
	padding:20px 0;
}
.otona_meilmaga a:hover {
	opacity:0.9;
}


.image_shinebtn {
	float:right;
}
.image_shinebtn a:hover {
	opacity: 0.9;
}


/*20140808 up date*/
.iconbtn {
  display: block;
  width: 151px;
  height: 30px;
  background:url(20140703_otona_btn.png);
  position: relative;
  overflow: hidden;
}


/* "shine" element */
/* Could be a pseudo element but they lack support for CSS transitions in some browsers */

.icon-effect {
  position: absolute;
  top: -110%;
  left: -210%;
  width: 200%;
  height: 200%;

  opacity: 0;
  
  background: rgba(255, 255, 255, 0.2);
  background: -moz-linear-gradient(
    left,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.1) 75%,
    rgba(255, 255, 255, 0.5) 90%,
    rgba(255, 255, 255, 0.0) 100%
  );
  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.1) 75%,
    rgba(255, 255, 255, 0.5) 90%,
    rgba(255, 255, 255, 0.0) 100%
  );
  background: -webkit-gradient(
    linear, left top, right top,
    color-stop(0%  ,rgba(255, 255, 255, 0.2)),
    color-stop(75% ,rgba(255, 255, 255, 0.2)),
    color-stop(90% ,rgba(255, 255, 255, 0.8)),
    color-stop(100%,rgba(255, 255, 255, 0.0))
  );
  background: -o-linear-gradient(
    top,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.1) 75%,
    rgba(255, 255, 255, 0.5) 90%,
    rgba(255, 255, 255, 0.0) 100%
  );
  background: -ms-linear-gradient(
    top,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.1) 75%,
    rgba(255, 255, 255, 0.5) 90%,
    rgba(255, 255, 255, 0.0) 100%
  );
  background: linear-gradient(
    top,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.1) 75%,
    rgba(255, 255, 255, 0.5) 90%,
    rgba(255, 255, 255, 0.0) 100%
  );

  -webkit-transform: rotate(15deg);
     -moz-transform: rotate(15deg);
      -ms-transform: rotate(15deg);
       -o-transform: rotate(15deg);
          transform: rotate(15deg);
    
  -webkit-transition-property: left, top, opacity;
     -moz-transition-property: left, top, opacity;
      -ms-transition-property: left, top, opacity;
       -o-transition-property: left, top, opacity;
          transition-property: left, top, opacity;
  -webkit-transition-duration: 0.5s, 0.5s, 0.1s;
     -moz-transition-duration: 0.5s, 0.5s, 0.1s;
      -ms-transition-duration: 0.5s, 0.5s, 0.1s;
       -o-transition-duration: 0.5s, 0.5s, 0.1s;
          transition-duration: 0.5s, 0.5s, 0.1s;
  -webkit-transition-timing-function: ease;
     -moz-transition-timing-function: ease;
      -ms-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
}




/* Hover state - trigger effect */

.icon01:hover .icon-effect {
  opacity: 1;
  top: -35%;
  left: -35%;
}

/* Active state */

.icon01:active .icon-effect {
  opacity: 0;
}
/* Hover state - trigger effect */

.icon02:hover .icon-effect {
  opacity: 1;
  top: -35%;
  left: -35%;
}

/* Active state */

.icon02:active .icon-effect {
  opacity: 0;
}
/* Hover state - trigger effect */

.icon03:hover .icon-effect {
  opacity: 1;
  top: -35%;
  left: -35%;
}

/* Active state */

.icon03:active .icon-effect {
  opacity: 0;
}
/* Hover state - trigger effect */

.icon04:hover .icon-effect {
  opacity: 1;
  top: -40%;
  left: -35%;
}

/* Active state */

.icon04:active .icon-effect {
  opacity: 0;
}
/* Hover state - trigger effect */

.icon05:hover .icon-effect {
  opacity: 1;
  top: -40%;
  left: -35%;
}

/* Active state */

.icon05:active .icon-effect {
  opacity: 0;
}

/* Hover state - trigger effect */

.iconbtn:hover .icon-effect {
  opacity: 1;
  top: -40%;
  left: -35%;
}

/* Active state */

.iconbtn:active .icon-effect {
  opacity: 0;
}