@charset "UTF-8";


/* カード
------------------------- */
#contents main{font-family: 'Noto Sans JP', sans-serif;font-weight: 500;}
.mfp-hide p,.mfp-hide figcaption{font-family: 'Noto Sans JP', sans-serif;font-weight: 500;}
h1.omotenashi-ttl{font-size: 4.2rem;font-weight: 700;color: #fff;position:absolute;bottom: 20%;text-align: center;z-index: 9999;left: 0;right: 0}
h1.omotenashi-ttl span{font-size:2rem;display: block}
@media only screen and (max-width: 767px){
.sp-only{display: block}
.pc-only{display: none}
h1.omotenashi-ttl{font-size: 2.2rem;}
h1.omotenashi-ttl span{font-size:1.8rem;}    
}
@media screen and (min-width:768px){
.sp-only{display: none}
.pc-only{display: block}
}
.layout-bg{background-image: url(https://toto.imagewave.pictures/%2Fproducts%2Fpublic%2Fcase%2Fmiyajima%2Fimages%2Fbg-layout.jpg);background-size: cover;padding: 6em 0 36em}
.an-card {
	opacity: 0;
	-webkit-perspective-origin: left center;
	perspective-origin: left center;
	-webkit-transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
	transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
	-webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
	transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
}

.show .an-card {
	opacity: 1;
	-webkit-transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
	transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
}
@media only screen and (max-width: 767px){
 .layout-bg{padding: 6em 0 1em}
 #layout p.ttl-txt br{display: none}
    #layout p.ttl-txt{padding: 0 0.5em}
    
}
/* .navigation
------------------------- */
.navigation{background: #fff}
.navigation ul{display: flex;justify-content:space-around;flex-wrap: wrap}
.navigation ul li{position: relative;margin: 0}
.navigation ul li:before{content:"";height: 5px;width: 100%;background-color: #333;position: absolute;top: 0;left: 0;transform: scaleX(0);
		transform-origin: right bottom;transition: transform 0.2s ease-out;}
.navigation ul li:hover::before{content:"";height: 5px;width: 100%;background-color: #333;position: absolute;top: 0;left: 0;transform: scaleX(1);
		transform-origin: left bottom;}
.navigation ul li a{font-size: 2.2rem;color:#333;font-weight: 700;text-align: center;padding:1em 1em;display: block;-webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);	transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);}
.navigation ul li a:hover{text-decoration: none}
.navigation ul li a span{font-size: 1.2rem;color:#999;display: block}
.fullWidth { margin-left: calc((100vw - 100%) / -10); margin-right: calc((100vw - 100%) / -10); max-width: auto; max-width: initial;position: relative}
.fullWidth > img { width: 100%; }
.fullWidth > a { display: block; }
[data-aos=fade-up] {transform: translate3d(0,15px,0);}
.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}
.is-fixed ul li a{padding: 0.4em 1em;font-size: 1.8em}
.is-fixed ul li a span{font-size: 1rem}
.is-fixed ul li:before{height: 3px!important}

@media only screen and (max-width: 767px){
    .navigation{display: none}
.navigation ul li{position: relative;margin: 0;width: 33.33333%}   
.navigation ul li a {font-size: 1.6rem;padding: 0}
.navigation ul li a span{font-size: 1rem;}
}


/* swiper
------------------------- */
.swiper-pagination-bullet{opacity: 1;background-color: #f2f2f2}
.swiper-pagination-bullet-active{background-color: #333}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:15px}


/* story
------------------------- */
p.ttl-txt{text-align: center;font-size: 1.6rem;color: #fff;text-shadow:0px 0px 6px #333;margin-bottom: 1.6em}
p.ttl-txt em{font-size: 2rem;font-weight: bold}
.bg-story{}
.list-story{position: relative;top:-6em}
.list-story ul{display:flex;justify-content:space-between;flex-wrap: wrap}
.list-story ul li{width: 33.333333%;flex-grow: 1;position: relative}
.list-story ul li img{width: 100%}
.list-story ul li p{padding: 1em 1em 0.5em;font-size: 1.4rem;text-align: justify}
.list-story ul li span small{text-align: right;display: block;padding:0 1em 3em;font-size: 1.2rem}
.list-story ul li.show:nth-child(odd) div{background-color: #f2f2f2;}
.list-story ul li:nth-child(2),.list-story ul li:nth-child(5),.list-story ul li:nth-child(8){top: 6em }
section .inner{max-width: 960px;margin: 0 auto}
section.contents h2{text-align: center;font-size: 3.2rem;margin-bottom: 1em;color: #fff;font-weight: 700}
section.contents h2 span{display: block;font-size: 1.4rem;color:#eeeeee;font-weight: 400}
#story{margin-top: 3em}
#story .bg-story{background-image: url(https://toto.imagewave.pictures/%2Fproducts%2Fpublic%2Fcase%2Fmiyajima%2Fimages%2Fbg-story.jpg);background-size: cover;padding: 5em 0 8em}
#story .bg-story p{text-align: center;font-size: 1.6rem;color: #fff;text-shadow:0px 0px 6px #333;margin-bottom: 1.6em}
#story .bg-story p em{font-size: 2rem;font-weight: bold}
@media only screen and (max-width: 767px){
.list-story ul li{width: 50%;flex-grow: 0}
.list-story ul li:nth-child(2),.list-story ul li:nth-child(5),.list-story ul li:nth-child(8){top:inherit}
.list-story ul li.show:nth-child(odd) div{background-color:inherit;}
.list-story ul li.show:nth-child(1) div,.list-story ul li.show:nth-child(4) div,.list-story ul li.show:nth-child(5) div,.list-story ul li.show:nth-child(8) div,.list-story ul li.show:nth-child(9) div{background-color: #f2f2f2;}
#story .bg-story p br{display: none}
#story .bg-story p{padding: 0 0.5em}
.list-story{position: relative;top:0}
    }


/* location
------------------------- */
#location{background-image: url(https://toto.imagewave.pictures/%2Fproducts%2Fpublic%2Fcase%2Fmiyajima%2Fimages%2Fbg-location.jpg);background-size: cover;padding: 5em 0 8em;margin-top: 5em}
#location ul{display: flex;justify-content: center;flex-wrap: wrap}
#location ul li{padding: 1em 2em}
#location h2 span{color: #e0e0e0;}
@media only screen and (max-width: 767px){
#location,#story{margin-top: 3rem}    
}
/* outline
------------------------- */
#outline{background-color: #f2f2f2;padding: 5em 0 8em}
#outline .w-800{max-width: 800px;margin: 0 auto}
#outline h3{text-align: center;font-weight: 700;color: #333;font-size:2.0rem;margin-bottom: 3em}
#outline dl{display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 1.2em 0.5em 1.2em 0.5em;border-bottom: 1px solid #ccc;font-size: 1.4rem;}
#outline dl.first{border-top:1px solid #ccc}
#outline dl dt{width: 20%;font-weight: bold}
#outline dl dd{width: 80%}
/* fade In
------------------------- */

.an-fade {
	opacity: 0;
	-webkit-transition: opacity 1000ms cubic-bezier(0.19, 1, 0.22, 1);
	transition: opacity 1000ms cubic-bezier(0.19, 1, 0.22, 1);
}

.show .an-fade {
	opacity: 1;
}

/* delay
------------------------- */

.dl-00 {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.dl-02 {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

.dl-04 {
	-webkit-transition-delay: 0.4s;
	transition-delay: 0.4s;
}

.dl-06 {
	-webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
}

.dl-08 {
	-webkit-transition-delay: 0.8s;
	transition-delay: 0.8s;
}


.for-sp-inline {
  display: none !important;
}


@media screen and (max-width: 767px) {
  .for-sp-inline {
    display: inline !important;
  }
}

.for-pc-inline {
  display: inline !important;
}
@media screen and (max-width: 767px) {
  .for-pc-inline {
    display: none !important;
  }
}

.gb-common-2019_header {
  	position: absolute;
}






/* layout */
.layout_movie_wrap{
	text-align: center;
	padding: 40px 0;
	background-size: cover;
}
.layout_movie_link{
	cursor: pointer;
	background-color: #222;
}
.layout_movie_link img{
	width: 100%;
}
.layout_movie_link:after{
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 100px;
	transform: translate(-50%, -50%);
	background: url("https://toto.imagewave.pictures/%2Fproducts%2Fpublic%2Fcase%2Fmiyajima%2Fimages%2Ffacade_movie_btn.png") center center no-repeat;
	background-size: cover;
}
.movie_box{
	max-width: 900px;
	margin: 0 auto;
}
.movie_box_wrap{
	position: relative;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	overflow: hidden;
}
.movie_box_wrap:before {
    content:"";
	position: relative;
    display: block;
    padding-top: 56.25%;
}
.movie_box,
.movie_box .video-js,
.movie_box video,
.layout_movie_link{
    display: block;
    position: absolute;
    height: 100%!important;
    width: 100%!important;
    top: 0;
    left: 0;
}
@media only screen and (max-width: 767px){
#layout{margin-top: 3rem!important}
.layout_movie_wrap{padding:0;}
}
/* OMOTENASHI */
.omotenashi_wrap{
	position: relative;
	padding: 40px 0;
	/*color: #fff;*/
}
@media only screen and (max-width: 767px){
.omotenashi_wrap{padding:0;}
}
.omotenashi_wrap:before{
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	bottom: 0;
	left: 0;
	background-size: cover;
    z-index: -1;
}
.omotenashi_wrap .inner{
	position: relative;
	max-width: 720px;
	margin: 0 auto;
}
.omotenashi_list a{
	display: block;
	margin-bottom: 8px;
	padding: 10px 15px;
	font-size: 1.5rem;
	color: #333;
	border: 1px solid #999;
	border-radius: 24px;
	opacity: 1;
}
.omotenashi_list a span{color:#09379f;font-weight: bold;padding-right: 1.2em}
.omotenashi_text{
    margin: 10px 0 30px;
    font-size: 1.2rem;
    text-indent: 1em;
}
.omotenashi_map{
	position: relative;
}
.omotenashi_map_img{
	position: relative;
	z-index: 1;
}
.omotenashi_map_list{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}
.omotenashi_map_item{
	position: absolute;opacity: 0.9;
}
.omotenashi_map_item a{
	cursor: pointer;
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	/*background-color: rgba(34,255,218,0.35);*/
}
.omotenashi_map_item a span{
	position: absolute;
	font-size: 0;
	width: 30px;
	height: 30px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background-color: #13449b;
    color: #fff;
    font-weight: bold;
}
.omotenashi_map_item a span:before,
.omotenashi_map_item a span:after{
	content: '';
	display: block;
	position: absolute;
	/*width: 16px;
	height: 2px;*/
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/*background-color: #fff;*/
    color: #fff;
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
}
.omotenashi_map_item a span:after{
	transform: translate(-50%, -50%) rotate(90deg);
}

.omotenashi_map_item.item01 span{
	/*left: 0;*/
}
.omotenashi_map_item.item01 span:before{
	content: '1';
}
.omotenashi_map_item.item02 span:before{
	content: '2';
}
.omotenashi_map_item.item03 span:before{
	content: '3';
}
.omotenashi_map_item.item04 span:before{
	content: '4';
}
.omotenashi_map_item.item05 span:before{
	content: '5';
}
.omotenashi_map_item.item06 span:before{
	content: '6';
}
.omotenashi_map_item.item07 span:before{
	content: '6';
}
.omotenashi_map_item.item08 span:before{
	content: '7';
}
.omotenashi_map_item.item09 span:before{
	content: '8';
}

.omotenashi_map_item.item01{
    top: 62.5%;
    left: 64%;
    width: 10%;
    height: 10%;
}
.omotenashi_map_item.item02{
    top: 70%;
    left: 22%;
    width: 10%;
    height: 10%;
}
.omotenashi_map_item.item02 span{


}
.omotenashi_map_item.item03{
	top: 47%;
    left: 24%;
    width: 10%;
    height: 10%;
}
.omotenashi_map_item.item03 span{

}
.omotenashi_map_item.item04{
    top: 10%;
    left: 18%;
    width: 10%;
    height: 10%;
}
.omotenashi_map_item.item04 span{

}
.omotenashi_map_item.item05{
    top: 17%;
    left: 52.2%;    

    width: 10%;
    height: 10%;
}
.omotenashi_map_item.item05 span{

}
.omotenashi_map_item.item06{
    top: 54%;
    left: 48%;
    width: 10%;
    height: 10%;
}

.omotenashi_map_item.item07{
    top: 50%;
    left: 61%;
    width: 10%;
    height: 10%;
}
.omotenashi_map_item.item08{
    top: 58%;
    left: 35%;
    width: 10%;
    height: 10%;
}
.omotenashi_map_item.item09{
    top: 70%;
    left: 74%;
    width: 10%;
    height: 10%;
}
/* popup */
.mfp-bg {
    z-index: 11000;
    background: #000;
	opacity: 0;
	-webkit-transition: all 0.15s ease-out;
	-moz-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
}
.mfp-bg.mfp-ready {
  opacity: 0.75;
}
.mfp-bg.mfp-removing {
  opacity: 0;
}
.mfp-wrap {
	padding: 20px;
    z-index: 11001;
}
.mfp-wrap .mfp-content {
  opacity: 0;
  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}
.mfp-container{
	padding: 15px;
}
.mfp-close{
	position: absolute;
	width: 40px;
	height: 40px;
	top: -40px;
	right: -2px;
	cursor: pointer;
    padding: 0
}
.mfp-close:before,
.mfp-close:after{
	content: '';
	display: block;
	position: absolute;
	width: 35px;
	height: 2px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	background-color: #fff;
}
.mfp-close:after{
	transform: translate(-50%, -50%) rotate(-45deg);
}
.mfp-auto-cursor .mfp-content {
    cursor: auto;
    max-width: 700px;
}
.omotenashi-popup_wrap{
	padding: 20px;
	text-align: center;
	background-color: #fff;
}
.omotenashi-popup_wrap figure{
	display: inline-block;
	max-width: 620px;
	text-align: left;
}
.omotenashi-popup_wrap figcaption{
	display: block;
	margin-bottom: 10px;
	font-size: 1.6rem;
}
.omotenashi-popup_wrap p{
	margin-top: 15px;
	font-size: 1.4rem;
}
.omotenashi-popup_wrap .popup_text_s{
font-family: 'Noto Sans JP', sans-serif;font-weight: 500;
}
@media screen and (max-width:767px){
    .omotenashi_list_wrap{margin: 1em 0}
    .mfp-wrap{padding: 0}
    .omotenashi-popup_wrap{padding:1.4em 2.2em}
    .omotenashi-popup_wrap figure{padding: 0;margin: 0;display: block}
    .omotenashi_map_item a span:before, .omotenashi_map_item a span:after{font-size: 2.4rem}
}
/* LOCATION */
.location_img{
	padding-bottom:3em;
	text-align: center;
}





@media screen and (min-width:768px){
	.experience_notes{
		margin-top: 20px;
	}
    .pc-p-lineheight{
        line-height: 1.8em;
    }

	/* FACADE */
	.layout_movie_wrap{
		padding: 85px 0;
        position: relative;
        top:-40em;
        margin-bottom: -40em;
            
	}
	.layout_movie_link img{
		transition: opacity 0.2s ease;
	}
	.layout_movie_link:hover img{
		opacity: 0.4;
	}
	.layout_movie_link:after{
		width: 134px;
		height: 134px;
	}

	/* OMOTENASHI */
	.omotenashi_map_item a span{
		width: 58px;
		height: 58px;
	}
	.omotenashi_map_item a span:before,
	.omotenashi_map_item a span:after{
		width: 30px;
	}
	.omotenashi_map_item{
		transition: opacity 0.4s ease;
	}
	.omotenashi_map_item.not-current{
		opacity: 0.3;
	}
	.omotenashi_list a{
		transition: background-color 0.4s ease, border-color 0.4s ease, opacity 0.4s ease;
	}
	.omotenashi_list .not-current a{
		opacity: 0.3;
	}
	.omotenashi_list .current a,
	.omotenashi_list a:hover{
		cursor: pointer;
		border-color: #004fa2;
		background-color: #004fa2;
        color: #fff;
		opacity: 1;
        text-decoration: none;
	}
    .omotenashi_list a:hover span,.omotenashi_list .current a span{color: #fff}
	.omotenashi-popup_wrap{
		/*padding: 30px 40px;*/
	}



}

@media screen and (min-width:1024px){
	/* OMOTENASHI */
	.omotenashi_wrap{
		padding: 0 0 70px;
	}
	.omotenashi_wrap:before{
		height: calc(100% - 130px);
		min-height: 540px;
	}
	.omotenashi_wrap .inner{
		display: flex;
    	/*align-items: flex-end;*/
		max-width: 1250px;
		margin: 0 auto;
	}
	.omotenashi_list_wrap{
		order: 2;
		width: 44%;
		padding: 0 30px;
        margin-top: 80px;
	}
	.omotenashi_list{
		max-width: 400px;
		margin: 0 auto;
	}
	.omotenashi_text{
		max-width: 400px;
		margin: 20px auto 0;
        text-indent: 1em
	}
	.omotenashi_map_wrap{
		order: 1;
		width: 56%;
	}



	/* LOCATION */
	.location_img{
		max-width: 1250px;
		margin: 0 auto;
	}


}

@media screen and (min-width:1500px){
	.omotenashi_list a,
	.omotenashi_text,
	.iot_list{
		/*font-size: 1.2rem;*/
	}
	.omotenashi_text{
		margin-top: 60px;
	}
	.remote_img{
		width: calc(100% + 60px);
		padding: 50px 60px;
	}
	.remote_link{
		padding: 0;
	}


}


@-webkit-keyframes card {

0% {
	opacity: 0;
}

1% {
	opacity: 1;
}

100% {
	opacity: 1;
}

}

@keyframes card {

0% {
	opacity: 0;
}

1% {
	opacity: 1;
}

100% {
	opacity: 1;
}

}