@charset "utf-8";

/*
 *
 * Usage: Top layout
 *
 * Name: top.css
 *
 */



/*---------------------------------------------------------------------
Top layout
---------------------------------------------------------------------*/
/* common */
.img img {width:100%; max-height:100%; vertical-align:bottom;}

.title {text-align:center;}
  .title a    {display:block; text-decoration:none;}
  .title span {display:block;}
  .title .en {
    background:url(../images/common/line_solid-y.gif) no-repeat 50% 100%;
    padding-bottom:55px; margin-bottom:15px; font-size:28px; font-style:italic;
  }
  .title .jp {font-size:16px;}
  
  .title a:hover {color:#fff; background-color:#2e3132;}
  .title a:hover .en {background:url(../images/common/line_solid-y2.gif) no-repeat 50% 100%;}


.box {display:table; width:100%;}
.b_left,
.b_right {width:50%; display:table-cell; vertical-align:top; position:relative; min-width:500px;}


/* main */
#main {position:relative;}
  #main h2 {position:absolute; top:-135px; right:75px;}


/* about */
#about .title a {position:absolute; top:0; left:0; right:0; bottom:0; padding-top:19%;}
#about .b_left .img {position:absolute; bottom:0; width:100%;}


/* product */
#product {display:table; width:100%;}
  #product li {display:table-cell; width:33.3%; position:relative;}
  #product li:nth-child(1) {background:url(../images/top/img_scenery.jpg) no-repeat 0 0 /100% auto;}
  #product li:nth-child(2) {background:url(../images/top/img_sight.jpg) no-repeat 0 0 /100% auto;}
  #product li:nth-child(3) {background:url(../images/top/img_view.jpg) no-repeat 0 0 /100% auto;}
  
  #product a  {display:block;}
  #product .title {
    background:url(../images/common/line_solid-x.gif) no-repeat 50% 100%;
    position:absolute; top:60px; left:0; display:block; padding-bottom:25px;
    width:100%; font-size:28px; color:#fff; font-style:italic; z-index:2;
  }
  #product .btn {
    transition:all 0.4s ease-in;
    transform:translate(-50%,0);
    width:180px; height:40px; line-height:40px; font-size:16px; color:#fff; z-index:2;
    position:absolute; bottom:70px; left:50%; border:1px solid #fff; text-align:center;
  }
  #product a:after {
    transition:all 0.4s ease-in-out;
    background-color:rgba(0,0,0,0.5);
    content:''; display:block; width:100%; height:100%;
    position:absolute; top:0; left:0; z-index:1; opacity:0;
  }
  
  #product  a:hover:after,
  #product  a:hover img {opacity:1;}
  #product  a:hover .btn {background-color:#fff; color:#000;}

/* space */
#space .b_left .title {display:none;}
#space .title {position:absolute; top:0; left:0; right:0; bottom:0; padding-top:67%;}
#space .title a {position:absolute; top:0; left:0; right:0; bottom:0; padding-top:67%;}
#space .b_right .img {position:absolute; top:0; width:100%; z-index:2;}


/* journal */
#journal {background-color:#f2f2f2; padding:100px 82px;}
  #journal .title {margin-bottom:60px;}
  #journal ul {display:table; width:100%;}
  #journal li {display:table-cell; padding:0 18px; vertical-align:top; width:30%;}
    #journal li a {background-color:#fff; display:block; padding-bottom:24px; text-decoration:none;}
    
    #journal li .img {margin-bottom:40px; display:block;}
      #journal li .img img {height:auto !important;}
    #journal li .txt {margin-bottom:10px; padding:0 24px; display:block;}
    #journal li .date {padding:0 24px; display:block; color:#999;}


/* store */
#store {position:relative;}
  #store .title {
    transform:translate(-50%,-50%);
    position:absolute; top:50%; left:50%;
  }



/*---------------------------------------------------------------------
SP Top layout
---------------------------------------------------------------------*/
.sp #globalH nav {display:none;}
.sp #globalF {padding:65px 0 20px 0;}
.sp #wrapper {padding-top:70px;}

.sp .box {display:table; width:100%;}
.sp .b_left,
.sp .b_right {width:100%; display:block; vertical-align:top; position:relative; min-width:100%;}

.sp .title a {padding:40px 0;}
.sp .title .en {
  background-size:auto 23px;
  padding-bottom:30px; margin-bottom:15px; font-size:16px; font-style:italic;
}
.sp .title .jp {font-size:12px;}


/* main */
.sp #main {position:relative; overflow:hidden;}
  .sp #main .img img {width:180%; margin-left:-40%;}
  .sp #main h2 {position:absolute; top:0; right:30px;}
  .sp #main h2 img {width:55px;}


/* about */
.sp #about .title a {position:relative;}
.sp #about .b_left .img {position:relative; bottom:0; width:100%;}
.sp #about .b_right {display:none;}


/* product */
.sp #product {display:block; width:100%;}
  .sp #product li {display:block; width:100%; position:relative;}
  .sp #product .title {
    background-size:20px auto;
    top:20px; display:block; padding-bottom:10px; font-size:14px;
  }
  .sp #product .btn {
    width:100px; height:20px; line-height:20px; font-size:10px; bottom:20px;
  }
  .sp #product a:after {
    transition:all 0.4s ease-in-out;
    background-color:rgba(0,0,0,0.5);
    content:''; display:block; width:100%; height:100%;
    position:absolute; top:0; left:0; z-index:1; opacity:0;
  }
  
	/* 202010-修正 */
  .sp #product .img {
/*	  height:360px;*/
	  height: 100vw;
}
  .sp #product .img img {display:none;}
  .sp #product #item1 {
	  background:url(../images/top/img_scenery_sp_3.jpg) no-repeat center;
/*	  background-size:320px auto;*/
}
  .sp #product #item2 {
	  background:url(../images/top/img_sight_sp_2.jpg) no-repeat center;
/*	  background-size:320px auto;*/
}
  .sp #product #item3 {
	  background:url(../images/top/img_vision_sp_2.jpg) no-repeat center;
/*	  background-size:320px auto;*/
}
.sp #product #item1, .sp #product #item2, .sp #product #item3 {
	background-size: cover;
}
  
  .sp #product  a:hover:after,
  .sp #product  a:hover img {opacity:1;}

/* space */
.sp #space .b_left .title {display:block; position:relative; padding:80px 0;}
.sp #space .title a {padding-top:40px;}
.sp #space .b_right {display:none;}


/* journal */
.sp #journal {background-color:#f2f2f2; padding:40px 25px;}
  .sp #journal .title {margin-bottom:40px;}
  .sp #journal ul {display:block; width:100%;}
  .sp #journal li {display:block; padding:0; margin-bottom:17px; width:100%;}
    .sp #journal li a {background-color:#fff; display:block; padding-bottom:15px; text-decoration:none;}
    
    .sp #journal li .img {margin-bottom:20px; display:block;}
    .sp #journal li .txt {margin-bottom:5px; padding:0 10px; font-size:12px;}
    .sp #journal li .date {padding:0 10px; font-size:10px;}


/* store */
.sp #store {position:relative;}
  .sp #store .title {
    transform:translate(-50%,-50%);
    position:absolute; top:50%; left:50%;
  }