@charset "UTF-8";

html {
	min-width:375px;
	font-family:"M PLUS Rounded 1c", serif;
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	min-height:100%;
	position:relative;
	font-size:clamp(12px, calc(9.6px + 0.64vw), 16px);
	letter-spacing:0.05em;
	color:#333333;
	scroll-behavior:smooth;
	-webkit-overflow-scrolling: touch;
	overflow:visible;
}

body {
	min-height:100svh;
	height: -webkit-fill-available;
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing:content-box;

	display:-webkit-box;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	flex-direction:column;
}

body, .main {
 	width:100vw !important;
	height:100svh !important;
	margin:0;
	overflow:visible;
}

.bb-custom-wrapper {
 	width: 100vw !important;
 	height:100svh !important;
 	position: relative;
 	margin: 0 auto;
 	text-align: center;
 	overflow:hidden;
}

#bb-bookblock {
 	width: 100vw !important;
	overflow:hidden;
	height:100svh !important;
}

.bb-item, .bb-page {
	background-color:transparent !important;
	background-image:url(../img/bg_img.jpg);
	background-repeat:repeat;
	background-position:top left;
}

#bb-bookblock img{
	width:100vw;
	height:100svh;
	object-fit: contain;
}

.bb-custom-wrapper #main_nav {
	width:97%;
	max-width:680px;
	min-width:375px;
	height:auto;
	margin:0 auto;
	padding:clamp( 30px, calc( 18px + 3.2vw ), 50px ) 40px 20px;
	border-radius:20px;
	box-sizing:border-box;
	position:fixed;
	left:50%;
	transform:translateX(-50%);
	bottom:16px;
	z-index:100000;
	background-color:#333333;
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	align-items: center;
	opacity:0.8;
}

#bb-nav-prev {
	width:10vw;
	height:100svh;
	position:fixed;
	top:0;
	left:0;
	z-index:1000;
}

#bb-nav-prev img {
	width:clamp( 60px, calc( 24px + 9.6vw ), 120px );
	height:clamp( 60px, calc( 24px + 9.6vw ), 120px );
	position:fixed;
	top:50%;
	left:10px;
	transform:translateY(-50%);
	z-index:100000;
	opacity:0.8;
}

.left #bb-nav-prev {
	left:auto;
	right:0;
}

.left #bb-nav-prev img {
	left:auto;
	right:10px;
}

#bb-nav-next {
	width:10vw;
	height:100svh;
	position:fixed;
	top:0;
	right:0;
	z-index:1000;
}

#bb-nav-next img {
	width:clamp( 60px, calc( 24px + 9.6vw ), 120px );
	height:clamp( 60px, calc( 24px + 9.6vw ), 120px );
	position:fixed;
	top:50%;
	right:10px;
	transform:translateY(-50%);
	z-index:100000;
	opacity:0.8;
}

.left #bb-nav-next {
	left:0;
	right:auto;
}

.left #bb-nav-next img {
	left:10px;
	right:auto;
}

#bb-nav-prev:hover, #bb-nav-next:hover {
	opacity:1 !important;
}

#close img, #full img {
	width:100%;
	height:auto;
	opacity:0.8;
}

#page {
	width:auto !important;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	font-size:clamp( 20px, calc( 8px + 3.2vw ), 40px );
	color:#FFFFFF;
	transform:rotateZ(0.03deg);
}

#close {
	width:clamp( 60px, calc( 24px + 9.6vw ), 120px );
	height:clamp( 60px, calc( 24px + 9.6vw ), 120px );
	position:fixed;
	top:0;
	right:0;
	z-index:100000;
}

#full {
	width:clamp( 40px, calc( 16px + 6.4vw ), 80px );
	height:clamp( 40px, calc( 16px + 6.4vw ), 80px );
	position:fixed;
	top:10px;
	left:10px;
	z-index:100000;
}

.hide {
	display:none !important;	
}

.cnt_wrap {
	width:100vw;
	height:100svh;
	display: -webkit-box;
	display: flex !important;
	-webkit-box-align: center;
	align-items: center;
	flex-wrap: wrap;
}

#bb-bookblock .cnt_wrap.with_txt img {
	width:100vw;
	height:50vh;
	background-color:#FFFFFF;
	display:block !important;
}

#bb-bookblock .cnt_wrap.with_txt p {
	width:100vw;
	height:50svh;
	margin:0;
	padding:20px;
	box-sizing:border-box;
	line-height:2;
	display: -webkit-box;
	display: flex;
	transform:rotateZ(0.03deg);
	background-color:#FFFFFF;
	overflow-y:scroll;
}

.bb-custom-wrapper #main_nav div {
	width:clamp( 35px, calc( 14px + 5.6000000000000005vw ), 70px );
	height:clamp( 35px, calc( 14px + 5.6000000000000005vw ), 70px );
}

.bb-custom-wrapper #main_nav div img {
	width:100%;
	height:auto;
	display:block;
}

.left .bb-custom-wrapper #main_nav div:nth-of-type(1) {
	-webkit-box-ordinal-group:3;
	order:3;
}

.left .bb-custom-wrapper #main_nav div:nth-of-type(2) {
	-webkit-box-ordinal-group:2;
	order:2;
}

.left .bb-custom-wrapper #main_nav div:nth-of-type(3) {
	-webkit-box-ordinal-group:1;
	order:1;
}

#bb-nav-prev:hover, #bb-nav-next:hover, #close:hover {
	cursor:pointer;
}

.bb-custom-wrapper #main_nav div:hover, #full:hover {
	cursor:pointer;
}

.bb-custom-wrapper #main_nav div#page:hover {
	cursor:default;
}

#nav_area {
	position:fixed;
	bottom:0;
	width:100vw;
	height:clamp( 135px, calc( 114px + 5.6000000000000005vw ), 170px );
	z-index:2000;
}

#direction_area {
	min-width:170px;
	padding:clamp( 15px, calc( 0px + 4vw ), 40px );
	font-size:clamp( 14px, calc( 8px + 1.6vw ), 24px );
	border-radius:10px;
	background-color:#333333;
	position:fixed;
	top:50%;
	left:50%;
	transform: translateX(-50%) translateY(-50%);
	color:#FFFFFF;
	text-align:center;
	z-index:2000;
	opacity:0.8;
}

#direction_area span {
	margin:0 auto;
	padding:5px 0 5px clamp( 35px, calc( 29px + 1.6vw ), 45px );
	display:none;
	transform:rotateZ(0.03deg);
	background-repeat:no-repeat;
	background-size:clamp( 20px, calc( 14px + 1.6vw ), 30px ) auto;
	background-position:left center;
}

.right #direction_area span.right_cnt {
	display:inline-block;
	background-image:url(../img/right.png);
}

.left #direction_area span.left_cnt {
	display:inline-block;
	background-image:url(../img/left.png);
}

.right img.left_cnt {
	display:none !important;
}

.left img.right_cnt {
	display:none !important;
}

#cnt_recommend {
	min-width:375px;
	padding:40px 0;
	position:relative;
	overflow-x:hidden;
	overflow-y:auto;
}

#cnt_recommend .ttl {
	margin-top:0;
	margin-bottom:20px;
	font-size:clamp( 21px, calc( 14.399999999999999px + 1.76vw ), 32px );
	font-weight:bold;
	transform:rotateZ(0.03deg);
	color:#6B3A3E;
}

.recommend_img_wrap {
	padding:clamp(60px, calc(24px + 9.6vw), 120px) 0;
	background-image:url(../img/bg_crayon_ygreen01.png), url(../img/bg_crayon_ygreen02.png);
	background-repeat:repeat-x;
	background-size:contain;
	background-position:top center, bottom center;
}

.recommend_inner {
	padding-bottom:clamp( 20px, calc( -10px + 8vw ), 70px );
	background-color:#C3DF79;
}

#cnt_recommend ul, #cnt_recommend li {
	margin:0;
	padding:0;
	list-style:none;
}

#cnt_recommend li {
	width:clamp( 250px, calc( 184px + 17.599999999999998vw ), 360px );
	height:auto;
	margin-right:clamp( 10px, calc( 4px + 1.6vw ), 20px );
	aspect-ratio:1 / 1;
}

#cnt_recommend .work_img {
	width:100%;
	height:auto;
	padding:2.5%;
	box-sizing:border-box;
	aspect-ratio:1 / 1;
	background-image:url(../img/bg_work.png);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
}

#cnt_recommend .work_img img {
	width:100%;
	height:auto;
	aspect-ratio:1 / 1;
	object-fit:contain;
}

#cnt_recommend .btn_wrap {
	margin-top:clamp( 30px, calc( 24px + 1.6vw ), 40px );
	display:-webkit-box;
	display:flex;
	-webkit-box-pack:center;
	justify-content:center;
	transform:rotateZ(0.03deg);
}

#cnt_recommend .btn {
	width:clamp( 120px, calc( 72px + 12.8vw ), 200px );
	margin:0;
	padding:clamp( 12px, calc( 9.6px + 0.64vw ), 16px ) 0;
	display:block;
	font-size:clamp( 13px, calc( 11.2px + 0.48vw ), 16px );
	text-align:center;
	font-weight:bold;
	border:#E5636E 1px solid;
	border-radius:clamp( 8px, calc( 5.6px + 0.64vw ), 12px );
	background-color:#FBDEE0;
	text-decoration:none;
	transform:rotateZ(0.03deg);
	color:#E5636E;
}

#cnt_recommend .btn.top {
	margin-left:clamp( 10px, calc( 4px + 1.6vw ), 20px );
	border:#66C7C0 1px solid;
	background-color:#E6F6F5;
	color:#00A397;
}

#cnt_recommend .btn_wrap .btn.close {
	width:130px;
	margin-top:clamp( 30px, calc( 18px + 3.2vw ), 50px );
	padding:clamp( 10px, calc( 7.6px + 0.64vw ), 14px ) 0;
	font-size:clamp( 12px, calc( 10.8px + 0.32vw ), 14px );
	background-color:transparent;
	border:#6A3A3D 1px solid;
	border-radius:clamp( 8px, calc( 6.8px + 0.32vw ), 10px );
	color:#6A3A3D;
}

#indicator_wrap {
	padding:0 40px;
}

#indicator {
	width: calc(100% - 80px);
	max-width:600px;
	height:auto;
	aspect-ratio: 300 / 11;
	margin:0 auto;
	box-sizing:border-box;
	position:fixed;
	left:50%;
	transform:translateX(-50%);
	bottom:clamp( 65px, calc( 41.08418367346938px + 6.377551020408164vw ), 90px );
	z-index:100001;
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	align-items: center;
	opacity:1;
	background-image:url(../img/slide_bar.png);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
}

#indicator span {
	display: inline-block;
	width: 100%;
	height: clamp( 9px, calc( 1.2000000000000002px + 2.08vw ), 22px );
	cursor: pointer;
}

#indicator span.bb-current {
	background-image:url(../img/slide_btn.png);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
}

#indicator span:nth-of-type(1).bb-current {
	background-position:left center;
}

#indicator span:nth-last-of-type(1).bb-current {
	background-position:right center;
}

.slider_arrow_wrap {
	position:relative;
}

.slick-slider {
	position:static !important;
}

.slider {
	margin-left:20px !important;
}

.slide-arrow {
	width:clamp(40px, calc(28px + 3.2vw), 60px);
	height:clamp(40px, calc(28px + 3.2vw), 60px);
	display:block;
	position:absolute;
	bottom:calc(clamp( 50px, calc( 32px + 4.8vw ), 80px ) * -1);
	transform:translate(0, 0);
	cursor:pointer;
	z-index:100000;
}

.slide-arrow.slick-disabled {
	display:none !important;
}

.prev-arrow {
	right:51%;
	background-image:url(../img/arrow_work_left.png);
	background-repeat:no-repeat;
	background-size:contain;
}

.next-arrow {
	left:51%;
	background-image:url(../img/arrow_work_right.png);
	background-repeat:no-repeat;
	background-size:contain;
}


/* Only SP */
@media only screen and (max-width: 767px) {

#bb-nav-prev {
	width:20%;
}

#bb-nav-next {
	width:20%;
}

}

/* Only PC */
@media only screen and (min-width: 768px) {

.cnt_wrap {
	flex-wrap: nowrap;
}

#full:hover {
	opacity:0.6;
}

#bb-bookblock .cnt_wrap.with_txt img {
	width:50vw;
	height:auto;
}

#bb-bookblock .cnt_wrap.with_txt p {
	width:50vw;
	height:auto;
	-webkit-box-align: center;
	align-items: center;
}

#bb-nav-prev:hover, #bb-nav-next:hover, #close:hover {
	opacity:0.6;
}

.bb-custom-wrapper #main_nav div:hover {
	opacity:0.6;
}

.bb-custom-wrapper #main_nav div#page:hover {
	opacity:1;
}

#bb-nav-prev, #bb-nav-next {
	width:25vw;
}

#bb-nav-prev img:hover, #bb-nav-next img:hover {
	opacity:0.6 !important;
}

.recommend_img_wrap {
	padding:clamp(50px, calc(38px + 3.2vw), 70px) 0;
	background-repeat:repeat-x;
	background-size:750px auto;
	background-position:top center, bottom center;
}

.slider {
	overflow:visible;
	margin-left:calc(100% / 2 - 620px) !important;
}

.slick-list {
	overflow:visible !important;
}

a:hover, .slide-arrow:hover {
	animation-name:a-hover;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes a-hover {
    from{
    }
    to{
	opacity:0.6;
    }
}

a:hover img {
	animation-name:a-hover-img;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes a-hover-img {
    from{
    }
    to{
	opacity:0.6;
    }
}

#indicator {
	bottom:clamp( 90px, calc( -150px + 31.25vw ), 100px );
}

}