/* このCSSは、indexhtmlのみ有効 */

@charset "UTF-8";

.forPC { display: block; }
.forSP { display: none; }
.imgPC { display: inline; }
.imgSP { display: none; }

/* turn.js用style */
* { cursor: pointer; }
body{
	overflow:hidden;
	background-color:#fcfcfc;
	margin:0;
	padding:0;
}

.flipbook-viewport{
	overflow:hidden;
	width:100%;
	height:100%;
    position: fixed;
    top: 0;
    left: 0;
}

.flipbook-viewport .flipcont{
	position:absolute;
	margin:auto;
}

.flipbook-viewport .flipbook{
	width:100%;
	height:100%;
}

.flipbook-viewport .page{
	width:100%;
	height:100%;
	background-color:white;
	background-repeat:no-repeat;
	background-size:100% 100%;
}

.flipbook .page{
    width:100%;
	height:100%;
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
	box-shadow:0 0 20px rgba(0,0,0,0.2);
}

.flipbook-viewport .page img{
    	width:100%;
	height:100%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin:0;
}

.flipbook-viewport .shadow{
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;

	-webkit-box-shadow:0 0 20px #ccc;
	-moz-box-shadow:0 0 20px #ccc;
	-o-box-shadow:0 0 20px #ccc;
	-ms-box-shadow:0 0 20px #ccc;
	box-shadow:0 0 20px #ccc;
}
.flip01 { background: url(../img/zero.jpg); }
.flip02 { background: url(../img/first01.png); }
.flip03         { background: #fff; transform: scale(1); }
.flip03.active  { opacity: 0; transition: all 10s linear; }

/* index.html style */
.opa { opacity: 1; transition: all .3s; text-decoration: none; }
.opa:hover { opacity: .6; transition: all .3s; }
.top_header { position: fixed; }
.l-header { position: fixed; top: 0; left: 0; }
.pageaction { opacity: 1; cursor: pointer; }
.pageaction:hover { opacity: 1; }
.container { width: 100%; height: 100%; position: fixed; }
.cont { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999999999; }
.cont a { color: #fff; width: 50px; height: 50px; border-radius: 50%; background: #000;  }
.cover { display: none; }
.cover.active { display: block; }
.lcel { width:160px; position: absolute; top: 6%; left: 3.8%; display: flex; justify-content: space-between; flex-direction: row; align-items: flex-start; opacity: 0; }
.lcel.active { opacity: 1; transition: all .6s linear; }
.lcel li:nth-child(1),.lcel li:nth-child(2) { opacity: 0; }
.lcel.active li:nth-child(1) { margin-top: -10px; animation: visible02 .6s linear forwards; animation-delay: .6s; }
.lcel.active li:nth-child(2) { animation: visible03 .6s linear forwards; animation-delay: 1.2s; }
.ccel { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-40%); opacity: 0; }
.ccel li { }
.ccel.active { animation: visible01 .6s linear forwards; }
.ccel li.logoarea { width: 515px; display: flex; justify-content: center; align-items: center; opacity: 0; }
.ccel li.logoarea.active { margin-bottom: -10%; animation: visible01 .6s linear forwards; }
.ccel li.logoarea a { transition: all .3s linear; opacity: 1; cursor: pointer; }
.ccel li.logoarea a:hover { transition: all .3s linear; opacity: .7; }
.ccel li.txtarea { display: flex; justify-content: center; align-items: center; flex-direction: row; margin-top: 85px; }
.ccel li.txtarea div { }
.ccel li.txtarea div+div { margin-left: 20px; }
.ccel li.txtarea div img { opacity: 0; }
.ccel li.txtarea.active div:nth-child(1) img { animation: visible04 .6s linear forwards; animation-delay: 1.8s; }
.ccel li.txtarea.active div:nth-child(2) img { animation: visible04 .6s linear forwards; animation-delay: 2.0s; }
.ccel li.txtarea.active div:nth-child(3) img { animation: visible04 .6s linear forwards; animation-delay: 2.2s; }
.ccel li.txtarea.active div:nth-child(4) img { animation: visible04 .6s linear forwards; animation-delay: 2.4s; }
.ccel li.txtarea.active div:nth-child(5) img { animation: visible05 .6s linear forwards; animation-delay: 2.6s; }
@keyframes visible01 {
    to { opacity: 1; margin-bottom: 0; }
}
@keyframes visible02 {
    to { opacity: 1; margin: 0; }
}
@keyframes visible03 {
    to { opacity: 1; margin: 0; }
}
@keyframes visible04 {
    to { opacity: 1; }
}
@keyframes visible05 {
    to { opacity: 1; }
}
@media only screen and (max-width: 768px) {
    
.forPC { display: none; }
.forSP { display: block; }  
.imgPC { display: none; }
.imgSP { display: inline; }    
    
/* このCSSは、indexhtmlのみ有効 */
.l-header { position: fixed; top: 0; left: 0; width: auto; min-width: auto; padding: 0; }
header .header-box .humberger { z-index:9999999999; }
.flip01 { background: url(../img/zerosp.jpg); }    
.flip02 { background: url(../img/first01sp.png); }
.opa { opacity: 1; }
.opa:hover { opacity: 1; }    
.container { width: 100%; height: 100%; position: fixed; }
.cont { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999999999; }
.cont a { color: #fff; width: 50px; height: 50px; border-radius: 50%; background: #000;  }
.cover { display: none; }
.cover.active { display: block; }
.lcel { width:5.3%; height: 21%; position: absolute; top: 30%; left: 50%; display: flex; justify-content: space-between; flex-direction: row; align-items: flex-start; opacity: 0; transform: translate(-50%,0%); }
.lcel li:nth-child(1) { width:100%; height: 100%; }
.lcel li:nth-child(1) img { width: 100%; height: 100%; object-fit: contain; }
.lcel.active { opacity: 1; transition: all .6s linear; }
.lcel li:nth-child(1),.lcel li:nth-child(2) { opacity: 0; }
.lcel.active li:nth-child(1) { margin-top: -10px; animation: visible02 .6s linear forwards; animation-delay: .6s; }
.ccel { width: 78.6%; position: absolute; top: 4.4%; left: 50%; transform: translate(-50%,0); opacity: 0; z-index:9999; }
.ccel li { }
.ccel.active { animation: visible01 .6s linear forwards; }
.ccel li.logoarea { width: 18.3%; display: flex; justify-content: center; align-items: center; margin: 0 auto; opacity: 0; }
.ccel li.logoarea.active { margin-bottom: -10%; animation: visible01 .6s linear forwards; }
.ccel li.logoarea a { transition: all .3s linear; opacity: 1; cursor: pointer; }
.ccel li.logoarea a:hover { transition: all .3s linear; opacity: .7; }
.ccel li.txtarea { display: flex; align-items: center; flex-direction: row; margin-top: 5%; }
.ccel li.txtarea div {
    /* min-width: 13%; */
    /* max-width: 16.9%; */
    min-height: 13%;
    max-height: 16.9%;
}
.ccel li.txtarea div img { width: 100%; height: 100%; vertical-align: bottom; }
.splcel { position: absolute; top: auto; bottom: 8.7%; left: 6%; opacity: 0; width: 15%; }
.splcel.active { animation: visible03 .6s linear forwards; animation-delay: 1.2s; }
.ccel li.txtarea div { }
.ccel li.txtarea div+div { margin-left: 4.7%; }
.ccel li.txtarea div img { opacity: 0; }   
.ccel li.txtarea.active div:nth-child(1) img { animation: visible04 .6s linear forwards; animation-delay: 1.8s; }
.ccel li.txtarea.active div:nth-child(2) img { animation: visible04 .6s linear forwards; animation-delay: 2.0s; }
.ccel li.txtarea.active div:nth-child(3) img { animation: visible04 .6s linear forwards; animation-delay: 2.2s; }
.ccel li.txtarea.active div:nth-child(4) img { animation: visible04 .6s linear forwards; animation-delay: 2.4s; }
.ccel li.txtarea.active div:nth-child(5) img { animation: visible05 .6s linear forwards; animation-delay: 2.6s; } 
@keyframes visible01 {
    to { opacity: 1; margin-bottom: 0; }
}
@keyframes visible02 {
    to { opacity: 1; margin: 0; }
}
@keyframes visible03 {
    to { opacity: 1; margin: 0; }
}
@keyframes visible04 {
    to { opacity: 1; }
}
@keyframes visible05 {
    to { opacity: 1; }
}    
}