@charset "utf-8";

/**************************************
* under-construction.css.css
**************************************/

/*  @media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  .portrait-only{
display: none;
  }
} 
 */

@media (min-width:480px){
  .portrait-only{
display: none;
  }
}

/* ランドスケープモード時にマージンを上に */

/* @media screen and (min-width: 480px) and (max-width: 736px){
body{
margin-top:12px !important;
}
} */

@media (max-width:479px){
  .portrait-only{
  	position: relative;
	min-height: 100%;
    max-height: 100%;
	height: 100%;
	min-width: 100%;
    max-width: 100%;
	width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    flex-direction:column;
    background: white;
    opacity:0.875;
  }
  .portrait-only img{
  	margin-bottom: 2rem;
  	width: 50%;
  }
}



/* @media screen and (min-width: 320px) and (orientation: landscape) {
	  .portrait-only{
	  	display: none;
  }
} */

/* @group under-construction
--------------------------------------------------------*/

    html, body {
        position: relative;
        height: 100%;
        min-height: 100%;
        max-height: 100%;
    }
    body {
    	display: flex;
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }

body { min-height:320px; }     
/* body[orient="portrait"] { min-height:540px; } */
body[orient="landscape"] { min-height:320px; }
    .swiper-container {
    	/* flex-basis:50%; */
        width: 50%;
        height: 100%;
        margin-left: auto;
        margin-right:0;
        right:0;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .swiper-container-vertical > .swiper-pagination-bullets{
    	right: 20px;
    	top: 3%;
    	   -webkit-transform: none;
	    -moz-transform: none;
	    -o-transform: none;
	    -ms-transform: none;
	    transform: none;
    }

    .swiper-container.swiper-container-vertical > .swiper-pagination-bullets > .swiper-pagination-bullet{
    	background: #595757;
    	opacity: 1;
    }

    .swiper-container2 {
    	position: relative;
    	overflow: hidden;
    	z-index: 1;
        width: 50%;
        height: 100%;
        margin-left: 0;
        margin-right:auto;
        left:0;
    }
	.swiper-pagination2{
		position: absolute;
	    text-align: center;
	    -webkit-transition: 300ms;
	    -moz-transition: 300ms;
	    -o-transition: 300ms;
	    transition: 300ms;
	    -webkit-transform: translate3d(0, 0, 0);
	    -ms-transform: translate3d(0, 0, 0);
	    -o-transform: translate3d(0, 0, 0);
	    transform: translate3d(0, 0, 0);
	    z-index: 10;
	}
    .swiper-container2.swiper-container-vertical > .swiper-pagination-bullets{
    right: 20px;
    top: 3%;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    transform: none;
    }
    .swiper-container2.swiper-container-vertical > .swiper-pagination-bullets > .swiper-pagination-bullet{
	background: black;
	opacity: 1;
    }

/* @group swiper-slide
--------------------------------------------------------*/

.slide-contents{
position:absolute;
top: 10%;
left: 5%;
z-index: 20;
}

.swiper-slide{
text-align: center;
font-size: 18px;
background: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}

.slide-img{
background-position: center center;
background-repeat: no-repeat;
background-attachment: initial;
background-size: cover;
background-color: #464646;
height: 100%;
width: 100%;
}

.slide-img-contents01{background-image: url(../img/sui-hamasaki-img01@2x.jpg);}
.slide-img-contents02{background-image: url(../img/sui-hamasaki-img02@2x.jpg);}
.slide-img-contents03{background-image: url(../img/sui-hamasaki-img03@2x.jpg);}
.slide-img-contents04{background-image: url(../img/sui-hamasaki-img04@2x.jpg);}
.slide-img-contents05{background-image: url(../img/sui-hamasaki-img05@2x.jpg);}
.slide-img-contents06{background-image: url(../img/sui-hamasaki-img06@2x.jpg);}
.slide-img-contents07{background-image: url(../img/sui-hamasaki-img07@2x.jpg);}
.slide-img-contents08{background-image: url(../img/sui-hamasaki-img08@2x.jpg);}
.slide-img-contents09{background-image: url(../img/sui-hamasaki-img09@2x.jpg);}

@media (-webkit-min-device-pixel-ratio: 2),
       (min--moz-device-pixel-ratio: 2),
       (-o-min-device-pixel-ratio: 2/1) {
.slide-img-contents01{background-image: url(../img/sui-hamasaki-img01@2x.jpg);}
.slide-img-contents02{background-image: url(../img/sui-hamasaki-img02@2x.jpg);}
.slide-img-contents03{background-image: url(../img/sui-hamasaki-img03@2x.jpg);}
.slide-img-contents04{background-image: url(../img/sui-hamasaki-img04@2x.jpg);}
.slide-img-contents05{background-image: url(../img/sui-hamasaki-img05@2x.jpg);}
.slide-img-contents06{background-image: url(../img/sui-hamasaki-img06@2x.jpg);}
.slide-img-contents07{background-image: url(../img/sui-hamasaki-img07@2x.jpg);}
.slide-img-contents08{background-image: url(../img/sui-hamasaki-img08@2x.jpg);}
.slide-img-contents09{background-image: url(../img/sui-hamasaki-img09@2x.jpg);}
}

/* @group Fixed logo
--------------------------------------------------------*/
.fixed-logo{
position: absolute;
top: 75%;
left: 5%;
z-index: 20;
width: 60%;
}