/*====================================================
     //id common
====================================================*/
header .iconBox ,
header .leftBox {
    display: none;
}
#contents > .innerBox {
    width: 100%;
    max-width: none;
    padding: 0;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
}

@media screen and (min-width:480px) and (max-width:768px) {
}

/* ////////// PC ////////// */
@media print,
screen and (min-width: 769px) {
    header .mainBox .menu-detail ul {
        margin: auto 0px auto auto;
    }
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
}

@media screen and (min-width:1200px) {
}

/*====================================================
     //id #title
====================================================*/
#title {
	position: relative;
	/* width: 80%; */
	height: auto;
	padding: 88px 0 120px;
	margin-bottom: 24px;
}
#title iframe#vr {
    width: 100%;
    height: calc(100vh - 58px - 20vh);
    margin: 10vh auto;
    border: solid 3px;
    border-color: #d3d3d3;
}
#title .linkBox {
    position: absolute;
    width: 100%;
    bottom: 60px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: right;
    padding: 0;
}
#title .linkBox .linkBtn {
    margin: 0 0 .5em auto;
    font-size: 1.1rem;
    width: 10em;
}
#title .scroll-outer {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
}
.scrollBox {
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	display: inline-block;
	width: 70px;
	z-index: 20;
}
.scroll {
	display: block;
    font-size: 1.6rem;
	width: 70px;
	height: 70px;
	padding-top: 10px;
	color: rgba(0, 0, 0, .4);
	-webkit-transition-delay:5s;
	transition-delay:5s;
	-webkit-transition: all 0.3s ease-out;
	        transition: all 0.3s ease-out;
	-webkit-animation: arrow-move06 2s 1s ease-in-out infinite;
	        animation: arrow-move06 2s 1s ease-in-out infinite;
}
.scroll.white {
	color: #fff;
}
.scroll:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: #483d8b;
    background: #ffd700;
}
.scroll span {
    position: relative;
}
@-webkit-keyframes arrow-move06 {
	  0% { opacity: 0.2; -webkit-transform: translate(0, 0px); transform: translate(0, 0px); }
	 50% { opacity: 1;   -webkit-transform: translate(0, 10px);   transform: translate(0, 10px) }
	100% { opacity: 0.2; -webkit-transform: translate(0, 0px); transform: translate(0, 0px); }
}
@keyframes arrow-move06 {
	  0% { opacity: 0.2; -webkit-transform: translate(0, 0px); transform: translate(0, 0px); }
	 50% { opacity: 1;   -webkit-transform: translate(0, 10px);   transform: translate(0, 10px) }
	100% { opacity: 0.2; -webkit-transform: translate(0, 0px); transform: translate(0, 0px); }
}
.scroll:after {
	content: '';
	width: 30px;
	height: 30px;
	display: block;
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
	border: solid 2px transparent;
	border-left-color: currentColor;
	border-bottom-color: currentColor;
	margin: -15px auto 0;
	-webkit-animation:3s arrow infinite ease;
	animation:3s arrow infinite ease;
}

/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
  #title {
  	height: auto;
  	/* margin: auto; */
  	margin-bottom: 10vh;
  	padding: 88px 0 0;
  }
  #title .linkBox {
	bottom: -32px;
}
    #title iframe#vr {
        height: 35vh;
/*        width: 80vw;*/
/*        margin: 10vh 10vw 10vh;*/
    }
    .scrollBox {
        display: none;
    }
}

@media screen and (min-width:580px) and (max-width:768px) {
  #title {
  	height: auto;
  	padding: 88px 0 88px;
  }
}

/* ////////// PC ////////// */
@media print,
screen and (min-width: 769px) {
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
}

/*====================================================
     #//ID information
====================================================*/
#information {
/*    background: #edecf0;*/
    background: rgba(72, 61, 139, .1);
    background: #f0eef5;
/*    min-height: 60vh;*/
}
#information iframe {
    width: 100%;
}

/* ////////// mobile ////////// */
@media screen and (max-width: 793px) {
    #information h3 {
        margin-bottom: 60px;
    }
    #information iframe {
        margin-bottom: 30px;
    }
}

@media screen and (min-width:480px) and (max-width:768px) {
}

/* ////////// PC ////////// */
@media print,
screen and (min-width: 794px) {
    #information h3 {
        margin-bottom: 60px;
    }
    #information .iframe-outer {
        height: 200px;
        max-width: 700px;
        margin: auto;
    }
}

/* ////////// tablet ////////// */
@media screen and (min-width:801px) and (max-width:959px) {
    #information .iframe-outer {
        height: 200px;
    }
}


/*====================================================
     //id #gallery
====================================================*/
#gallery {
    background: #d3d3d3;
    background: rgba(211, 211, 211, 0.4);
    background: #f4f4f4;
    position: relative;
}
#gallery:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 80px;
    bottom: 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(#f0eef5), to(#f4f4f4));
    background: linear-gradient(to bottom, #f0eef5, #f4f4f4);
}
#gallery .innerBox {
    width: 100%;
    max-width: none;
}
#gallery h2 {
    margin-bottom: 80px;
}
#gallery iframe {
    overflow: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    width: 100%;
}
#gallery iframe::-webkit-scrollbar {  /* Chrome, Safari 対応 */
    display:none;
}


/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
/*
    #gallery .innerBox {
        width: calc(80% + 10vw);
    }
*/
    #gallery iframe {
        height: 255vw;
    }
}

@media screen and (min-width:642px) and (max-width:768px) {
    #gallery iframe {
        height: 115vw;
    }
}

/* ////////// PC ////////// */
@media print,
screen and (min-width: 769px) {
/*
    #gallery .innerBox {
        width: calc(80% + 6vw);
        max-width: calc(960px + 4vw);
    }
*/
    #gallery iframe {
        height: 63vw;
    }
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
/*
    #gallery .innerBox {
        width: calc(80% + 32px);
    }
*/
    #gallery iframe {
        height: 120vw;
    }
}

@media screen and (min-width:1428px) {
    #gallery iframe {
        height: 900px;
    }
}

/*====================================================
     //id #concept
====================================================*/
#concept {
    background: url(../img/index/concept-bg.jpg) no-repeat center;
    background-size: cover;
    position: relative;
    min-height: 50vh;
}
/*
#concept:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(27, 50, 75, 0.5);
}
*/
#concept .innerBox{
/*    min-height: 100vh;*/
    position: relative;
    width: 80%;
/*    color: #fff;*/
}
#concept h2 {
    margin-bottom: 1em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
}

@media screen and (min-width:480px) and (max-width:768px) {
}

/* ////////// PC ////////// */
@media print,
screen and (min-width: 769px) {
    #concept .txtBox {
/*        font-size: 1.6rem;*/
        width: 60%;
        padding-right: 10px;
    }
/*
    #concept .txtBox .linkBtn {
        margin-left: 0;
    }
*/
    #concept .imgBox {
        margin: 0px 0 0 auto;
        width: 40%;
    }
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
}


/*====================================================
     //id #online
====================================================*/
#online .h2Box {
    font-size: 1.8rem;
    margin-bottom: 30px;
}
#online .linkBox a {
    margin: 20px 7px;
}
#online .linkBox a .imgBox {
    width: 100%;
}
#online .linkBox a ul {
    margin: .5em .8em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
    #online .linkBox .itemLink {
        width: calc(100% / 2 - 14px);
        margin: 10px 7px;
    }
}

@media screen and (min-width:480px) and (max-width:768px) {
    #online .linkBox .itemLink {
        width: calc(100% / 3 - 14px);
    }
    #online .linkBox .itemLink:last-child {
        display: none;
    }
}

/* ////////// PC ////////// */
@media print,
screen and (min-width: 769px) {
    #online .linkBox .itemLink {
        width: calc(100% / 5 - 14px);
    }
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
    #online .linkBox .itemLink {
        width: calc(100% / 3 - 14px);
    }
    #online .linkBox a:last-child {
        display: none;
    }
}

@media screen and (min-width:1200px) {
    #online .linkBox .itemLink {
        margin: 20px 10px;
        width: calc(100% / 5 - 20px);
    }
}
/*====================================================

====================================================*/
/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
}

@media screen and (min-width:480px) and (max-width:768px) {
}

/* ////////// PC ////////// */
@media print,
screen and (min-width: 769px) {
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
}



/*====================================================
     //class .start
====================================================*/

.start {
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
}
.start .imgBox {
	position: fixed;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	width: 90%;
    text-align: center;
}
.start .img-inner {
    position: relative;
    display: inline-block;
}
.start .img-inner .higeBox {
    position: absolute;
    content: '';
    display: block;
    width: 0px;
    height: 1px;
    background: #000;
    -webkit-transform-origin:left top 0;
    transform-origin:left top 0;
    -webkit-transition: 1s all;
            transition: 1s all;
}
.start .img-inner .higeBox.show {
    width: 1000px;
}
.start .img-inner .hige-left {
    left: 32.5%;
    top: 47.2%;
    -webkit-transform: rotate(-134.7deg);
    transform: rotate(-134.7deg);
}
.start .img-inner .hige-right {
    left: 37%;
    top: 52.9%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.start .img-inner .hige-1,
.start .img-inner .hige-2 {
    position: absolute;
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #000;
    -webkit-transform-origin:left top 0;
    transform-origin:left top 0;
}
.start .img-inner .hige-1 {
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
}
.start .img-inner .hige-2 {
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
}
.start h1 {
    color: #fff;
}
.start.fadeout {
    -webkit-transform: scale(2.0, 2.0,);
    transform: scale(2.0, 2.0,);
}