@charset "utf-8";
body{
	background-color: #FFFDEF;
}
.section_area{
	width: 100%;
	position: relative;
	min-width: var(--vw-min);
}

/**/
.parallax{
    transition: transform .2s ease;
}
/*-----------------------------------------------
 * VISUAL
-------------------------------------------------*/
.visualArea{
	width: 100%;
	position: relative;
	padding: 0 0 110px;
	z-index: 2;
	transition: opacity .3s ease;
}
@media screen and (max-width:767px){ 
	.visualArea{
		width: 100%;
		position: relative;
		padding: 0 0 calc(68 / var(--vw-min) * 100vw);
	}
}
/* bg */
.visual__bg{
    pointer-events: none;
    position: absolute;
    width: min(calc(530 / var(--vw-min) * 100vw),530px);
    height: min(calc(420 / var(--vw-min) * 100vw),420px);
    top: 0;
    left: 0;
    background: url(../img/deco/bg_lefttop.png) no-repeat center top;
    background-size: 100% auto;
}
.visual__bg2{
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: min(calc(523 / var(--vw-min) * 100vw),523px);
    bottom: 0;
    top: calc(337 / var(--vw-min) * 100vw);
    background: url(../img/deco/bg_right.png) no-repeat right bottom;
    background-size: auto 100%;
    z-index: 1;
}
.visual__bg3{
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fffbe6;
    z-index: -2;
}
@media screen and (max-width:767px){ 
    .visual__bg{
        width: 100%;
        height: calc(1478 / var(--vw-min) * 100vw);
        background: url(../img/top/visual/visual_deco_sp.png) no-repeat center top;
        background-size: 100% auto;
    }
    .visual__bg2{
        display: none;
    }
}

/*visualArea__inner*/
.visualArea__inner{
	margin: 0 auto;
	z-index: 10;
	position: relative;
    padding: 80px 0 0 0;
}
@media screen and (max-width:767px){ 
	.visualArea__inner{
		width: 100%;
        display: flex;
        flex-direction: column-reverse;
        padding-top: calc(134 / var(--vw-min)* 100vw);
	}
}
/*-----------------
KV
------------------*/
/* KV */
.kv{
	position: relative;
    pointer-events: none;
}
@media screen and (max-width:767px){ 
    .kv{
       margin-bottom: calc(45 / var(--vw-min) * 100vw);
    }
}

/*  kvLists__item  */
.kvLists__item{
	width: calc(640 / var(--vw-min)* 100vw);
	/*height: calc(962 / var(--vw-min) * 100vw);*/
	margin: 0 auto;
	/*width: 49.78%;*/
	padding-top: 74.07%;
}
@media screen and (max-width:767px){ 
	.kvLists__item{
		padding-top: 0;
		width: calc(650 / var(--vw-min)* 100vw);
		height: auto;
	}
}
/* kv img */
.kv_img{
	width: 100%;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	/*opacity: 0;*/
	border-radius: 32px;
	overflow: hidden;
}
@media screen and (max-width:767px){ 
	.kv_img{
		position: relative;
		margin: unset;
		width: 100%;
		border-radius: calc(20 / var(--vw-min) * 100vw);
	}
}
/*
.kv_img.-fani1{
	opacity: 1;
	transition: all .4s ease;
}
*/
.kv_img img{
	width: 100%;
	height: auto;
}

/* kvLists */
/*
.kvLists .swiper-slide-active{
	width: 49.78%;
}
.kvLists .swiper-slide-prev .kv_img,
.kvLists .swiper-slide-next .kv_img{
	width: 304px;
}
.kvLists .swiper-slide-next .kv_img{
	top: unset;
	bottom: 0;
}

@media screen and (max-width:767px){ 
	.kvLists .swiper-slide-active{
		width: calc(590 / var(--vw-min)* 100vw);
	}
	.kvLists .swiper-slide-prev{
		padding-right:calc(40 / var(--vw-min) * 100vw);
		display: flex;
		justify-content: flex-end;
        align-items: flex-start;
	}
	.kvLists .swiper-slide-next{
		display: flex;
		align-items: flex-end;
		padding-left:calc(40 / var(--vw-min) * 100vw);
	}
	.kvLists .swiper-slide-prev .kv_img,
	.kvLists .swiper-slide-next .kv_img{
		width: calc(326 / var(--vw-min) * 100vw);
	}
}
*/


/* change btn  */
.kv__changeBtn-listsBox{
	position: absolute;
	top: 40px;
	right: 250px;
	z-index: 10;
}
.kv__changeBtn-lists{
	display: flex;
	flex-direction: column;
}
.kv__changeBtn-listsItem{
	position: relative;
	margin-bottom: 8px;
}
.changeBtn-img{
	width: 72px;
	height: 72px;
	border-radius: 50px;
	border: 2px solid var(--color-brown);
	background-color: #FFF;
	padding: 2px;
}
.changeBtn-img_inner{
	border-radius: 50px;
	height: 100%;
	display: flex;
	overflow: hidden;
}
div svg {
	overflow: visible;
}
div path {
	fill: none;
}
div text{
	fill:var(--color-brown);
	font-size: 14px;
}
.changeBtn-listsItem-text{
	position: absolute;
	top: 0;
	bottom: 0;
	right: -3px;
	font-size: 14px;
	font-weight: 900;
	pointer-events: none;
}
.kv_changeBtn01 .changeBtn-img_inner{
	background: url(../img/top/kvbtn_visual1.jpg) no-repeat center center / cover;
}
.kv_changeBtn02 .changeBtn-img_inner{
	background: url(../img/top/kvbtn_visual2.jpg) no-repeat center center / cover;
}

/* KV > overWrap */
.kv_overWrap{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
}
.kv_overWrap__inner{
    width: 100%;
    height: 100vh;
    min-height: calc(600 / var(--vw-min) * 100vw);
    position: sticky;
    top: 0;
    left: 0;
}
@media screen and (max-width:767px){ 
    .kv_overWrap{
        position: relative;
        height: unset;
        top: unset;
        display: flex;
    }
    .kv_overWrap__inner{
        width: 100%;
        height: auto;
        min-height: unset;
        position: relative;
    }
}

/* visual > deco  */
.decoWrap{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    z-index: 10;
    pointer-events: none;
}
.decoWrap__inner{
    width: 100%;
    height: 100vh;
    min-height: calc(600 / var(--vw-min) * 100vw);
    position: sticky;
    top: 0;
    left: 0;
}
.deco_img{
    position: absolute;
}
@media screen and (max-width:767px){ 
    .decoWrap__inner{
        min-height: unset;
        position: absolute;
    }
}

/* visual > deco*/
.deco_b{
    width: calc(63 / var(--vw-min) * 100vw);
    height: calc(57 / var(--vw-min) * 100vw);
    background: url(../img/deco/deco_b.png) no-repeat center center/contain;
    right: calc(115 / var(--vw-min) * 100vw);
    top: calc(93 / var(--vw-min) * 100vw);
    animation: fuwafuwa 3s ease-in-out infinite alternate-reverse;
}
.deco_f{
    width: calc(45 / var(--vw-min) * 100vw);
    height: calc(72/ var(--vw-min) * 100vw);
    background: url(../img/deco/deco_f.png) no-repeat center center/contain;
    left: calc(198 / var(--vw-min) * 100vw);
    bottom: calc(0 / var(--vw-min) * 100vw);
    animation: shake 3s infinite;
    transform-origin: center bottom;
}
.deco_c{
    width: calc(50 / var(--vw-min) * 100vw);
    height: calc(44 / var(--vw-min) * 100vw);
    background: url(../img/deco/deco_c.png) no-repeat center center/contain;
    right: calc(50 / var(--vw-min) * 100vw);
    bottom: calc(250/ var(--vw-min) * 100vw);
    animation: fuwafuwa2 3s ease-in-out infinite alternate;
}
.deco_s{
    width: calc(47 / var(--vw-min) * 100vw);
    height: calc(57 / var(--vw-min) * 100vw);
    background: url(../img/deco/deco_s.png) no-repeat center center/contain;
    left: calc(78 / var(--vw-min) * 100vw);
    top: calc(65 / var(--vw-min) * 100vw);
    animation: fuwafuwa 3s ease-in-out infinite alternate;
}
@media screen and (max-width:767px){ 
    .deco_b{
        width: calc(85 / var(--vw-min) * 100vw);
        height: calc(77 / var(--vw-min) * 100vw);
        background: url(../img/deco/deco_b.png) no-repeat center center/contain;
        right: calc(10 / var(--vw-min) * 100vw);
        top: calc(676 / var(--vw-min) * 100vw);
    }
    .deco_f{
        width: calc(65 / var(--vw-min) * 100vw);
        height: calc(116 / var(--vw-min) * 100vw);
        background: url(../img/deco/deco_f.png) no-repeat center center/contain;
        left: calc(5 / var(--vw-min) * 100vw);
        top: calc(950 / var(--vw-min) * 100vw);
        bottom: unset;
    }
    .deco_c{
        width: calc(50 / var(--vw-min) * 100vw);
        height: calc(44 / var(--vw-min) * 100vw);
        right: calc(50 / var(--vw-min) * 100vw);
        bottom: calc(169/ var(--vw-min) * 100vw);
    }
    .deco_s{
        width: calc(59 / var(--vw-min) * 100vw);
        height: calc(72 / var(--vw-min) * 100vw);
        left: calc(40 / var(--vw-min) * 100vw);
        top: calc(40 / var(--vw-min) * 100vw);
    }
}
@media screen and (max-width:767px){ 
    .visualArea .deco_c{
       display: none;
    }
}

/* siteTtl */
.siteTtlWrap{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
.siteTtl__img{
    display: block;
    width: min(calc(130 / var(--vw-min) * 100vw),130px);
    height: min(calc(304 / var(--vw-min) * 100vw),304px);
    width:calc(130 / var(--vw-min) * 100vw);
    height: calc(304 / var(--vw-min) * 100vw);
    background-color: var(--color-pink);
    -webkit-mask: url(../img/logo_tate.png) no-repeat center center / contain;
    mask: url(../img/logo_tate.png) no-repeat center center / contain;
}
.siteTtl{
    display: block;
    margin-left: calc(60 / var(--vw-min) * 100vw);
    filter:
    drop-shadow(2px 0 0 #fffbe6)
    drop-shadow(-2px 0 0 #fffbe6)
    drop-shadow(0 2px 0 #fffbe6)
    drop-shadow(0 -2px 0 #fffbe6)
    drop-shadow(2px 2px 0 #fffbe6)
    drop-shadow(-2px 2px 0 #fffbe6)
    drop-shadow(2px -2px 0 #fffbe6)
    drop-shadow(-2px -2px 0 #fffbe6);
}
@media screen and (max-width:767px){ 
    .siteTtlWrap{
        flex-direction: column;
        height: auto;
        margin-bottom: calc(50 / var(--vw-min) * 100vw);
    }
    .siteTtl__img{
        width: calc(532 / var(--vw-min) * 100vw);
        height:calc(107 / var(--vw-min) * 100vw);
        -webkit-mask: url(../img/logo_yoko.png) no-repeat center center / contain;
        mask: url(../img/logo_yoko.png) no-repeat center center / contain;
    }
    .siteTtl{
         margin-left:0;
         filter:
    drop-shadow(1px 0 0 #fffbe6)
    drop-shadow(-1px 0 0 #fffbe6)
    drop-shadow(0 1px 0 #fffbe6)
    drop-shadow(0 -1px 0 #fffbe6)
    drop-shadow(1px 1px 0 #fffbe6)
    drop-shadow(-1px 1px 0 #fffbe6)
    drop-shadow(1px -1px 0 #fffbe6)
    drop-shadow(-1px -1px 0 #fffbe6);
     }
}

/* cmtBtn */
.kv_cmtBtn{
    position: absolute;
    bottom: calc(30 / var(--vw-min) * 100vw);
    right:calc(20 / var(--vw-min) * 100vw);
    transition: all .3s ease;
    z-index: 10;
}
@media screen and (min-width: 769px) {
    .kv_cmtBtn:hover{
        transform: scale(1.1) rotate(5deg);
    }
}
.kv_cmtBtn__link{
    display: flex;
    text-decoration: none;
    width: calc(209 / var(--vw-min) * 100vw);
    height: calc(71 / var(--vw-min) * 100vw);
    align-items: center;
    justify-content: center;
}
.kv_cmtBtn__txt{
    color: #FFF;
    position: relative;
    z-index:   5;
    text-align: center;
    line-height: 1;
    font-weight: 600;
    font-size:calc(17 / var(--vw-min) * 100vw);
    transform: rotate(-2.5deg);
    padding-bottom: calc(15 / var(--vw-min) * 100vw);
    padding-right: calc(35 / var(--vw-min) * 100vw);
    padding-left: calc(15 / var(--vw-min) * 100vw);
}
.kv_cmtBtn__fukidashi{
    display: block;
    width: 100%;
    height: 100%;
    background-color: #FFF;
    -webkit-mask: url(../img/top/visual/vis_fukidashi.png) no-repeat center center / contain;
    mask: url(../img/top/visual/vis_fukidashi.png) no-repeat center center / contain;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
}
.kv_cmtBtn__link::after{
    display: block;
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #5084c4;
    -webkit-mask: url(../img/top/visual/vis_fukidashi.png) no-repeat center center / contain;
    mask: url(../img/top/visual/vis_fukidashi.png) no-repeat center center / contain;
    position: absolute;
    right: calc(6 / var(--vw-min) * 100vw);
    bottom: calc(6 / var(--vw-min) * 100vw);
}
.kv_cmtBtn__img{
    position: absolute;
    z-index: 5;
    left: calc(-30 / var(--vw-min) * 100vw);
    top: calc(-24 / var(--vw-min) * 100vw);
    width: calc(60 / var(--vw-min) * 100vw);
    height:calc(60 / var(--vw-min) * 100vw);
    border-radius: 50%;
    border: calc(3 / var(--vw-min) * 100vw) solid #5084c4;
    background: url(../img/top/visual/vis_fukidashi_img.jpg) no-repeat center center / contain;
}
@media screen and (max-width:767px){ 
    .kv_cmtBtn{
        position: relative;
        bottom: unset;
        right: unset;
        width: calc(580 / var(--vw-min) * 100vw);
        margin: 0 auto;
    }
    .kv_cmtBtn__link{
        width: 100%;
        height: calc(150 / var(--vw-min) * 100vw);
        padding-left: calc(75 / var(--vw-min) * 100vw);
    }
    .kv_cmtBtn__txt{
        font-size: calc(30 / var(--vw-min) * 100vw);
        padding-right: calc(60 / var(--vw-min) * 100vw);
        padding-left: calc(30 / var(--vw-min) * 100vw);
        padding-bottom: 0;
        margin-bottom: calc(15 / var(--vw-min) * 100vw);
        transform: rotate(-3.5deg);
    }
    .kv_cmtBtn__link::after,
    .kv_cmtBtn__fukidashi{
        left: unset;
        right: 0;
        width: calc(524 / var(--vw-min) * 100vw);
        height:  calc(150 / var(--vw-min) * 100vw);
        -webkit-mask: url(../img/top/visual/vis_fukidashi_sp.png) no-repeat center center / contain;
        mask: url(../img/top/visual/vis_fukidashi_sp.png) no-repeat center center / contain;
    }
    .kv_cmtBtn__fukidashi::after{
        right: calc(10 / var(--vw-min) * 100vw);
        bottom: calc(10 / var(--vw-min) * 100vw);
    }
    .kv_cmtBtn__img{
        position: absolute;
        left: 0;
        top: calc(-24 / var(--vw-min) * 100vw);
        width: calc(126 / var(--vw-min) * 100vw);
        height:calc(126 / var(--vw-min) * 100vw);
        border: calc(6 / var(--vw-min) * 100vw) solid #5084c4;
    }
}
/* kv_cmtBtn > arrowBtn */
.kv_cmtBtn .arrowBtn{
    width: calc(20 / var(--vw-min) * 100vw);
    height: calc(20 / var(--vw-min) * 100vw);
    background-color: #FFF;
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(5 / var(--vw-min) * 100vw);
}
.kv_cmtBtn .arrowBtn span{
    background-color: var(--color-blue);
}
@media screen and (max-width:767px){ 
.kv_cmtBtn .arrowBtn{
    width: calc(46 / var(--vw-min) * 100vw);
    height: calc(46 / var(--vw-min) * 100vw);
    right: 0;
    margin: auto;
}
.kv_cmtBtn .arrowBtn span{
    background-color: var(--color-blue);
}
}


/* cmtBtn movie */
.kv_cmtBtn.kv_movieBtn{
    position: absolute;
    bottom: calc(150 / var(--vw-min) * 100vw);
    right:calc(20 / var(--vw-min) * 100vw);
    transition: all .3s ease;
    z-index: 10;
}
@media screen and (max-width:767px){ 
    .kv_cmtBtn.kv_movieBtn{
        position: relative;
        bottom: unset;
        right: unset;
        width: calc(580 / var(--vw-min) * 100vw);
        margin: 0 auto calc(40 / var(--vw-min) * 100vw);
    }
}
.kv_cmtBtn.kv_movieBtn .kv_cmtBtn__img{
    border: calc(3 / var(--vw-min) * 100vw) solid  var(--color-purple);
    background: url(http://img.youtube.com/vi/BGa9_xVMaEY/sddefault.jpg) no-repeat center center / 200% auto;
}
.kv_cmtBtn.kv_movieBtn .kv_cmtBtn__img::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width:calc(30 / var(--vw-min) * 100vw);
    height:calc(20 / var(--vw-min) * 100vw);
    background-color:var(--color-purple);
    -webkit-mask:  url(../img/common/icon/ic_triangle.svg) no-repeat center center / contain;
    mask:  url(../img/common/icon/ic_triangle.svg) no-repeat center center / contain;
}
.kv_cmtBtn.kv_movieBtn .kv_cmtBtn__link::after{
    background-color: var(--color-purple);
}
.kv_cmtBtn.kv_movieBtn .arrowBtn span {
    background-color: var(--color-purple);
}


@media screen and (max-width:767px){ 
    .kv_cmtBtn.kv_movieBtn{
        position: relative;
        bottom: unset;
        right: unset;
        width: calc(580 / var(--vw-min) * 100vw);
        margin: 0 auto calc(60 / var(--vw-min) * 100vw);
    }
    .kv_cmtBtn.kv_movieBtn .kv_cmtBtn__link {
        padding-left: 0;
        padding-right: calc(75 / var(--vw-min) * 100vw);
    }
    .kv_cmtBtn.kv_movieBtn .kv_cmtBtn__link::after,
    .kv_cmtBtn.kv_movieBtn .kv_cmtBtn__fukidashi{
        transform: scaleX(-1);
        left: 0;
        right: unset;
    }
    .kv_cmtBtn.kv_movieBtn .kv_cmtBtn__txt {
        transform: rotate(3.5deg);
    }
    .kv_cmtBtn.kv_movieBtn .kv_cmtBtn__img {
        right: 0;
        left: unset;
        border: calc(6 / var(--vw-min) * 100vw) solid var(--color-purple);
    }
    .kv_cmtBtn.kv_movieBtn .kv_cmtBtn__img::after{
        width:calc(60 / var(--vw-min) * 100vw);
        height:calc(40 / var(--vw-min) * 100vw);
    }

}


/* KV > scrollBtn */
.scrollBtn{
    position: absolute;
    bottom:calc(30 / var(--vw-min) * 100vw);
    left: calc(30 / var(--vw-min) * 100vw);
    display: flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
}
@media screen and (max-width:767px){ 
    .scrollBtn{
        display: none;
    }
}
.scrollBtn__txt{
    display: block;
    font-size: calc(14 / var(--vw-min) * 100vw);
    font-weight: 600;
    margin-left: calc(10 / var(--vw-min) * 100vw);
}
.scrollBtn__arrow{
	width: calc(50 / var(--vw-min) * 100vw);
	height: calc(50 / var(--vw-min) * 100vw);
	background-color: var(--color-blue);
	border-radius: 50px;
	display: flex;
    align-items: center;
    justify-content: center;
	cursor: pointer;
    transition: opacity .3s ease;
	z-index: 50;
}
.scrollBtn__arrow span{
	display: flex;
	background-color: #FFF;
	width: calc(13 / var(--vw-min) * 100vw);
	height: calc(21 / var(--vw-min) * 100vw);
	-webkit-mask: url(../img/common/icon/ic_arrow_btm.png) no-repeat center center/ contain;
	mask: url(../img/common/icon/ic_arrow_btm.png) no-repeat center center/ contain;
    animation: arrowmove 0.6s ease-in-out infinite alternate-reverse;
    position: relative;
    transition: all .4s ease;
}
@keyframes arrowmove{
    0% {
        transform: translateY(-10%);
      }
      100% {
        transform: translateY(10%);
      }
 }
 
/*hover*/
.scrollBtn:hover .scrollBtn__arrow span{
	animation: arrowBtn_hv_btm .4s ease;
}
@keyframes arrowBtn_hv_btm {
	0%{
		opacity: 1;
		transform: translateY(0);
	}
	40%{
		opacity: 0;
		transform: translateY(100%);
	}
	80%{
		opacity: 0;
		transform: translateY(-100%);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}

/* catch */
.catchImgWrap{
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    flex-direction: row-reverse;
    justify-content: space-between;
    padding: 45px 24px;
}
@media screen and (max-width:767px){
    .catchImgWrap{
        padding: calc(50 / var(--vw-min) * 100vw) calc(30 / var(--vw-min) * 100vw);
    }
}
.catchImg{
    opacity: 0;
}
.catchImg._catch1{
    background: url(../img/top/visual/vis_catch1.png) no-repeat center center / contain;
    width: calc(54 / var(--vw-min) * 100vw);  
    height: calc(453 / var(--vw-min) * 100vw); 
    filter: blur(10px); 
    transform: scale(1.5);
    transition: transform .3s ease,filter .6s ease, opacity .2s ease;
}
@media screen and (max-width:767px){
    .catchImg._catch1{
        width: calc(45 / var(--vw-min) * 100vw);  
        height: calc(460 / var(--vw-min) * 100vw); 
    }
}
.catchImg._catch2{
    background: url(../img/top/visual/vis_catch2.png) no-repeat center center / contain;
    width: calc(54 / var(--vw-min) * 100vw);  
    height: calc(401 / var(--vw-min) * 100vw);
    filter: blur(30px); 
    transition: opacity .8s ease,filter 2s ease;
}
@media screen and (max-width:767px){
    .catchImg._catch2{
        width: calc(37 / var(--vw-min) * 100vw);
        height: calc(373 / var(--vw-min) * 100vw); 
    }
}
.catchImg._catch3{
    background: url(../img/top/visual/vis_catch3.png) no-repeat center center / contain;
    width: calc(68 / var(--vw-min) * 100vw);  
    height: calc(423 / var(--vw-min) * 100vw); 
    filter: blur(10px); 
    transform: scale(1.5);
    transition: transform .3s ease,filter .6s ease, opacity .2s ease;
}
@media screen and (max-width:767px){
    .catchImg._catch3{
        width: calc(70 / var(--vw-min) * 100vw);
        height: calc(430 / var(--vw-min) * 100vw); 
    }
}
/* ani */
.is-view .catchImg._catch1,
.is-view .catchImg._catch3{
    filter: blur(0); 
    transform: scale(1);
    opacity: 1;
}
.is-view .catchImg._catch2{
    filter: blur(0); 
    opacity: 1;
    transition-delay: .6s;
}

/*-----------------------------------------------
 * TOP CONTENTS COMMON
-------------------------------------------------*/
/* main */
.main__Contents{
	width: 100%;
	position: relative;
	z-index: 1;
	transition: opacity .3s ease;
}

 /* area__inner */
 .area__inner{
	width: min( calc(1040 / var(--vw-min) * 100vw),1040px);
	margin: 0 auto;
	padding-top: 48px;
    position: relative;
    z-index: 10;
}
@media screen and (max-width:767px){
    .area__inner{
        width:100%;
        padding-top: 48px;
    }
}

 /* section__ttl */
.section__ttl{
    font-weight: 900;
}
.ttl_en{
	display: block;
    letter-spacing: 0.1em;
    font-size: 20px;
}
.ttl_jp{
    font-size: 40px;
    letter-spacing: 0.012em;
}
@media screen and (max-width:767px){
    .ttl_en{
        font-size: calc(30 / var(--vw-min) * 100vw);
        margin-bottom: calc(24 / var(--vw-min) * 100vw);
    }
    .ttl_jp{
        font-size: calc(60 / var(--vw-min) * 100vw);
    }
}

/*-----------------------------------------------
 * NEWS
-------------------------------------------------*/
.newsArea{
    margin-top: calc(-230 / var(--vw-min)* 100vw);
	padding-top:calc(370 / var(--vw-min)* 100vw);
	padding-bottom: calc(370 / var(--vw-min)* 100vw);
    position: relative;
}
@media screen and (max-width:767px){ 
    .newsArea{
        margin-top: calc(-230 / var(--vw-min)* 100vw);
		padding-top: calc(350 / var(--vw-min) * 100vw);
        padding-bottom: calc(370 / var(--vw-min)* 100vw);
    }
}

/* bg */
.news__bg{
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background-image: url(../img/top/news/news_bg_top.png),url(../img/top/news/news_bg_btm.png);
    background-position: center top , center bottom;
    background-repeat: no-repeat,no-repeat;
    background-size: 100% auto, 100% auto;
}
@media screen and (max-width:767px){ 
    .news__bg{
        background-image: url(../img/top/news/news_bg_top_sp.png),url(../img/top/news/news_bg_btm_sp.png);
    }
}
/* deco */
.news__decoTxt{
    position: absolute;
    pointer-events: none;
    top:calc(470 / var(--vw-min) * 100vw);
    right:0;
    height: max(calc(244 / var(--vw-min) * 100vw),244px);
    width: max(calc(877 / var(--vw-min) * 100vw),877px);
    background: url(../img/top/news/deco_title_txt.svg) no-repeat left top;
    background-size: 100% auto;
    z-index: 1;
}
@media screen and (max-width:767px){ 
    .news__decoTxt{
       display: none;
    }
}
/* deco ani */
.news__decoTxt.js-scrani{
    opacity: 0;
    transition: transform .6s ease, opacity .4s ease;
}
.news__decoTxt.js-scrani.is-ani{
    opacity: 1;
}

/* newsArea__inner */
.newsArea__innerWrap{
    background-color: var(--color-orange);
    position: relative;
}
.newsArea .area__inner{
	width: min( calc(1040 / var(--vw-min) * 100vw),1040px);
	margin: 0 auto;
	padding-top: 48px;
}
@media screen and (max-width:767px){ 
	.newsArea .area__inner{
		width: 100%;
		padding: 0 calc(60 / var(--vw-min) * 100vw) 0 calc(24 / var(--vw-min) * 100vw);
	}
}

/* news__listsBlockWrap */
/*
.news__listsBlockWrap{
	opacity: 0;
}
.news__listsBlockWrap.is-ani {
	animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: .4s;
}
    */
@media screen and (max-width:767px){ 
    .news__BlockWrap{
        padding-top: calc(120 / var(--vw-min) * 100vw);
    }
}

/* news > ttl */
@media screen and (max-width:767px){ 
    .news__ttlBlock{
        position: absolute;
        top: calc(-50 / var(--vw-min) * 100vw);
    }
}
.news__ttl{
	margin-bottom:56px;
	display: flex;
	flex-direction: column;
}
.news__ttl .ttl_en{
    color: #FFF;
}
.news__ttl .ttl_jp{
    color: var(--color-main);
}
@media screen and (max-width:767px){ 
	.news__ttl{
		padding: 0 calc(30 / var(--vw-min) * 100vw);
        align-items: flex-start;
        margin-bottom: calc(60 / var(--vw-min) * 100vw);
	}
	.news__ttl_en{
		width: calc(294 / var(--vw-min) * 100vw);
		height: calc(96 / var(--vw-min) * 100vw);
		margin-bottom: calc(20 / var(--vw-min) * 100vw);
	}
	.news__ttl_jp{
		width: calc(122 / var(--vw-min) * 100vw);
		height: calc(42 / var(--vw-min) * 100vw);
	}
}

/* news > moreBtn */
.news__moreBtnWrap{
    margin-top: 20px;
	display: flex;
    justify-content: flex-end;
}
.news__moreBtn{
	width: 256px;
	height: 56px;
}
.news__moreBtn_txt{
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.008em;
}
/* hover */
@media screen and (min-width: 769px) {
    .news__moreBtn:hover{
        color:#FFF;
        cursor: pointer;
        background-color: var(--color-pink);
    }
}
@media screen and (max-width:767px){ 
    .news__moreBtnWrap{
        margin-top: 0;
    }
	.news__moreBtn{
		width: calc(400 / var(--vw-min) * 100vw);
		height: calc(96 / var(--vw-min) * 100vw);
		margin: calc(30 / var(--vw-min) * 100vw) auto 0;
	}
	.news__moreBtn_txt{
		font-size: calc(28 / var(--vw-min) * 100vw);
	}
}
.linkBtn.news__moreBtn .arrowBtn{
    left: unset;
    right: 15px;
    background-color: var(--color-orange);
}

/* newsLists */
.newsLists{
	margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
@media screen and (max-width:767px){ 
	.newsLists{
		width: 100%;
        flex-direction: column;
        align-items: flex-end;
	}
}

/* newsLists_item */
.newsLists__item {
    margin-right: 55px;
    transition: all .3s ease;
    position: relative;
    width: calc((100% - 110px) / 3);
}
.newsLists__item:last-child {
    margin-right: 0;
}
.newsLists__item:nth-child(2) {
    margin-top: 67px;
}
.newsLists__item__inner{
    width: calc((100% - 8px));
	position: relative;
}
.newsLists__item__inner a{	
	color: #000;
	width: 100%;
	display: block;
	text-decoration: none;
	position: relative;
	transition: all .4s ease;
	padding: 28px 30px 28px 30px;
    min-height: 220px;
    background-color: #FFF;
    border-radius: 20px;
}
.newsLists__item__inner::before {
    border-radius: 20px;
    transition: none;
    background-color: #fac03d;
    height: 100%;
    width: 100%;
    content: "";
    position: absolute;
    z-index: -1;
    right: -8px;
    bottom: -8px;
}
@media screen and (max-width:767px){ 
    .newsLists__item {
        margin-right: 0;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 30px;
    }
    .newsLists__item:nth-child(2) {
        margin-top: unset;
    }
    .newsLists__item__inner{
        width: calc(595 / var(--vw-min) * 100vw);
        min-height: calc(220 / var(--vw-min) * 100vw);
        padding: 0;
    }
	.newsLists__item__inner a{
		width: 100%;
		height: auto;
        padding:calc(30 / var(--vw-min) * 100vw) calc(60 / var(--vw-min) * 100vw) calc(30 / var(--vw-min) * 100vw) calc(110 / var(--vw-min) * 100vw);
        min-height: calc(220 / var(--vw-min) * 100vw);
        border-radius: calc(20 / var(--vw-min) * 100vw);
	}
    .newsLists__item__inner::before {
        border-radius:calc(20 / var(--vw-min) * 100vw);
        right: calc(-6 / var(--vw-min) * 100vw);
        bottom: calc(-6 / var(--vw-min) * 100vw);
    }
}

/* hover */
@media screen and (min-width:768px){ 
    .newsLists__item:hover{
        transform: translateY(-8px);    
    }
}

/* item */
.item_time{
	display: block;
	padding: 0;
	line-height: 1;
	font-weight: 600;
	color: #f07c63;
    margin-bottom: 30px;
}
.time_head_block{
	display: flex;
	margin-bottom: calc(5 / var(--vw-min) * 100vw);
	letter-spacing: 0;
}
.time_y{
	font-size: 16px;
	display: inline-block;
	margin-right:0;
}
.time_date{
	font-size: 16px;
	letter-spacing: 0;
}
.item_title{
	font-weight: 600;
	font-size: 16px;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	color: #000;
}
@media screen and (max-width:767px){ 
	.item_time{
		display: flex;
		flex-direction: column;
		padding: calc(5 / var(--vw-min) * 100vw) calc(16 / var(--vw-min) * 100vw) calc(5 / var(--vw-min) * 100vw) 0;
        margin-bottom: calc(15 / var(--vw-min) * 100vw) ;
	}
	.time_head_block{
		margin-bottom: calc(5 / var(--vw-min) * 100vw);
		letter-spacing: 0;
	}
	.time_y{
		font-size: calc(22 / var(--vw-min) * 100vw);
	}
	.time_date{
		font-size: calc(32 / var(--vw-min) * 100vw);
		letter-spacing: 0;
	}
	.item_title{
		font-size: calc(24 / var(--vw-min) * 100vw);
		-webkit-line-clamp: 3;
	}
}

/* news > thumb */
.item_thumb{
    width: 109px;
    height: 109px;
    border: 4px solid var(--color-main);
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    display: block;
    right: -24px;
    top: -56px;
}
.item_thumb img{
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transition: all .3s ease;
}
/* hover */
@media screen and (min-width: 769px) {
    .newsLists__item:hover .item_thumb img{
    transform: scale(1.1);
    }
}
@media screen and (max-width:767px){ 
    .item_thumb{
        width: calc(170 / var(--vw-min) * 100vw);
        height: calc(170 / var(--vw-min) * 100vw);
        border: calc(6 / var(--vw-min) * 100vw) solid var(--color-main);
        right: unset;
        top: 0;
        bottom: 0;
        left: calc(-70 / var(--vw-min) * 100vw);
        margin: auto;
    }
}

/* arrowBtn */
.newsLists__item .arrowBtn{
	position: absolute;
    right: 20px;
    bottom: 20px;
    margin: auto;
    background-color: var(--color-orange);
}

@media screen and (max-width:767px){ 
    .newsLists__item .arrowBtn{
        right:calc(-22 / var(--vw-min) * 100vw);
        bottom: 0;
        top:0;
        width: calc(44 / var(--vw-min) * 100vw);
        height: calc(44 / var(--vw-min) * 100vw);
        border: 3px solid #FFF;
    }
}


/*-----------------------------------------------
 * STORY
-------------------------------------------------*/
.storyArea {
	position: relative;
    padding-top: calc(350 / var(--vw-min) * 100vw);
    margin-top: calc(-400 / var(--vw-min) * 100vw);    z-index: -1;
    background-color: #fffbe6;
    padding-bottom: calc(20 / var(--vw-min) * 100vw);
}
.storyArea .area__inner{
	position: relative;
    padding-top: 0;
    padding-bottom: calc(390 / var(--vw-min) * 100vw);
    margin-top: calc(-100 / var(--vw-min) * 100vw);
}
@media screen and (max-width:767px){
	.storyArea {
		position: relative;
		padding: calc(120 / var(--vw-min) * 100vw) 0 calc(200 / var(--vw-min) * 100vw);
        margin-top: calc(-370 / var(--vw-min) * 100vw);
	}
	.storyArea .area__inner{
		z-index: 10;
        padding: calc(110 / var(--vw-min) * 100vw) calc(48 / var(--vw-min) * 100vw)  calc(630 / var(--vw-min) * 100vw);
        overflow: hidden;
        margin-top: 0;
	}
}
/* deco */
.story__deco.deco_b{
    width: 92px;
    height: 83px;
    right: unset;
    top:unset;
    left: calc(225 / var(--vw-min) * 100vw);
    bottom: calc(200 / var(--vw-min) * 100vw);
    animation: fuwafuwa 3s ease-in-out infinite alternate;
}
.story__deco.deco_s{
    width: 60px;
    height: 76px;
    right: unset;
    bottom:unset;
    left: calc(400 / var(--vw-min) * 100vw);
    top: calc(211 / var(--vw-min) * 100vw);
    transform: rotate(-60deg);
    animation: fuwafuwa 3s ease-in-out infinite alternate;
    background: url(../img/deco/deco_s2.png) no-repeat center center/contain;
}
@media screen and (max-width:767px){ 
    .story__deco.deco_b{
        width: calc(92 / var(--vw-min) * 100vw);
        height: calc(83 / var(--vw-min) * 100vw);
        bottom: 0;
        left: calc(225 / var(--vw-min) * 100vw);
        top: calc(940 / var(--vw-min) * 100vw);
        animation: fuwafuwa 3s ease-in-out infinite alternate;
    }
    .story__deco.deco_s{
        display: none;
    }
}
/* bg */
.story__bg2{
    width: 100%;
    height: min(calc(390 / var(--vw-min) * 100vw),390px);
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/deco/bg_eki1.png) repeat-x center top;
    background-size: auto min( calc(390 / var(--vw-min) * 100vw),390px);
    z-index: -1;
    pointer-events: none;
}
.story__bg{
    position: absolute;
    bottom: 10%;
    margin: auto;
    left: 0;
	width: 100%;
    height:calc(647 / var(--vw-min) * 100vw);
    background: url(../img/top/story/story_deco.png) no-repeat center bottom;
    background-size: 100% auto;
}
@media screen and (max-width:767px){ 
    .story__bg{
        bottom: 10%;
        height:calc(500 / var(--vw-min) * 100vw);
        background: url(../img/top/story/story_deco_sp.png) no-repeat left bottom;
        background-size: auto 100%;
    }
}

/* story > ttl */
.story__ttl{
    margin-bottom: 80px;
}
.story__ttl .ttl_en{
    color: #000;
}
.story__ttl .ttl_jp{
    color: var(--color-purple);
}

@media screen and (max-width:767px){ 
    .story__ttl{
        margin-bottom: calc(60 / var(--vw-min) * 100vw);
    }  
    .story__ttl .ttl_jp{
        margin-left: calc(-10 / var(--vw-min) * 100vw);
    }
}

/* chara */
.story__chara{
    position: absolute;
    bottom: 0;
    right: -40px;
	width: min(calc(658 / var(--vw-min)* 100vw), 658px);
    height: min(calc(1513 / var(--vw-min)* 100vw), 1513px);
    background: url(../img/top/story/story_chara.png) no-repeat right bottom;
    background-size: 100% auto;
}
@media screen and (max-width:767px){ 
    .story__chara{
        bottom: 0;
        top: 0;
        margin: auto;
        right: calc(-155 / var(--vw-min) * 100vw);
        width:calc(600 / var(--vw-min) * 100vw);
        height: calc(1350 / var(--vw-min)* 100vw);
    }
}


/* story_txt */
.story_txtWrap{
	opacity: 0;
    font-size: 20px;
    color: #000;
}
.is-ani .story_txtWrap{
	animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: .4s;
}
.story_txt{
	font-size: 20px;
    font-weight: 600;
	letter-spacing: 0.06em;
	line-height: calc(40/20);
}
.story_txt._txt2{
    font-weight: 700;
    font-size: 40px;
    margin-top: 40px;
    line-height: 1.3;
    -webkit-text-stroke: 4px #fffbe6;
    text-stroke: 4px #fffbe6;
    paint-order: stroke;
}
.story_txt._txt2 strong{
    font-size: 80px;
    color: var(--color-purple);
}
@media screen and (max-width:767px){
	.story_txtWrap{
        -webkit-text-stroke: calc(4 / var(--vw-min) * 100vw) #fffbe6;
        text-stroke: calc(4 / var(--vw-min) * 100vw) #fffbe6;
        paint-order: stroke;    
		padding: 0;
	}
	.story_txt{
    	font-size: calc(30 / var(--vw-min) * 100vw);
	}
    .story_txt._txt2{
        -webkit-text-stroke: calc(4 / var(--vw-min) * 100vw) #fffbe6;
        text-stroke: calc(4 / var(--vw-min) * 100vw) #fffbe6;
        font-size: calc(40 / var(--vw-min) * 100vw);
        margin-top: calc(120 / var(--vw-min) * 100vw);;
    }
    .story_txt._txt2 strong{
        font-size: calc(80 / var(--vw-min) * 100vw);
    }
}


/*-----------------------------------------------
 * STAFF & CAST
-------------------------------------------------*/
.staffcastArea{
    padding-bottom: 80px;
    background-color: #fffbe6;
    z-index: -2;
}
@media screen and (max-width:767px){ 
    .staffcastArea{
       
    }
}
/* bg */
.staffcast__bg{
    width: 100%;
    height: min(calc(523 / var(--vw-min) * 100vw),523px);
    position: absolute;
    bottom: 0;
    right: 0;
    background: url(../img/deco/bg_right.png) no-repeat right bottom;
    background-size: auto 100%;
    z-index: -1;
    pointer-events: none;
}

/* ttl */
.staffcast__ttl{
    margin-bottom: 80px;
    text-align: center;
}
.staffcast__ttl .ttl_en{
    color: #000;
}
.staffcast__ttl .ttl_jp{
    color: var(--color-green);
}
.staffcast__ttl .ttl_jp span{
    font-size: 30px;
}
@media screen and (max-width:767px){ 
    .staffcast__ttl{
        margin-bottom: calc(60 / var(--vw-min) * 100vw);
    }  
}

/* caststaffList */
.caststaffListWrap{
    display: flex;
    opacity: 0;
}
.is-ani .caststaffListWrap{
    animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: .4s;
}
.caststaffList{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media screen and (max-width:767px){
    .caststaffListWrap{
        flex-direction: column;
        align-items: center;
    }
    .caststaffList{
        width: 100%;
    }
    .caststaffList:last-child{
        margin-top: calc(110 / var(--vw-min) * 100vw);
    }
}
/* caststaffList ttl */
.caststaffList__ttl{
    font-size: 20px;
    font-weight: 900;
    display: inline-block;
    padding: 0 29px;
    position: relative;
}
.caststaffList__ttl::before,
.caststaffList__ttl::after{
    content: "";
    background-color: var(--color-green);
    width: 17px;
    height: 17px;
    -webkit-mask: url(../img/deco/deco_tulip.png) no-repeat center bottom / contain;
    mask: url(../img/deco/deco_tulip.png) no-repeat center bottom / contain;
    position: absolute;
    margin: auto;
    top: 0;
    bottom:0;
}
.caststaffList__ttl::before{
    left: 0;
}
.caststaffList__ttl::after{
    right: 0;
}
@media screen and (max-width:767px){
    .caststaffList__ttl{
        font-size: calc(30 / var(--vw-min) * 100vw);
        padding: 0 calc(45 / var(--vw-min) * 100vw);
    }
    .caststaffList__ttl::before,
    .caststaffList__ttl::after{
        width: calc(25 / var(--vw-min) * 100vw);
        height:  calc(25 / var(--vw-min) * 100vw);
    }
}
@media screen and (max-width:767px){
    .caststaffList__itemWrap{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* caststaffList item */
.caststaffList__item{
    margin-top: 40px;
    text-align: center;
}
@media screen and (max-width:767px){
    .caststaffList__item{
        width: 50%;
        margin-top: calc(50 / var(--vw-min) * 100vw);
    }
    .caststaffList__item._full{
        width: 100%;
    }
}
/* item_ttl */
.item__name__inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 700;
    letter-spacing: 0.075em;
}
.item__ttl{
    font-size: 18px;
    color: var(--color-green);
}
.item__txt{
    font-size: 20px;
    display: flex;
    align-items: center;
}
.item__txt .txt_s{
    font-size: 16px;
}
@media screen and (max-width:767px){
    .item__ttl{
        font-size: calc(24 / var(--vw-min) * 100vw);
    }
    .item__txt{
        font-size: calc(28 / var(--vw-min) * 100vw);
    }
    .item__txt .txt_s{
        font-size: calc(24 / var(--vw-min) * 100vw);
    }
}
/* cmtBtn */
.cmtBtn{
    display: inline-block;
    margin-left: 5px;
    margin-bottom: 3px;
    background-color: var(--color-green);
    width: 24px;
    height: 24px;
    z-index: 1;
    -webkit-mask: url(../img/common/icon/icon_comment.svg) center center / contain no-repeat;
    mask: url(../img/common/icon/icon_comment.svg) center center / contain no-repeat;
    transition:all .4s ease;
}
/* hover */
@media screen and (min-width: 769px) {
    .cmtBtn:hover{
        transform: scale(1.1);
    }
}
/*-----------------------------------------------
 * COMICS
-------------------------------------------------*/
.comicsArea{
    padding-top: calc(150 / var(--vw-min) * 100vw);
    padding-bottom: calc(219 / var(--vw-min) * 100vw);
}
@media screen and (max-width:767px){ 
	.comicsArea{
		padding:calc(150 / var(--vw-min) * 100vw) 0 calc(220 / var(--vw-min) * 100vw);
	}
}
/* bg */
.comics__bg{
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background-image: url(../img/top/comics/comics_bg_top.png),url(../img/top/comics/comics_bg_btm.png);
    background-position: center top , right bottom;
    background-repeat: no-repeat,no-repeat;
    background-size: 100% auto, 100% auto;
    background-size: 100% auto; 
}
@media screen and (max-width:767px){
    .comics__bg{
        background-image: url(../img/top/comics/comics_bg_top_sp.png),url(../img/top/comics/comics_bg_btm_sp.png);
    }
}
/* deco */
.comics__deco.deco_f{
    width: 62px;
    height: 131px;
    right: unset;
    top: 44px;
    left: 192px;
    bottom: unset;
    animation: shake 3s infinite;
    transform-origin: center bottom;
}
.comics__deco.deco_c{
    width: 74px;
    height: 64px;
    right: unset;
    bottom:unset;
    right: calc(160 / var(--vw-min) * 100vw);
    top: 0;
    animation: fuwafuwa 3s ease-in-out infinite alternate;
}
@media screen and (max-width:767px){
    .comics__deco.deco_f{
        width: calc(65 / var(--vw-min) * 100vw);
        height: calc(116 / var(--vw-min) * 100vw);
        top:calc(124 / var(--vw-min) * 100vw);;
        left: calc(78 / var(--vw-min) * 100vw);
    }
    .comics__deco.deco_c{
        width: calc(74 / var(--vw-min) * 100vw);
        height: calc(64 / var(--vw-min) * 100vw);
        right: calc(60 / var(--vw-min) * 100vw);
        top: 0;
        animation: fuwafuwa 3s ease-in-out infinite alternate;
    }
}

/* ttl */
.comics__ttl{
    margin-bottom: 80px;
    text-align: center;
}
.comics__ttl .ttl_en{
    color: #FFF;
}
.comics__ttl .ttl_jp{
    color: var(--color-main);
}

@media screen and (max-width:767px){ 
    .comics__ttl{
        margin-bottom: calc(110 / var(--vw-min) * 100vw);
    }  
}

/* comics__inner */
.comics__innerWrap{
    background-color: var(--color-blue);
    position: relative;
    z-index: 1;
    padding-bottom: 100px;
}
@media screen and (max-width:767px){
    .comics__innerWrap{
        padding-bottom: 100px;
        padding: 0;
    }
}


/* infoBox */
.books__infoBox{
    position: absolute;
    left: 0;
    width: 400px;
    background-color: #669ee3;
    border-radius: 0 20px 20px 0;
    padding: 40px 60px 90px 60px;
    z-index: 2;
}
@media screen and (max-width:767px){
    .books__infoBox{
        position: relative;
        left: unset;
        width: calc(100% - calc(48 / var(--vw-min) * 100vw));
        height: auto;
        border-radius: calc(20 / var(--vw-min) * 100vw);
        padding:  calc(48 / var(--vw-min) * 100vw) calc(48 / var(--vw-min) * 100vw) calc(90 / var(--vw-min) * 100vw) ;
        text-align: center;
        margin: 0 calc(24 / var(--vw-min) * 100vw);
        margin-bottom: calc(140 / var(--vw-min) * 100vw);
    }
}
/*  infoBox > txt */
.books__infoBox_txt{
    font-size: 16px;
    font-weight: 600;
    line-height: calc(34 / 16);
}
.books__infoBox_txt._txt1{
    font-size: 20px;
    color: var(--color-main);
}
@media screen and (max-width:767px){
    .books__infoBox_txt{
        font-size: calc(26 / var(--vw-min) * 100vw);
    }
    .books__infoBox_txt._txt1{
        font-size:calc(36 / var(--vw-min) * 100vw);
    }
}
/*  infoBox > btn */
.linkBtn.books__moreBtn{
    width: 240px;
    height: 60px;
    position: absolute;
    bottom: -30px;
}
.linkBtn.books__moreBtn .arrowBtn{
    left: unset;
    right: 15px;
    background-color: var(--color-blue);
}
@media screen and (max-width:767px){
    .linkBtn.books__moreBtn{
        width: calc(440 / var(--vw-min) * 100vw);
        height:calc(100 / var(--vw-min) * 100vw);
        position: absolute;
        bottom: calc(-50 / var(--vw-min) * 100vw);
        left: 0;
        right: 0;
        margin: auto;
    }
}


   
  @keyframes popup {
	0% {
	  transform: translateY(40px) scale(0.8);
	  opacity: 0;
	}
	50% {
		transform: translateY(20px) scale(1.1);
	  }
	100% {
	  transform: translateY(0) scale(1.0);
	}
	80%, 100% {
	  opacity: 1;
	}
  }


/* slider */
.books__sliderBlock{
	width: 100%;
	overflow: hidden;
	padding-right: min(calc(80 / var(--vw-min) * 100vw),80px);
	padding-left: min(calc(400 / var(--vw-min) * 100vw),400px);
}
@media screen and (max-width:767px){
	.books__sliderBlock{
		padding-right: calc(40 / var(--vw-min) * 100vw);
		padding-left: calc(105 / var(--vw-min) * 100vw);
	}
}
/* slider ani */
/*
.books__sliderBlock.is-ani {
	animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: .2s;
}
 */

/* swiper */
.books__sliderWrap.swiper{
	overflow: unset;
}
.books__sliderBlock .contSwiper_scrlbarWrap {
    margin: 40px auto 0;
}

/* sliderPagerWrap */
.sliderPagerWrap{
	display: flex;
	justify-content: center;
    align-items: center;
	width: 100%;
	z-index: 3;
	padding: 38px 0;
}
/* sliderPager > pagination*/
.controlBlock._books .sliderPagerWrap .swiper-pagination-clickable .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
    background-color: #669ee3;
	opacity: 1!important;
	margin-right: 19px;
 }
 .controlBlock._books .sliderPagerWrap .swiper-pagination-clickable .swiper-pagination-bullet:last-child {
	margin-right: 0;
 }
 .controlBlock._books .sliderPagerWrap .swiper-pagination-clickable .swiper-pagination-bullet:first-child {
	margin-left: 0;
 }
 .controlBlock._books .sliderPagerWrap .swiper-pagination-bullet-active{
    -webkit-mask: url(../img/top/comics/slider_active.png) no-repeat center center/ contain;
    mask: url(../img/top/comics/slider_active.png) no-repeat center center/ contain;
    background-color: var(--color-pink)!important;
	 opacity: 1!important;
	 width: 19px!important;
	 height: 19px!important;
 }

/* slider item */
.books__slider__item{
    width:min(calc(340 / var(--vw-min) * 100vw),340px);
    min-width: 340px;
    padding-left: min(calc(60 / var(--vw-min) * 100vw),60px);
}
@media screen and (max-width: 767px){
	.books__slider__item{
		width: calc(100% / 3);
        min-width: unset;
		padding: 0 0 0 calc(45 / var(--vw-min) * 100vw);
	}
}
.bookList_link{
	display: block;
	text-decoration: none;
}
/* img */
.item_img{
	width: 100%;
	background-color: #F9F9EF;
	position: relative;
	z-index: 2;
    overflow: hidden;
    border-radius: 20px;
}
.item_img img{
	width: 100%;
}
/* ttl */
.books__slider__item .item_ttl{
	margin-top: min(calc(19/ var(--vw-min) * 100vw),19px);
	font-size: 16px;
    font-weight: 700;
	letter-spacing: 0.1em;
	text-align: center;
    background-color: #FFF;
    border-radius: 50px;
    height: 34px;
    line-height: 34px;
    position: relative;
    transition: all .4s ease
}
.books__slider__item .item_ttl::after{
    display: block;
    position: absolute;
    right: 12px;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
    width: 16px;
    height: 13px;
    background-color: var(--color-blue);
    -webkit-mask: url(../img/common/icon/ic_arrow.png) no-repeat center center / contain;
    mask: url(../img/common/icon/ic_arrow.png) no-repeat center center / contain;
    transition: all .4s ease
}
@media screen and (max-width:767px){
	.books__slider__item .item_ttl{
		margin-top: calc(22 / var(--vw-min) * 100vw);
		font-size: calc(22 / var(--vw-min) * 100vw);
        height: calc(52 / var(--vw-min) * 100vw);
        line-height: calc(52 / var(--vw-min) * 100vw);
    
	}
}
/* hover */
@media screen and (min-width: 769px) {
    /* hover img */
    .bookList_link .item_img img{
        transition: .4s ease;
    }
    .bookList_link:hover .item_img img{
        transform: scale(1.02);
    }
    /* hover ttl */
    .bookList_link:hover .item_ttl{
        background-color: var(--color-main);
    }
    .bookList_link:hover .item_ttl::after{
        right: 8px;
    }
}

/* MODAL COMMWNT */
.commentContWrap{
    width: 100%;
	max-width: 880px;
}
.commentCont {
	display: flex;
	flex-direction: column;
}
.commentContBox{
	display: flex;
    flex-direction: row;
}
@media screen and (max-width:767px){
	.commentContWrap{
		width: 100%;
		padding:calc(48 / var(--vw-min) * 100vw);
	}
	.commentContBox {
		flex-direction: column;
	}
}
/* ttl name */
.comment-titleWrap{
	color:#FFF;
	font-size: 30px;
	text-align: center;
    margin-bottom: 20px;
	border-bottom: 1px solid;
	line-height: 2.3;
}
.commentCont__h3_job{
	display: inline-block;
	margin-right: 15px;
    font-weight: 600;
}
.commentCont__h3_name{
    font-weight: 600;
}
@media screen and (max-width:767px){
	.comment-titleWrap{
        font-size: calc(36 / var(--vw-min) * 100vw);
        margin-bottom: calc(24 / var(--vw-min) * 100vw);
		line-height: 1.9;
	}
	.commentCont__h3_job{
		margin-right: calc(10 / var(--vw-min) * 100vw);
	}
}
/* img */
.commentCont__img{
	width: 300px;
	border: 1px solid rgba(0, 0, 0, .2);
}
.commentCont__img img{
	width: 100%;
	height: auto;
}
@media screen and (max-width:767px){
	.commentCont__img{
		width: 100%;
		margin-bottom:calc(24 / var(--vw-min) * 100vw);
	}
}
/* txt */
.commentCont__txt{
	width: calc(100% - 300px);
	padding-left: 40px;
	color: #FFF;
	font-size: 18px;
    font-weight: 900;
}
@media screen and (max-width:767px){
	.commentCont__txt{
		width:100%;
		padding-left: 0;
		font-size: calc(24 / var(--vw-min) * 100vw);
	}
}

/*------------------------------
LOADING
------------------------------*/
#loading {
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	z-index:12000;
	display: flex;
	justify-content: center;
	align-items: center;
    background-color: #FFF;
    background-image: url(../img/common/menu/menu_stitch_corner.png),url(../img/common/menu/menu_stitch_x.png),url(../img/common/menu/menu_stitch_x.png),url(../img/common/menu/menu_stitch_y.png), url(../img/common/menu/menu_stitch_y.png);
    background-repeat:no-repeat,repeat-x,repeat-x, repeat-y, repeat-y;
    background-position: left bottom,left 50px top 10px, left 50px bottom 10px,left 10px top 50px, right 10px bottom;
    background-size: 63px 63px,auto 2px, auto 2px, 2px auto, 2px auto;
}
/*
#loading::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    width: 63px;
    height: 63px;
    background: url(../img/common/menu/menu_stitch_corner.png) no-repeat center center / contain;
}
    */
#loading::before {
    position: absolute;
    transform: rotate(90deg);
    left: 0;
    top: 0;
    content: "";
    width: 63px;
    height: 63px;
    background: url(../img/common/menu/menu_stitch_corner.png) no-repeat center center / contain;
}
.loading__corner{
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	z-index:12000;
}
.loading__corner::after {
    position: absolute;
    right: 0;
    bottom: 0;
    content: "";
    width: 63px;
    height: 63px;
    background: url(../img/common/menu/menu_stitch_corner_r.png) no-repeat center center / contain;
}
.loading__corner::before {
    position: absolute;
    transform: rotate(-90deg);
    right: 0;
    top: 0;
    content: "";
    width: 63px;
    height: 63px;
    background: url(../img/common/menu/menu_stitch_corner_r.png) no-repeat center center / contain;
}

@media screen and (max-width:768px) {
	#loading {
		height: 100svh;
	}
}
.loading__inner{
	display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
    justify-content: center;
}
/*logo*/
.loading__logo {
	width:min(calc(280 / var(--vw-min) * 100vw),280px);
	height:min(calc(175 / var(--vw-min) * 100vw),175px);
	-webkit-mask:url(../img/logo.png) no-repeat center center / contain;
	mask:url(../img/logo.png) no-repeat center center / contain;
    background-color: var(--color-pink);
	z-index: 2;
}
.loading__logoWrap{
    display: block;
    Xfilter:
    drop-shadow(2px 0 0 #fffbe6)
    drop-shadow(-2px 0 0 #fffbe6)
    drop-shadow(0 2px 0 #fffbe6)
    drop-shadow(0 -2px 0 #fffbe6)
    drop-shadow(2px 2px 0 #fffbe6)
    drop-shadow(-2px 2px 0 #fffbe6)
    drop-shadow(2px -2px 0 #fffbe6)
    drop-shadow(-2px -2px 0 #fffbe6);
}
/* txt */
.loading__txt{
    margin-top: 24px;
    font-size: 24px;
    font-weight: 900;
    color: var(--color-pink);
    display: flex;
    justify-content: center;
    gap: 2px;
    padding-left: 1rem;
}
.loading__txt span {
    display: inline-block;
    text-transform: uppercase;
    animation: l_rotate 1s infinite linear;
    color: var(--color-orange);
}
.loading__txt span:nth-child(2) {
    animation-delay: 0.1s;
    color: var(--color-pink);
}
.loading__txt span:nth-child(3) {
    animation-delay: 0.2s;
    color: var(--color-blue);
}
.loading__txt span:nth-child(4) {
    animation-delay: 0.3s;
    color: var(--color-purple);
}
.loading__txt span:nth-child(5) {
    animation-delay: 0.4s;
    color: var(--color-green);
}
.loading__txt span:nth-child(6) {
    animation-delay: 0.5s;
    color: var(--color-emerald);
}
.loading__txt span:nth-child(7) {
    animation-delay: 0.6s;
    color: var(--color-lightblue);
}
.loading__txt span:nth-child(8) {
    animation-delay: 0.7s;
    color: var(--color-orange);
}
.loading__txt span:nth-child(9) {
    animation-delay: 0.8s;
    color: var(--color-pink);

}
.loading__txt span:nth-child(10) {
    animation-delay: 0.9s;
    color: var(--color-blue);
}

@keyframes l_rotate {
    10% {
        transform: scale(1.1);
    }
}

@media screen and (max-width:768px) {
	.loading__logo {
		width: calc(340 / var(--vw-min) * 100vw);
        height: calc(216 / var(--vw-min) * 100vw);
	}
}

.loading__logoBox{
    position: relative;
    width:min(calc(400 / var(--vw-min) * 100vw),400px);
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* loading deco */
#loading .decoWrap__inner {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}
#loading .deco_b{
    width: 80px;
    height: 73px;
    left: 50%;
    right: unset;
    animation:btf 5s linear 0s infinite alternate,btf 5s linear 0s infinite alternate,btfh 0.9s ease-in-out 0s infinite alternate;
}
#loading .deco_f{
    width: 75px;
    height: 103px;
    animation: shake 3s infinite;
    transform-origin: center bottom;
    top: unset!important;
    bottom: 0;
    left: 20%;
}
#loading .deco_c{
    animation: fuwafuwa 3s ease-in-out infinite reverse;
    top: unset!important;
    right: min(calc(-20 / var(--vw-min) * 100vw),-20px);
    bottom: min(calc(20 / var(--vw-min) * 100vw),20px);
}
#loading .deco_s{
    animation: fuwafuwa 3s ease-in-out infinite alternate;
    top: min(calc(-20 / var(--vw-min) * 100vw),-20px);;
    left: 0%;
}
@media screen and (max-width:768px) {
    #loading .deco_b{
        width: calc(125 / var(--vw-min) * 100vw);
        height: calc(113 / var(--vw-min) * 100vw);
    }
    #loading .deco_f{
        width: calc(104 / var(--vw-min) * 100vw);
        height: calc(168 / var(--vw-min) * 100vw);
    }
}
#loading .deco_bWrap{
    position: absolute;
    left: 50%;
    top: 10%;
    width: 50%;
}