html,body {
height:100%;
color:#333;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; 
}
img {
    max-width: 100%;
    height: auto;
}

html{
      overflow-x: hidden;
      margin : 0 auto ;
 }
 
h1 {
    
}

h2{
    color: #666;
    font-weight: normal;
    font-size: 200%;
    text-align: center;
}


@media only screen and (max-device-width: 800px) {
h1,h2 {
    font-size: 160%;
}
}
@media only screen and (max-width: 800px) {
h1,h2 {
    font-size: 160%;
}
}

header {
   background:  url("../img/header.jpg") no-repeat ;
   height :350px ;
   background-size : cover ;
   margin-top : -30px ;
}

header p {
    color : #fff ;
    font-size : 2.2em ;
   letter-spacing: 2px;
   margin-top : 15px ;
   padding-top : 20px ;
}

h1.head_title {
    position: relative;
    top: 30%;
    left: 60%;
}

.histry{
   background:  url("../img/histry.jpg") no-repeat ;
  height : 600px ;
   background-size : cover ;
}

.histry img{
  margin : 40px 0  0 130px ;
}

.histry_p {
	color : #fff ;
	width : 40% ;
	margin : 50px 0 0  100px ;
	line-height : 1.6em ;
}

.product {
 /* margin : 0 auto ; */
}


.wrapper {
    width: 1000px;
    margin: 0 auto;
}

.product_left {
    float : left ;
    width : 30% ;
    margin-right : 50px ;
     text-align : center ;
}

.product_left p {
   text-align : center ;
}

.product_center {
    float : left ;
    width : 30% ;
    margin-right : 50px ;
     text-align : center ;
}

.product_center p {
   text-align : center ;
}

.product_right {
    float : left ;
    width : 30% ;
}

.product_right p {
   text-align : center ;
}

.lineup {
    /* width: 100%; */
    /* margin-left : 180px; */
    /* margin-bottom : 60px; */
}

.lineup img {
 margin-right : 25px ;
}



.lineupTitle {
       margin-left: 225px;
    padding : 50px ;
}

.products_title {
       margin-left: 225px;
    padding : 50px ;
}


/* 各商品イメージ部分 */


.l_txt p {
    color : #fff ;
    font-size : 3.5em ;
    position : relative ;
    top : 30% ;
    left : 20% ;
}

.r_txt p {
    color : #fff ;
    font-size : 3.5em ;
    position : relative ;
    top : 30% ;
    left : 65% ;
}


.moon_image{
   background:  url("../img/moon_img.jpg") no-repeat ;
   height : 600px ;
   background-size : cover ;
}

.jupiter_image{
   background:  url("../img/jupiter_img.jpg") no-repeat ;
   height : 600px ;
   background-size : cover ;
   margin-top : -60px ;
}
.mercury_image{
   background:  url("../img/mercury_img.jpg") no-repeat ;
  height : 600px ;
   background-size : cover ;
    margin-top : -60px ;
}
.mars_image{
   background:  url("../img/mars_img.jpg") no-repeat ;
   height : 600px ;
   background-size : cover ;
    margin-top : -60px ;
}
.pluto_image{
   background:  url("../img/pluto_img.jpg") no-repeat ;
  height : 600px ;
   background-size : cover ;
    margin-top : -60px ;
}
.uranus_image{
   background:  url("../img/uranus_img.jpg") no-repeat ;
   height : 600px ;
   background-size : cover ;
    margin-top : -60px ;
}

/* 各商品イメージ部分 */



table.lineup td img {
    max-width: 100%;
}
table.lineup {
    width: 90%;
    max-width: 1300px;
    background: #FFF;
    margin: 5em auto;
}
table.lineup caption {
margin-top:
}
table.lineup td {
    width: 15%;
    padding: 2em 10px;
    box-sizing: content-box;
    border-bottom: 1px solid #CCC;
}
table.lineup th {
    width: 10%;
    padding: 2em 10px;
    box-sizing: content-box;
    border-bottom: 1px solid #CCC;
    font-weight: normal;
    text-align: right;
    font-size: 120%;
}
.lineup_name{ text-align: center; font-size: 180%;}
.lineup_color{ text-align: center; }
.lineup_image{ text-align: center;     vertical-align: bottom;}
.lineup_spec1{ text-align: center; }

/* CF */

.cf {
zoom:1;
}

.cf:before,.cf:after {
content:"";
display:table;
}

.cf:after {
clear:both;
}

/* CF */
table.shiyou td {
text-align:center;
border-left:1px solid #CCC;
padding:1.5em 1em;
}

table.shiyou {
font-size:80%;
width:100%;
margin:3em auto;
}

table.shiyou th {
text-align:right;
padding:0 10px 5px;
}

table.shiyou th img {
width:100%;
margin:auto;
}

table.shiyou ul li {
text-align:left;
}

table.shiyou ul {
padding:0;
width: 45%;
margin:auto;
}

.odd-row {
background:#EEE;
}

.m-lineup {
float:left;
width:360px;
}

.cf {
zoom:1;
}

.cf:before,.cf:after {
content:"";
display:table;
}

.cf:after {
clear:both;
}

.m-box2,.m-color {
float:left;
width:275px;
}

.m-box-img,.m-box2-img,.m-lineup-img,.m-color-img {
padding:0 5px;
}

.m-box-img img,.m-box2-img img,.m-lineup-img img,.m-color-img img {
width:100%;
}

p.m-lineup-txt,p.m-color-txt {
text-align:center;
margin:0;
padding:0 5px 1.5em;
}

p.caution {
    font-size: 85%;
    text-align: right;
}

.p20{ width: 15%; }
.p40{ width: 42%; }

footer {
    background: #eee;
}



/*オンマウスで拡大*/

a.thumnail {
    display: block;
    float: left;
    overflow: hidden;
    width: 25%;
}
 
img {
    height: auto;
    -webkit-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
    /*width: 100%; */
    vertical-align: bottom;
}
 
figure {
    margin: 0;
    overflow: hidden;
    position: relative;
    text-align: center;
    width : 165px ;
    height : 230px ;
    float : left ;
}
figure img {
    margin: 0;
    overflow: hidden;
    position: relative;
    top : 40px ;
    left : 10px ;
    text-align: center;
    width : 150px ;

   
}
 
figcaption {
   /* background-color: rgba(0,0,0,0.6); */
    color: #FFF;
    opacity: 0;
    font-size: 16px;
    font-size: 1.4rem;
    font-weight : bold ;
    position: absolute;
    text-align: center;
    -webkit-transition:all 0.25s ease-in-out;
        transition:all 0.25s ease-in-out;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding-top: 25%;
}
 
a:hover>figure img {
        transform: scale(1.15,1.15);
        -webkit-transform:scale(1.15,1.15);
        -moz-transform:scale(1.15,1.15);
        -ms-transform:scale(1.15,1.15);
        -o-transform:scale(1.15,1.15);
}
 
a:hover>figure figcaption {
    opacity: 1;
}

a:hover figure {
    opacity: 1;
}



figure {
    margin: 0;
    overflow: hidden;
    position: relative;
    text-align: center;
}

figcaption {
        //省略
    position: absolute;
    text-align: center;
    top: 15%;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}


p.setsumei {
    font-size: 1.2em;
    width: 400px;
}