@charset "UTF-8";


@import url("base.css");
@import url("print.css");

body{ background:#fff;}
.pc{ display:block}
.sp{ display:none}

/* HEADER
 * --------------------------------------- */
#header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 30;
background:url(../images/header_bg.png) repeat-x bottom left;
height:80px;
text-align: center;
}

h1{ padding:14px 0}



#menu_shoplist{ padding-right:28px; text-align:right; margin-top:-46px;height:36px}
#menu_shoplist img{ width:auto; height:36px}
#menu_shoplist a{ padding-left:10px}
/* FooterMenu
 * --------------------------------------- */
 #nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height:58px;
background: url(../images/nav_bg.png) repeat-x;
/*opacity: .9;*/
color:#FFF; 

text-align:center;
z-index: 30; 
}
#flogo{ position:absolute; bottom:14px; left:23px;}
#flogo img{width:auto; height:16px}
#menu{float:right; margin-right:23px}
#menu li{float:left; padding-top:23px;}
#menu li img{ width:auto; height:20px}
#menu li.active{
filter: alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}
#menu li.active a:hover{
filter: alpha(opacity=60);
-moz-opacity:0.6;
opacity:0.6;
}
#menu li:hover{
filter: alpha(opacity=80);
-moz-opacity:0.8;
opacity:0.8;
}

#menu li a,
#menu li.active a{
display:block;
}

/* TopSections
 * --------------------------------------- */
 
 #toppage{ 
 background-image: url(../images/concept1_bg.png);
background-position:top center;
background-repeat:no-repeat;
background-size: cover; position:relative}



 #section0,
 #section1,
 #section2,
 #section3{
background-size: cover;
 }
 
 
 #section0{
background-image: url(../images/bg-top.png);
background-position:top center;
background-repeat:no-repeat;
background-size: cover;
 }
  #section0 h3{ background:#FFFFFF; padding:30px 28px 0px; width:100%; text-align:right; position:absolute;left:0; bottom:0px; height:180px;-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box; }
  		#section0 h3 img{ width:55%; height:auto}
		h2{ width:27%;
		position:absolute;
		left: 8%;
		bottom:50px;
		z-index: 30;
		opacity:0
		}
		h2 img{ width:100%; height:auto;}


#section1,#section2,#section3{position: relative;overflow: hidden;  text-indent: 100%;  white-space: nowrap;}
#section1 #bg1{background:url(../images/white.png) repeat; width:100%; height:100%; opacity:0 }
#section1 #bg1 p{opacity:0; background:url("../images/concept1_p1_2024.png") no-repeat center center; background-size:auto 70%;width:100%; height:100%; }

#section2 #bg1,#section3 #bg1{background:url(../images/white.png) repeat; width:100%; height:100%; }
#section2 #bg1 p{ background:url(../images/concept1_p2.png) no-repeat center center; background-size:auto 70%;width:100%; height:100%; }
#section3 #bg1 p{ background:url(../images/concept1_p3_withtax2024.png) no-repeat center center; background-size:auto 70%;width:100%; height:100%; }

#section1 a{ display:block; width:150px; height:80px; position:absolute; left:35%; bottom:20%;}

/* lineup
 * --------------------------------------- */
#lineup{/*font-family: 'Roboto Condensed', sans-serif; */font-family: 'Open Sans Condensed', sans-serif;color:#221714; position:relative; height:100%}

#item1{
background-image: url(../lineup/images/bg_item.png);
background-position:center right;
background-repeat:no-repeat;
background-size: 100% auto;
margin:0 60px;
height:100%;
position: relative;
text-align:left;
}

#item2{
background-image: url(../lineup/images/bg_item2.png);
background-position:center right;
background-repeat:no-repeat;
background-size: 100% auto;
margin:0 60px;
height:100%;
position: relative;
text-align:left;
}

#item3{
background-image: url(../lineup/images/bg_item3.png);
background-position:center right;
background-repeat:no-repeat;
background-size: 100% auto;
margin:0 60px;
height:100%;
position: relative;
text-align:left;
}
#item4{
background-image: url(../lineup/images/bg_item4.png);
background-position:center right;
background-repeat:no-repeat;
background-size: 100% auto;
margin:0 60px;
height:100%;
position: relative;
text-align:left;
}
#item5{
background-image: url(../lineup/images/bg_item5.png);
background-position:center right;
background-repeat:no-repeat;
background-size: 100% auto;
margin:0 60px;
height:100%;
position: relative;
text-align:left;
}
#item6{
background-image: url(../lineup/images/bg_item6.png);
background-position:center right;
background-repeat:no-repeat;
background-size: 100% auto;
margin:0 60px;
height:100%;
position: relative;
text-align:left;
}
#item7{
background-image: url(../lineup/images/bg_item7.png);
background-position:center right;
background-repeat:no-repeat;
background-size: 100% auto;
margin:0 60px;
height:100%;
position: relative;
text-align:left;
}
#item8{
background-image: url(../lineup/images/bg_item8.png);
background-position:center right;
background-repeat:no-repeat;
background-size: 100% auto;
margin:0 60px;
height:100%;
position: relative;
text-align:left;
}

#item9{
background-image: url(../lineup/images/bg_item9.png);
background-position:center right;
background-repeat:no-repeat;
background-size: 100% auto;
margin:0 60px;
height:100%;
position: relative;
text-align:left;
}


.dummy {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  
}



#lineup .spec{ position:absolute;  bottom:0; margin:auto; left:0;opacity:0; 
 top: 40%;
  -webkit-transform: translateY(-40%);
  -ms-transform: translateY(-40%);
  transform: translateY(-40%);}
#lineup .spec h3{ padding-left:10px}
#lineup .spec h3 img{ width:300px;height:auto}
#lineup .spec ul{margin-top:20px;}
#lineup .spec li{ display: inline-block; vertical-align:middle}
#lineup .spec li.photo{ padding-right:40px; width:150px}
#lineup  .spec .photo img{ width:100%; height:auto}
#lineup .spec table{ border-collapse: collapse;border-spacing:0px; }
#lineup .spec caption{ font-size:24px}



#lineup .spec td{ text-align:left; font-size:93%; line-height:1.6}
#lineup .spec th{text-align:left; padding:0px 24px 0px 0 ;font-size:93%; line-height:1.6; font-weight:normal }
#lineup ul.bt_spec{ margin-top:10px}
#lineup .bt_spec li{ width:320px;}
#lineup .btstock{  cursor:pointer}



#lineup .price{ position:absolute; right:0px; bottom:10%;-moz-border-radius: 4px;
border-radius: 4px; background:url(../lineup/images/price_bg.png); padding:12px 20px; display:none}
#lineup .price table{border-collapse: collapse;border-spacing:20px;}
#lineup .price table caption{ font-size:20px}
#lineup .price table td{ padding:6px; width:60px;border:1px solid #585656; text-align:center; background:#E6E6E6}
#lineup .price table td.zero{ background:#4C4C4C}


/*shoplist*/
#shoplist{padding-top:75px; padding-bottom:40px; overflow:hidden;}
.movie-wrap {
    position: relative;
    height: 86%;
	box-sizing:border-box;
	overflow: hidden;
}
 
.movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
   width: 100% !important;
height: 100% !important;
}

.overlay { position: absolute;  z-index: 1;  display: none;  top: 80px;  width: 100%;}
@media (max-width: 768px) {

body{ width:100%; min-width: 100%; margin:auto;}
a {display: block; -webkit-tap-highlight-color:transparent;}
#menu_shoplist a{ display:inline-block}
img {max-width: 100%; height:auto;}
.sp{ display:block}
.pc{ display:none}
/*#header {height:60px;}
h1 img{ height:30px; width:auto}
#menu_shoplist img{ width:60px; height:auto}
#menu li{ float:none; display:inline-block; vertical-align:middle; padding-top:7px}
#menu li img{ height:50px; width:auto}
 #section0{margin-top:52px}
  #lineup .spec{ width:100%; height:auto;}
#lineup .spec caption{ font-size:85%}
#shoplist{padding-top:60px; }
  #lineup .spec th{padding:0px 10px 0px 0 ;}
  #lineup  .spec td,#lineup  .spec th{font-size:50%; }
*/

}
@media screen and (max-width: 479px){
/*ここにiPhone縦用CSS追記*/
#header {
height:70px;
}
 h1 img{ width:160px; height:auto}
 h2{ width:50%;bottom:70px;}
#nav {height:50px;}
#menu{margin-right:10px;}
#menu li{padding-top:16px;}
#menu li img{ width:auto; height:11px}
#menu_shoplist{ padding-right:10px; text-align:right; margin-top:-40px}
#menu_shoplist img{ width:30px; height: auto}

#flogo{ bottom:13px; left:10px;}
#flogo img{width:auto; height:11px}


 #toppage{ 
 background-image: url(../images/concept1_bg_ipad_portrait.png);
background-position:center center;
background-repeat:no-repeat;
background-size: contain}

#section0{
background-image: url(../images/bg-top_ipad_portrait.png);
background-position:left 30px;
margin-top:0px
}

 #section0 h3{height:130px; padding-top:40px; text-align:center; }
#section0 h3 img{ width:96%; margin:auto}

#section1 #bg1 p{background:url(../images/concept1_p1_ipad_portrait_2024.png) no-repeat center center;background-size:100% auto; }
#section2 #bg1 p{ background:url(../images/concept1_p2_ipad_portrait.png) no-repeat center center; background-size:100% auto; }
#section3 #bg1 p{ background:url(../images/concept1_p3_ipad_portrait_withtax2024.png) no-repeat center center; background-size:100% auto; }

#section1 a{ left:26%; bottom:31%; width:190px; height:30px}


#item1,#item2,#item3,#item4,#item5,#item6,#item7,#item8,#item9{background-size: 140% auto;
background-position:140% 76%;
background-repeat:no-repeat; 
margin:0 26px 0 16px
}
#lineup{ padding-top:70px; width:100%;}
#lineup .spec{ 
 top: 0%;
  -webkit-transform: translateY(-0%);
  -ms-transform: translateY(-0%);
  transform: translateY(-0%);}
#lineup .spec{ width:100%; height:auto; 
-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box; }
 #lineup .spec h3{ padding:20px 0 10px; max-width:60%}

 #lineup .spec ul{ float:left; width:50%; margin-top:10px}
 #lineup .spec li{ vertical-align:top; width:45%;float:left;}
 #lineup .spec li.photo{ padding-right:10px;width:55%;
 -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box; }
#lineup .spec li.photo img{ width:100%;}
#lineup .spec caption{ font-size:100%}
 #lineup .spec th{padding:0px 10px 0px 0 ;}
#lineup .spec td,#lineup .spec th{ font-size:7px }


#lineup ul.bt_spec{ width:100%; margin-top:0 }
#lineup .bt_spec li{ width:96%;}

#lineup  .btstock{ width:100px;}
#lineup .price{ bottom:25%;}
#lineup .price table{border-spacing:14px;}
#lineup .price table td{ padding:1px 6px; }



.show{  z-index:9999; display:block; overflow:hidden; padding:10px; width: 100%; margin:auto; background:#FFFFFF; display:none;
  position: absolute; top:20%; left:23%; z-index:2;
  -webkit-box-shadow: 0px 0px 20px 0px #333;
  -moz-box-shadow: 0px 0px 20px 0px #333;
  box-shadow: 0px 0px 20px 0px #333;transform: scale(1.8);}
.zoom ul.show ul{ float: none; width:100%; margin-top:0px; }



} 
@media only screen
	and (min-device-width:320px)
	and (max-device-width:767px) 
	and (orientation:landscape) {
/*ここにiPhone横用CSS追記*/
.pc{ display:block}
 .sp{ display:none}
#header {
height:70px;
}
 h1 img{ width:160px; height:auto}
h2{ width:26%;
bottom:30px;
}


#nav {height:50px;}
#menu li { padding-top:18px}
#menu li img{ width:auto; height:16px}
#menu_shoplist{ padding-right:10px; text-align:right; margin-top:-40px}
#menu_shoplist img{ width:30px; height: auto}
#flogo{ bottom:10px;}

#section0{
background-image: url(../images/bg-top_ipad_landscape.png);
background-position:left 50px;
background-size: 100% auto;
margin-top:0px
}
 #section0 h3{height:100px;padding:14px 28px 0px;}
#section0 h3 img{ width:60%;}


#section1 #bg1 p{background-size:auto 60%;}
#section2 #bg1 p{ background-size:auto 60%;}
#section3 #bg1 p{ background-size:auto 60%; }
#section1 #bg1,
#section2 #bg1,
#section3 #bg1{padding-top:20px;}

#section1 a{ left:38%; bottom:20%; width:160px; height:30px}

#item1,#item2,#item3,#item4,#item5,#item6,#item7,#item8,#item9{

background-position:83% top;
background-size: auto 65%;
margin:0px

}
#lineup{ padding-top:70px; width:100%;}
#lineup .spec{ 
 top: 0%;
  -webkit-transform: translateY(-0%);
  -ms-transform: translateY(-0%);
  transform: translateY(-0%);}
#lineup .spec{ width:100%; height:auto; 
-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box; }

#lineup  .spec h3{ padding:20px 0 10px 10px}
#lineup  .spec h3 img{ width:200px;height:auto}
#lineup .spec ul{ float:left; width:33%; margin-top:10px}
 #lineup .spec li{ vertical-align:top; width:45%;float:left;}
 #lineup .spec li.photo{ padding-right:10px;width:55%;
 -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box; }
 #lineup .spec li.photo img{ width:100%;}

#lineup  .spec caption{ font-size:18px}
#lineup  .spec td,#lineup  .spec th{font-size:50%; }
#lineup ul.bt_spec{ width:66%; margin-top:0; float:none; }
#lineup .bt_spec li{ width:100%;}

#lineup  .btstock{ width:100px;}
#lineup .price{ bottom:40%; width:64%;right:15%}
#lineup .price table{border-spacing:14px;}
#lineup .price table td{ padding:1px 6px; }

.show{  z-index:999; display:block; overflow:hidden; padding:10px; width: 100%; background:#FFFFFF; display:none;
  position: absolute; top:12%; left:20%; z-index:2;
  -webkit-box-shadow: 0px 0px 20px 0px #333;
  -moz-box-shadow: 0px 0px 20px 0px #333;
  box-shadow: 0px 0px 20px 0px #333;transform: scale(1.5);}
.zoom ul.show ul{ float: none; width:100%; margin-top:0px; }


} 
 
@media only screen
 and (min-device-width: 768px)
 and (max-device-width: 1024px)
 and (orientation:portrait) {
 
/*ここにiPad縦向き専用CSS追記*/　　　　
 body {-webkit-text-size-adjust: 100%;}
 h1 img{ width:200px; height:auto}
 h2{ width:40%;bottom:80px;}
#menu li{float:left; padding-top:23px; }

.sp{ display:block}
.pc{ display:none}

 #toppage{ 
 background-image: url(../images/concept1_bg_ipad_portrait.png);
background-position:center center;
background-repeat:no-repeat;
background-size: contain}


#section0{
background-image: url(../images/bg-top_ipad_portrait.png);
background-position:left 0px;
background-size: cover;
margin-top:0;
}

#section0 h3 img{ width:75%;}
 #section0 h3{height:150px;}



#section1 #bg1 p{background:url(../images/concept1_p1_ipad_portrait_2024.png) no-repeat center center;background-size:100% auto; }
#section2 #bg1 p{ background:url(../images/concept1_p2_ipad_portrait.png) no-repeat center center; background-size:100% auto; }
#section3 #bg1 p{ background:url("../images/concept1_p3_ipad_portrait_withtax2024.png") no-repeat center center; background-size:100% auto; }

#section1 a{ left:26%; bottom:26%;}


#item1,#item2,#item3,#item4,#item5,#item6,#item7,#item8,#item9{background-size: 140% auto;
background-position:140% 80%;
background-repeat:no-repeat; margin:0 36px
}

#lineup{ padding-top:80px; width:100%;}
#lineup .spec{ 
 top: 0%;
  -webkit-transform: translateY(-0%);
  -ms-transform: translateY(-0%);
  transform: translateY(-0%);}

#lineup .spec{ width:100%; height:auto; 
-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box; }
 #lineup .spec h3{ padding:20px 0 20px 10px}

 #lineup .spec ul{ float:left; width:50%; margin-top:20px}
 #lineup .spec li{ vertical-align:top}
 #lineup .spec th{padding:0px 10px 0px 0 ;}
 #lineup  .spec td,#lineup  .spec th{font-size:85%; }

#lineup ul.bt_spec{ width:100%; }
#lineup .bt_spec li{ width:96%;}
#lineup .spec li.photo{ padding-right:20px;width:170px }
#lineup  .btstock{ width:140px;}
#lineup .price{ bottom:25%;}
#lineup .price table{border-spacing:14px;}
#lineup .price table td{ padding:1px 6px; }
}
 
@media only screen
 and (min-device-width: 768px)
 and (max-device-width: 1024px)
 and (orientation: landscape) {
 
/*ここにiPad横向き専用CSS追記*/　　　　
 body {-webkit-text-size-adjust: 100%;}
 h2{ width:26%;bottom:60px;}
.pc{ display:block}
 .sp{ display:none}

#section0{
background-image: url(../images/bg-top_ipad_landscape.png);
background-position:left 70px;
background-size: 100% auto;
margin-top:0px
}
 #section0 h3{height:150px;padding:14px 28px 0px;}
#section0 h3 img{ width:60%;}

#section1 #bg1,
#section2 #bg1,
#section3 #bg1{padding-top:20px;}

#section1 a{ left:30%; bottom:16%; }

#item1,#item2,#item3,#item4,#item5,#item6,#item7,#item8,#item9{

background-position: right center;
background-size: auto 80%;
}
#lineup .spec{ width:100%; height:auto; 
-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box; }

#lineup  .price table td{ padding:6px; width:34px;}
#lineup  .spec h3{ padding-top:20px;}
#lineup  .spec h3 img{ width:240px;height:auto}
#lineup  .spec ul{margin-top:15px;}

#lineup  .spec .photo{ width:150px}
#lineup  .spec .photo img{ width:100%; height:auto}
#lineup  .spec caption{ font-size:18px}
#lineup  .spec td,#lineup  .spec th{font-size:77%; }
#lineup ul.bt_spec{ margin-top:0px}
#lineup  .btstock{ width:140px;}
#lineup .price{ bottom:14%;}
#lineup .price table{border-spacing:14px;}
#lineup .price table td{ padding:1px 6px; }
}