@font-face {font-family:auth;src:url('JosefinSans-Regular.ttf');}
@font-face {font-family:text;src:url('YesevaOne-Regular.ttf');}
@font-face {font-family:titl;src:url('BebasNeue-webfont.woff');}

.cnt,.bkg,.grain,.taki,.text {width:100%;height:100%;position:absolute;margin:0;padding:0;}
.cnt {top:2rem;left:2rem;width:calc(100% - 4rem);height:calc(100% - 4rem);position:absolute;}
/* original */
/*.bkg {background:linear-gradient(131deg, #3780a0, #5091a3);}*/
/* darker */
.bkg {background:linear-gradient(131deg, #105383, #5091a3);}
.grain {background-image:url('grain.png');opacity:0.1;z-index:1;background-size: auto; background-repeat: repeat; background-position: center;}
.taki {z-index:1;width:73%;height:83%;overflow:hidden;position:absolute;left:0;top:0;display:flex;justify-content:flex-end;align-items:center;}
.taki IMG {max-width:110vw;max-height:75vh;display:block;height:auto;}
.text {z-index:1;}
.tit {
	bottom:1rem;left:2rem;font-size:6.5rem;letter-spacing:7px;
	font-family:'titl',sans-serif;
	color:#f2e17e;
	text-shadow:-2px -2px 0 #000, 2px -2px 0 #000,-2px 2px 0 #000, 2px 2px 0 #000;
	position:absolute;
	font-weight:700;
	line-height:1.0;
}
.lgo {position:absolute;bottom:7.5rem;left:2rem;}
.lgo IMG {display:block;width:auto;height:100%;}
.subt {top:2rem;right:2rem;text-align:right;position:absolute;color:#ffe6ad;}
.desc {font-size:1.25rem;font-family:'text',serif;font-style:italic;line-height:1.0;margin-bottom:0.5rem;}
.auth {font-size:4.5rem;font-family:'auth',sans-serif;font-weight:900;line-height:1.0;}

.takibook { margin:0;background-color:#eaeade;}

/* laptop / desktop */

@media only screen and (max-width:960px){
	.tit {font-size:10vw;max-width:12rem;letter-spacing:4px;}
	.lgo {left:auto;right:1rem;bottom:1rem;top:auto;height:2.25rem;}
	.taki {width:90%;height:96%;}
	.taki IMG {max-height:67vh;}
}

/* column */
@media only screen and (min-height:768px) and (max-width:512px){
	.tit {font-size:6rem;max-width:14rem;letter-spacing:4px;}
	.taki {width:100%;height:84%;justify-content: center;}
	.taki IMG {max-height: 50vh;max-width: 98vw;}
}


/* banner front */
.banner-front {margin-bottom: 2rem;width:100%;}
.banner-front a {width:100%:display:block;}
.banner-front .takibook {width:100%;height:320px;position:relative;background-color:#eaeade;}
.banner-front .cnt {top:1.5rem;left:1.5rem;width:calc(100% - 3rem);height:calc(100% - 3rem);}
.banner-front .taki {width:84%;height:100%;}
.banner-front .taki IMG {max-height:100%;max-width:98vw;margin:0;width:auto;}
.banner-front .tit {bottom: 0.75rem;left:1.5rem;font-size: 5vw;letter-spacing: 8px;max-width: unset;}
.banner-front .lgo {height:2.5rem;top:1rem;bottom:auto;left:1.5rem;right:auto;}
.banner-front .subt {top:1rem;right:1rem;}
.banner-front .desc {font-size:1rem;}
.banner-front .auth {font-size:3.5rem;}

/* banner med */
@media only screen and (max-width:960px) {
	.banner-front .cnt {top:1rem;left:1rem;width:calc(100% - 2rem);height:calc(100% - 2rem);}
	.banner-front .taki {width:76%;}
	.banner-front .taki IMG {max-height:103%;max-width:50vw;}
	.banner-front .tit {left:1rem;bottom:0.5rem;font-size:7vw;max-width: min-content;text-shadow:-1px -1px 0 #000, 1px -1px 0 #000,-1px 1px 0 #000, 1px 1px 0 #000;}
	.banner-front .lgo {left:auto;right:1rem;bottom:1rem;top:auto;height:2.25rem;}
	.banner-front .desc {font-size:0.85rem;}
	.banner-front .auth {font-size:2.666rem;}
}
/* banner tight */
@media only screen and (max-width:767px) {
	.banner-front .taki {width:75%;}
	.banner-front .tit {font-size:4rem;}
	.banner-front .taki IMG {max-width:45vw;}
	.banner-front .lgo {height:1.75rem;}
}

/* sidebar */
.art-sidebar .takibook {height:80rem;position:relative;box-shadow: 2px 2px 4px #0006;}
.art-sidebar .cnt {top:1rem;left:1rem;width:calc(100% - 2rem);height:calc(100% - 2rem);}
.art-sidebar .taki {top:50%;height:auto;width:100%;}
.art-sidebar .taki IMG {max-width:98%;max-height:unset;margin:0;height:auto;width:auto;}
.art-sidebar .tit {font-size:7.5rem;line-height:1.1;top:4rem;left:1rem;bottom:auto;right:auto;width:auto;text-align:left;max-width:min-content;}
.art-sidebar .subt {right:1rem;bottom:1rem;left:auto;top:auto;text-align:right;}
.art-sidebar .lgo {top:1rem;left:1rem;right:auto;bottom:auto;height:2rem;}
.art-sidebar .desc {font-size:1.1rem;}
.art-sidebar .auth {font-size:4rem;}

@media only screen and (max-width:1679px) {
.art-sidebar .tit {font-size:6rem;}
}

@media only screen and (max-width:1199px) {
	.art-sidebar .takibook {height:64rem;}
	.art-sidebar .tit {font-size:5rem;text-shadow:-1px -1px 0 #000, 1px -1px 0 #000,-1px 1px 0 #000, 1px 1px 0 #000;}
}

@media only screen and (max-width:991px) {
	.art-sidebar .takibook {height:50rem;}
	.art-sidebar .tit {font-size:3.666rem;}
	.art-sidebar .taki {top:34%;}
}

@media only screen and (max-width:767px) {
	.art-sidebar .tit {font-size:5rem;}
	.art-sidebar .taki {top:0;height:100%;justify-content:center;}
}
/* tab */
@media only screen and (max-device-width:1024px) {
	.art-sidebar .takibook {height: 55rem;}
	.art-sidebar .tit {font-size:4rem;}
}

@media only screen and (orientation:landscape) and (max-device-width:767px) {
	.art-sidebar .takibook {height: 45rem;}
}
@media only screen and (orientation:landscape) and (max-device-height:481px) {
	.art-sidebar .taki {top:54%;}
}


/* devices */
/* tab */
@media only screen and (max-device-width:820px) {
	.banner-front .takibook {height: calc(100vh - 10.5rem);}
	.banner-front .taki {top:8%;height:auto;width:100%;justify-content:center;align-items:flex-start;}
	.banner-front .taki IMG {max-height:unset;max-width:98%;}
	.banner-front .cnt {top:1.5rem;left:1.5rem;width:calc(100% - 3rem);height:calc(100% - 3rem);}
	.banner-front .tit {max-width:min-content;font-size:7.5rem;bottom:1rem;left:2rem;}
	.banner-front .lgo {top:2rem;left:2rem;right:auto;bottom:auto;height:auto;}
	.banner-front .subt {bottom:1rem;right:2rem;top:auto;left;auto;}
	.banner-front .desc {font-size:1.25rem;}
	.banner-front .auth {font-size:4.5rem;}
}
/* large tab*/
@media only screen and (max-device-width:1024px) and (min-device-height:1280px) {
	.banner-front .cnt {top:2rem;left:2rem;width:calc(100% - 4rem);height:calc(100% - 4rem);}
	.banner-front .taki {}
	.banner-front .taki IMG {}
	.banner-front .tit {font-size:10rem;bottom: 1.5rem;left:2rem;max-width:min-content;}
	.banner-front .lgo {top:2rem;left:2rem;right:auto;bottom:auto;height:auto;}
	.banner-front .subt {bottom:2rem;right:2rem;top:auto;left;auto;}
	.banner-front .desc {font-size:1.5rem;}
	.banner-front .auth {font-size:6rem;}
}
/* mob */
@media only screen and (max-device-width:481px) {
	.art-sidebar .takibook,.banner-front .takibook {height: calc(100vh - 7.5rem);}
	.art-sidebar .takibook {margin-bottom:2rem;}
	.art-sidebar .cnt,.banner-front .cnt {top:1rem;left:1rem;width:calc(100% - 2rem);height:calc(100% - 2rem);}
	.art-sidebar .taki,.banner-front .taki {top:20%;height: auto;}
	.art-sidebar .taki IMG,.banner-front .taki IMG {max-height:40vh;}
	.art-sidebar .lgo,.banner-front .lgo {left:auto;right:1rem;bottom:1rem;top:auto;height:2.25rem;}
	.art-sidebar .tit,.banner-front .tit {bottom:0.5rem;left:1rem;top:auto;right:auto;max-width:12rem;font-size:4.5rem;letter-spacing:4px;}
	.art-sidebar .subt,.banner-front .subt {top:1rem;right:1rem;}
	.art-sidebar .desc,.banner-front .desc {font-size:1rem;}
	.art-sidebar .auth,.banner-front .auth {font-size:3.5rem;}
}
/* long mob */
@media only screen and (max-device-width:481px) and (min-device-height:800px) {
	.banner-front .tit {font-size:6rem;max-width:16rem;text-align:left;}
}

/* fix for iphone? */
@media only screen and (orientation:landscape) and (max-device-width:481px) {
.art-sidebar .takibook {height:55rem;}
.art-sidebar .taki {top:0;height:100%;justify-content:center}
.art-sidebar .taki IMG {max-width:98%;max-height:unset;}
}

/* landscape */
/* wide */
@media only screen and (orientation:landscape) and (max-device-width:1024px) {
.banner-front .takibook {height: calc(100vh - 10rem);}
.banner-front .tit {font-size:7rem;max-width:min-content;}
.banner-front .taki {width:82%;}
.banner-front .taki IMG {max-height:98%;}
}
/* regular */
@media only screen and (orientation:landscape) and (max-device-width:820px) {
	.banner-front .takibook {height:45rem;}
	.banner-front .taki {top:12%;}
	.banner-front .taki IMG {max-height:unset;max-width:98%;}
	.banner-front .tit {font-size:6.5rem;bottom:0.5rem;left:1rem;}
	.banner-front .lgo {left:1rem;right:auto;top:1rem;bottom:auto;height:2rem;}
	.banner-front .subt {bottom:0.5rem;right:1rem;top:auto;left;auto;}
	.banner-front .desc {font-size: 1rem;}
	.banner-front .auth {font-size: 3.5rem;}
}
/* tiny */
@media only screen and (orientation:landscape) and (max-device-width:600px) {
	.banner-front .takibook {height:40rem;}
	.banner-front .taki {top: 8%;}
}