@charset "utf-8";

/* mobile CSS

Index
------------------------------------------------------------
==== ipad
==== iphone
------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------
==== ipad
-----------------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

#container {
  min-width: 768px;
}

#header {
  width: auto;
  min-width: 768px;
}

#gnav {
  min-width: 768px;
}

#gnav .content_width {
  width: 98%;
}

#gnav dl {
  min-width: 683px;
  font-size: 13px;
}


#main .content_width {
  width: 98%;
}

#footer .content_width {
  width: 98%;
}


#artist .text {
  padding-right: 2%;
}

/*-- _ product item ----------*/
#product_item .header {
  width: 98%;
}

#product_item .article {
  width: 98%;
}

#product_item .image {
  width: 44%;
}


/*-- lang --*/
.en .gnav a {
  padding-right: 15px;
  padding-left: 15px;
}

.jp .gnav a {
  padding-right: 15px;
  padding-left: 15px;
}

.it #gnav dl {
  font-size: 12px;
}

.it .gnav a {
  padding-right: 15px;
  padding-left: 15px;
}

.it #product h2 {
  font-size: 134%;
}

.de .gnav a {
  padding-right: 12px;
  padding-left: 12px;
}

.de #product h2 {
  font-size: 117%;
}

.es .gnav a {
  padding-right: 10px;
  padding-left: 10px;
}

.es #product h2 {
  font-size: 167%;
}

.fr .gnav a {
  padding-right: 10px;
  padding-left: 10px;
}

.fr #product h2 {
  font-size: 167%;
}

.shi .gnav a {
  padding-right: 34px;
  padding-left: 34px;
}

.tch .gnav a {
  padding-right: 34px;
  padding-left: 34px;
}



}

@media only screen
 and (min-device-width: 768px)
 and (max-device-width: 1024px) {

.cur_zoom:after{
  position: absolute;
  z-index: 100;
  bottom: 5px;
  right: 5px;
  display: block;
  width: 32px;
  height: 32px;
  background: url(../images/icon_zoom.png);
  content: "";
}


}
/* end ipad -------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------
==== iphone
-----------------------------------------------------------------------------------*/
@media screen and (max-width: 568px) {
/* ============================================================
== 1. reset -> base.css
============================================================*/
/*============================================================
== 2. initialization
============================================================*/
/*-- font common ----------*/
body {
  font-size: 14px;
}


/*============================================================
== 3. common
============================================================*/
/*------------------------------------------------------
 _ 3-1. wrapper/container
------------------------------------------------------*/
#container {
  min-width: 320px;
}


/*------------------------------------------------------
 _ 3-2. header
------------------------------------------------------*/
#header {
  overflow: hidden;
  width: 100%;
  min-width: 320px;
  margin-top: 50px; /* gnav height */
  margin-bottom: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #dddddd;
}


/*-- lang ----------*/
#lang {
  float: none;
  min-height: 36px;
  padding: 14px 5px 0;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  font-size: 12px;
  text-align: center;
}


/*-- sns ----------*/
#sns {
  width: auto;
  min-height: 28px;
  margin: 0 auto;
  padding: 8px 5px 0;
}



/*------------------------------------------------------
 _ 3-3. global navigation
------------------------------------------------------*/
#gnav {
  position: static;
  width: 100%;
  min-width: 320px;
}

#gnav .content {
  height: 54px;
}

#gnav .content_width {
  width: 100%;
}

#gnav h1 {
  position: absolute;
  top: 0;
  left: 0;
  float: none;
  width: 100%;
  padding: 0;
}

#gnav h1 span {
  padding-top: 14px;
  padding-left: 2%;
}

#gnav h1 a {
  position: relative;
  z-index: 100;
  display: block;
}


#gnav dl {
  width: auto;
  min-width: 0;
  margin-left: 0;
  font-size: 117%;
  white-space: normal;
}

#gnav dt {
  display: block;
  width: 100%;
  height: 49px;
  cursor: pointer;
}

#gnav dt span {
  display: block;
  width: 17px;
  height: 15px;
  margin-left: auto;
  padding-top: 12px;
  padding-right: 3%;
  text-align: right;
}

#gnav dd {
  margin:5px 0 0;
  position: relative;
  overflow: hidden;
  padding: 0;
  border-top: 1px solid #cccccc;
  background: #ffffff;
  line-height: 20px;
}

#gnav dd:after{
  position: absolute;
  z-index: 100;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  background: #cccccc;
  content: "";
}

#gnav dd:before{
  position: absolute;
  z-index: 100;
  top: 0;
  left: 50%;
  display: block;
  width: 1px;
  height: 100%;
  background: #cccccc;
  content: "";
}

#gnav li {
  float: left;
  display: block;
  width: 50%;
  text-align: center;
}

.gnav {
  position: relative;
  top: -1px;
  display: block;
  border-top: 1px solid #cccccc;
  border-left: none;
}

#gnav li:last-child .gnav:after{
  position: absolute;
  z-index: 100;
  top: -1px;
  left: 100%;
  display: block;
  width: 100%;
  height: 1px;
  background: #cccccc;
  content: "";
}

.gnav a,
.gnav a:link,
.gnav a:visited,
.gnav a:hover,
.gnav a:active,
.gnav a:focus {
  padding: 10px 5px;
}



/*------------------------------------------------------
 _ 3-4. contents wrap/column
------------------------------------------------------*/
#main .content_width {
  width: 96%;
}


/*------------------------------------------------------
 _ 3-5. footer
------------------------------------------------------*/
#footer .content_width {
  width: 96%;
}

#footer ul {
  float: none;
  padding-bottom: 10px;
  text-align: center;
}

#footer ul li {
  display: block;
  margin-right: 0;
}

#footer ul a {
  color: #cccccc;
  text-decoration: none;
}

#copyright {
  text-align: center;
}



/*============================================================
== 4. layout/parts/module
============================================================*/
/*------------------------------------------------------
 _ 4-3. link
------------------------------------------------------*/
/*-- zoom icon ----------*/
.cur_zoom:after{
  position: absolute;
  z-index: 100;
  bottom: 5px;
  right: 5px;
  display: block;
  width: 32px;
  height: 32px;
  background: url(../images/icon_zoom.png);
  content: "";
}


/*============================================================
== 5. content
============================================================*/
/*------------------------------------------------------
 _ mainvisual
------------------------------------------------------*/
#mainvisual li {
  float: none;
  width: 100%;
  margin: 0 auto 60px;
}

#mainvisual .li03 {
  display: none;
}

#mainvisual .li04 {
  display: none;
}


/*------------------------------------------------------
 _ concept
------------------------------------------------------*/
#concept {
  padding-top: 60px;
}

#concept h2 {
  font-size: 158%;
}

#concept p {
  font-size: 117%;
  line-height: 2;
}


/*------------------------------------------------------
 _ installation
------------------------------------------------------*/
#installation h2 {
  margin-bottom: 40px;
  font-size: 228%;
}


/*-- header ----------*/
#installation .header {
  width: 100%;
  margin-bottom: 40px;
}

#installation dt {
  float: none;
  width: 80%;
  margin: 0 auto 50px
}

#installation dd {
  width: auto;
  margin: 0 2%;
  line-height: 2;
}

#installation dd p {
  font-size: 117%;
}


/*-- image ----------*/
#installation .image {
  margin: 0 auto 50px;
}



/*------------------------------------------------------
 _ artist
------------------------------------------------------*/
/*== intro ========================*/

/*-- profile ----------*/
#artist .header {
  float: none;
  width: 100%;
  margin: 0 auto 30px;
  padding: 0;
}

#artist h2 {
  margin: 0 auto 20px;
  padding: 0;
  font-size: 172%;
}

#artist .br1 {
  display: none;
}

#artist .text {
  padding: 0;
}

#artist .text h3 {
  font-size: 100%;
}

#artist .text p {
  font-size: 117%;
  line-height: 2;
}


/*-- message ----------*/
#artist .message .title {
  padding-right: 60px;
  padding-left: 10px;
}

#artist .message .title:after {
  width: 48px;
}



/*------------------------------------------------------
 _ movie
------------------------------------------------------*/
#movie h2 {
  font-size: 186%;
}


/*== article ========================*/
.movie {
  display: block;
  width: 100%;
}

.movie dt {
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 100%;
}

.movie dd {
  display: block;
  width: 100%;
}

.youtube .comingsoon{
  position: relative;
  top: auto;
  left: auto;
  margin-top: auto;
  margin-left: auto;
}


/*------------------------------------------------------
 _ product
------------------------------------------------------*/
#product br.column2{
  display: block;
}

#product br.column4{
  display: block;
}

#product h2 {
  width: 47%;
  font-size: 172%;
}

/*== article ========================*/
#product .article {
  float: left;
  width: 47%;
  margin-right: 3%;
}



/*------------------------------------------------------
 _ product item
------------------------------------------------------*/

/*== header ========================*/
#product_item .header {
  width: 98%;
}


/*== content ========================*/
#product_item .content_width {
  padding: 15px 0 40px;
}

#product_item .article {
  width: 94%;
  margin: 0 auto;
}


/*-- image ----------*/
#product_item .image {
  float: none;
  width: auto;
  margin: 0 auto 15px;
  padding: 0;
}


/*-- text ----------*/
#product_item h3 {
  font-size: 134%;
}

#product_item .article .btn {
  display: block;
  padding-top: 30px;
  text-align: center;
}



/*============================================================
== 6. lang
============================================================*/
/*------------------------------------------------------
 _ EN
------------------------------------------------------*/
/*------------------------------------------------------
 _ JP
------------------------------------------------------*/
.jp .content_width #copyright {
  text-align: center;
}


/*------------------------------------------------------
 _ IT
------------------------------------------------------*/
.it #gnav dl {
  font-size: 14px;
}

.it #product h2 {
  font-size: 100%;
}


/*------------------------------------------------------
 _ DE
------------------------------------------------------*/
.de #product h2 {
  font-size: 84%;
}

.de #product h2 span span {
  padding-left: 3%;
}


/*------------------------------------------------------
 _ ES
------------------------------------------------------*/
.es #product h2 {
  font-size: 134%
}


/*------------------------------------------------------
 _ FR
------------------------------------------------------*/
.fr #product h2 {
  font-size: 134%
}


/*------------------------------------------------------
 _ SHI
------------------------------------------------------*/
.shi #product h2 span span {
  padding-left: 20%;
}


/*------------------------------------------------------
 _ TCH
------------------------------------------------------*/
.tch #product h2 span span {
  padding-left: 20%;
}



}
/* end iphone -------------------------------------------------------------------------*/