@charset "UTF-8";
body {
	color: #505046;
	font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', '游ゴシック', 'Yu Gothic', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-size:100%;
	font-weight:300;
	-webkit-text-size-adjust: 100%;
	width:100%;
	margin:0 auto;
}

body.modal-lock{
  /*overflow:hidden;*/
}

a img.blight{
	transition:opacity 0.2s linear;
	-webkit-transition:opacity 0.2s linear;
	-moz-transition:opacity 0.2s linear;
}

a:hover img.blight{
	opacity:0.7;
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
}

a{
	text-decoration:none;
	color:#000;
	transition:opacity 0.2s linear;
	-webkit-transition:opacity 0.2s linear;
	-moz-transition:opacity 0.2s linear;
}

a:hover{
	text-decoration:none;
	opacity:0.8;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
}

button{
	transition:opacity 0.2s linear;
	-webkit-transition:opacity 0.2s linear;
	-moz-transition:opacity 0.2s linear;
}

button:hover{
	text-decoration:none;
	opacity:0.8;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
}

input[type="submit"]{
	transition:opacity 0.2s linear;
	-webkit-transition:opacity 0.2s linear;
	-moz-transition:opacity 0.2s linear;
}

input[type="submit"]:hover{
	text-decoration:none;
	opacity:0.8;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
}

img{
	max-width:100%;
	height: auto;
	vertical-align:middle;
}

.sp-on,
.pcnone{
	display:none!important;
}

.pc-on,
.spnone{
	display:block!important;
}

img{
	max-width: 100%;
	width: 100%;
	height: auto;
}

img[src$=".svg"] {
	width: 100%;
}


*, *:before, *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.fadeIn,
.fadeInRight,
.fadeInUp{
	animation-duration: 1.6s !important;
}

:root {
  --header-height: 60px;
}

.scroll_top {
    scroll-margin-top: var(--header-height);
}


html {
	scroll-behavior: smooth;
}

main{
	overflow: hidden;
}


@media (max-width:600px){

:root {
  --header-height: 16vw;
}

.sp-on,
.pcnone{
	display: block !important;
}

.pc-on,
.spnone{
	display: none !important;
}

}



/********** header **********/

#top-head{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
	background: transparent;
    transition: transform .35s ease, background .3s ease;
}

/* 上に隠れる */
#top-head.head-hide{
    transform: translateY(-100%);
}

#top-head.is-scrolled{
    background: rgba(255,255,255,0.7);
}


header{
	width: 100%;
}

header .head_wrapper{
	width: 1200px;
	margin: 0 auto;
	padding: 0 30px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
    align-items: center;
}

header .head_wrapper h1{
	width: 176px;
}

header .head_wrapper .main_navi_wrapp{
	display: flex;
	align-items: center;
}

header .head_wrapper .main_navi_wrapp .gnav ul{
	display: flex;
	align-items: center;
	line-height: 1.2;
}

header .head_wrapper .main_navi_wrapp .gnav ul li{
	margin-right: 20px;
	padding-right: 20px;
	border-right: 1px solid #f35e0d;
}

header .head_wrapper .main_navi_wrapp .gnav ul li:last-child{
	margin-right: 38px;
	padding-right: 0;
	border-right: none;
}

header .head_wrapper .main_navi_wrapp .gnav ul li a{
	font-size: 13px;
	font-weight: 600;
	color: #f35e0d;
	position: relative;
}

header .head_wrapper .main_navi_wrapp .gnav ul li.buy a{
	padding-right: 20px;
}

header .head_wrapper .main_navi_wrapp .gnav ul li.buy a::after{
	content: '';
	display: inline-block;
	width: 15px;
	height: 15px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: contain;
	background-image: url('../img/icon_head_link.png');
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
}

header .head_wrapper .main_navi_wrapp .sns_link{
	display: flex;
	align-items: center;
	line-height: 1;
}

header .head_wrapper .main_navi_wrapp .sns_link li{
	width: 30px;
	margin-right: 12px;
}

header .head_wrapper .main_navi_wrapp .sns_link li:last-child{
	margin-right: 0;
}



@media (max-width: 1200px)  {

header .head_wrapper{
	width: 100%;
	padding: 0 2.5vw;
}

header .head_wrapper h1{
	width: 14.666667vw;
}

header .head_wrapper .main_navi_wrapp .gnav ul li{
	margin-right: 1.666667vw;
	padding-right: 1.666667vw;
}

header .head_wrapper .main_navi_wrapp .gnav ul li:last-child{
	margin-right: 3.166667vw;
}

header .head_wrapper .main_navi_wrapp .gnav ul li a{
	font-size: 1.083333vw;
}

header .head_wrapper .main_navi_wrapp .gnav ul li.buy a{
	padding-right: 1.666667vw;
}

header .head_wrapper .main_navi_wrapp .gnav ul li.buy a::after{
	width: 1.25vw;
	height: 1.25vw;
}

header .head_wrapper .main_navi_wrapp .sns_link li{
	width: 2.5vw;
	margin-right: 1vw;
}


}

@media (max-width:600px){

	header{
		height: 15.2vw;
		border-bottom: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

    header .head_wrapper {
        padding: 0;
    }

	header .head_wrapper h1 {
        width: 25.6vw;
        position: absolute;
        top: 55%;
        left: 0.533333vw;
		transform: translate(0, -50%);
		transition:opacity 0.2s linear;
	}

	header.active .head_wrapper h1 {
		opacity: 0;
	}

	#nav-toggle{
		width: 12vw;
		height: 12vw;
		border-radius: 50%;
		background: #e97cb1;
		position: absolute;
		top: 50%;
		right: 1.6vw;
		transform: translate(0, -50%);
		z-index: 99;
		transition: all 0.2s linear;
	}

	#nav-toggle div{
		width: 4vw;
		height: 3.2vw;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		transition: all 0.2s linear;
	}

	#nav-toggle div span{
		display: block;
		width: 100%;
		height: 0.8vw;
		border-radius: 0.8vw;
		background: #fff;
		position: absolute;
		top: 0;
		left: 0;
		transition: all 0.2s linear;
	}

	#nav-toggle div span:nth-of-type(2){
		top: 1.333333vw;
	}

	#nav-toggle div span:nth-of-type(3){
		top: 2.666667vw;
	}

	.open #nav-toggle{
		background: #fff;
	}

	.open #nav-toggle div span{
		background: #e97cb1;
	}

	.open #nav-toggle div span:nth-of-type(1){
    	transform: rotate(45deg);
    	top: 1.333333vw;
	}

	.open #nav-toggle div span:nth-of-type(2){
		opacity: 0;
	}

	.open #nav-toggle div span:nth-of-type(3){
		transform: rotate(-45deg);
		top: 1.333333vw;
	}

	header .head_wrapper .main_navi_wrapp {
    	display: none;
    	position: fixed;
    	inset: 0;
    	background: #e97cb1;
    	z-index: 10;
    	padding-top: 38.666667vw;
    	box-sizing: border-box;
	}

	header .head_wrapper .main_navi_wrapp .gnav ul {
		display: block;
		margin-bottom: 20.8vw;
	}

	header .head_wrapper .main_navi_wrapp .gnav ul li {
    	margin: 0 0 6.4vw;
    	padding-right: 0;
    	border-right: none;
    	text-align: center;
	}

	header .head_wrapper .main_navi_wrapp .gnav ul li:last-child{
    	margin-bottom: 0;
	}

	header .head_wrapper .main_navi_wrapp .gnav ul li a {
		display: inline-block;
    	font-size: 4.533333vw;
    	color: #fff;
    	border-bottom: 1px solid #fff;
	}

	header .head_wrapper .main_navi_wrapp .sns_link {
    	justify-content: center;
    	gap: 4.266667vw;
	}

	header .head_wrapper .main_navi_wrapp .sns_link li {
    	width: 7.466667vw;
    	margin-right: 0;
	}




}



/********** footer **********/

footer{
	margin-top: 50px;
}

footer .sns_link{
	display: flex;
	justify-content: center;
    align-items: center;
	gap: 30px;
	margin-bottom: 35px;
	opacity: 0;
}

footer .sns_link li{
	width: 86px;
}

footer .footer_logo{
	width: 220px;
	margin: 0 auto;
}

footer .copyright{
    display: block;
    text-align: center;
    font-size: 12px;
    padding: 50px 0 10px 0;
}


@media (max-width: 1200px)  {

footer{
	margin-top: 4.166667vw;
}

footer .sns_link{
	gap: 2.5vw;
	margin-bottom: 2.916667vw;
}

footer .sns_link li{
	width: 7.166667vw;
}

footer .footer_logo{
	width: 18.333333vw;
}

footer .copyright{
    font-size: 1vw;
    padding: 4.166667vw 0 0.833333vw 0;
}



}

@media (max-width:600px){

footer{
	margin-top: 10.666667vw;
}

footer .sns_link{
	gap: 4.266667vw;
	margin-bottom: 4.8vw;
}

footer .sns_link li{
	width: 10.4vw;
}

footer .footer_logo{
	width: 29.333333vw;
}

footer .copyright{
    font-size: 3.2vw;
    padding: 8vw 0 2.666667vw;
}

}



/********** KV **********/

#kv_area{
	width: 100%;
	padding-top: 118px;
}

#kv_area .kv_wrapp{
	/*width: 1200px;*/
	margin: 0 auto;
}

#kv_area .slider {
	width: 100%;
	margin-bottom: 0;
}

#kv_area .slide img,
#kv_area .slide video {
  width: 100%;
  display: block;
}

.slide_video {
	position: relative;
}

.slide_video::before,
.slide_video::after {
	content: "";
	width: 100%;
	height: 6px;
	background-color: #f35e0d;
	position: absolute;
	left: 0;
}

.slide_video::before {
	top: 0;
}

.slide_video::after {
	bottom: 0;
}

.slide_dots {
  margin: 0;
  padding: 0;
  text-align: center;
	line-height: 1;
	padding: 20px 0;
	background-color: #fff2e2;
}

.slide_dots li {
  display: inline-block;
  margin: 0 15px;
	line-height: 1;
}

.slide_dots li button {
  position: relative;
  text-indent: -9999px;
	width: 14px;
	height: 14px;
  background: #d7d7d7;
	border-radius: 50%;
  border: none;
  outline: none;
	cursor: pointer;
}

.slide_dots li button:hover,
.slide_dots li.slick-active button {
	background-color: #f5a9cd;
}


@media (max-width: 1200px)  {

#kv_area{
	padding-top: 9.833333vw;
}

#kv_area .kv_wrapp{
	width: 100%;
}

.slide_video::before,
.slide_video::after {
	height: 0.5vw;
}

.slide_dots {
	padding: 1.666666vw 0;
}

.slide_dots li {
  margin: 0 1.25vw;
}

.slide_dots li button {
	width: 1.166666vw;
	height: 1.166666vw;
}

}

@media (max-width:600px){

#kv_area{
	padding-top: 0;
	margin-bottom: 12.142857vw;
}

#kv_area .slider {
	display: flex;
	flex-direction: column;
}

#kv_area .slider .slide_video {
	order: 2;
}

.slide_video::before,
.slide_video::after {
	height: 2px;
}

}



/********** キャッチエリア **********/

#catch_area{
	/* padding-top: 60px; */
	background-repeat: repeat;
	background-position: 0 0;
	background-size: 204px 204px;
	background-image: url('../img/catch_area_bg01.png');
	background-color: #fff2e2;
	position: relative;
}

/* #catch_area::before{
	content: '';
	display: block;
	width: 100%;
	height: 60px;
	background-color: #fff2e2;
	position: absolute;
	top: 0;
	left: 0;
} */

#catch_area .first_area{

}

#catch_area .first_area .bg_block01{
	height: 294px;
	background: #fff;
	position: relative;
	z-index: 2;
}

#catch_area .first_area .bg_block01::after{
	content: '';
	display: block;
	width: 100%;
	height: 188px;
	background-repeat: repeat-x;
	background-position: bottom 0 left 0;
	background-size: 1787px 188px;
	background-image: url('../img/catch_area_bg02.png');
	position: absolute;
	bottom: -187px;
	left: 0;
	z-index: -1;
}

#catch_area .first_area .cont_block{
	width: 990px;
	height: 664px;
	margin: 0 auto;
	position: relative;
}

#catch_area .first_area .cont_block .catch_copy{
	width: 463px;
	position: absolute;
	top: 67px;
	left: 0;
	opacity: 0;
}

#catch_area .first_area .cont_block .caption_text{
	width: 335px;
	position: absolute;
	top: 332px;
	left: 0;
	opacity: 0;
}

#catch_area .first_area .cont_block .main_image{
	width: 654px;
	position: absolute;
	top: 66px;
	right: -40px;
	opacity: 0;
}

#catch_area .first_area .cont_block .catch_copy.fadeInUp{
	animation-delay: 0s;
}

#catch_area .first_area .cont_block .caption_text.fadeInUp{
	animation-delay: .25s;
}

#catch_area .first_area .cont_block .main_image.fadeInUp{
	animation-delay: .5s;
}



.tab_area{
	width: 990px;
	margin: 0 auto;
	position: relative;
	padding: 339px 0 230px;
}

.tab_area .tab_nav{
	width: 100%;
	height: 87px;
	position: relative;

}

.tab_area .tab_btn{
	width: 532px;
	position: absolute;
	top: 0;
	cursor:pointer;
	transition:.4s;
}

.tab_area .tab_btn.stan{
	left: 0;
}

.tab_area .tab_btn.chara{
	right: 0;
}

.tab_area .tab_btn img{
	width: 100%;
	max-width: unset;
}

.tab_area .tab_btn.is-active{
	z-index: 2;
}


.tab_area .tab_panel{
	display:none;
	padding: 20px 14px;
	margin-top: -7px;
    position: relative;
    z-index: 3;
	animation: tabFade .0s ease;
}

.tab_area .tab_panel.is-active{
	display:block;
}

/* ふわっと表示 */
@keyframes tabFade{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}

.tab_area .tab_panel.stan{
	background: #E54593;
	    background: linear-gradient(90deg, #eb64a5 0%, rgb(238 136 184) 55%);
}

.tab_area .tab_panel.chara{
	background: #38a1ee;
	background: linear-gradient(90deg, rgb(97 181 242) 0%, rgb(56 161 238) 55%);
}

.tab_area .tab_panel.stan .data_wrapp{
	background: #F9CEE2;
	background: linear-gradient(90deg,rgba(249, 206, 226, 1) 0%, rgba(250, 220, 234, 1) 100%);
	border-radius: 40px;
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp{
	padding: 56px 55px 50px;
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_title{
	width: 299px;
	margin: 0 0 40px 50px;
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_data{
	width: 100%;
	height: 997px;
	position: relative;
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_data .main_image{
	width: 272px;
	height: 433px;
	position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_data .data_ul li{
	width: 387px;
	position: absolute;
	opacity: 0;
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_data .data_ul li.li01{
	top: 0;
	left: 0;
	--start: translate(230px, 280px);
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_data .data_ul li.li02{
	top: 0;
	right: 0;
	--start: translate(-230px, 280px);
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_data .data_ul li.li03{
	bottom: 0;
	left: 0;
	--start: translate(230px, -280px);
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_data .data_ul li.li04{
	bottom: 0;
	right: 0;
	--start: translate(-230px, -280px);
}

.tab_area .tab_panel.stan .data_ul li.active{
	animation: pointIn 4.8s cubic-bezier(.22,1,.36,1) forwards;
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_data .data_ul li.li01.active{
	animation-delay: 0s;
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_data .data_ul li.li02.active{
	animation-delay: .25s;
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_data .data_ul li.li03.active{
	animation-delay: .5s;
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_data .data_ul li.li04.active{
	animation-delay: .75s;
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_data .main_image .image_wrapp.active{
	animation-delay: 1.0s;
}

@keyframes pointIn {
  0%{
    opacity:0;
    transform: var(--start) scale(0.8);
  }
  100%{
    opacity:1;
    transform: translate(0,0) scale(1);
  }
}

.point_modal_area{
	padding: 38px 88px 0 80px;
	border-radius: 0 0 40px 40px;
	background-repeat: repeat;
	background-position: 0 0;
	background-size: 204px 204px;
	background-image: url('../img/catch_area_bg03.png');
	background-color: #fff;
	position: relative;
}

.point_modal_area .modal_title{
	display: flex;
	justify-content: center;
    align-items: center;
    margin-bottom: 28px;
}

.point_modal_area .modal_title .name{
	width: 290px;
	margin-right: 30px;
}

.point_modal_area .modal_title .copy{
	width: 378px;
}

.point_modal_area ul{
	display: flex;
	flex-wrap: wrap;
}

.point_modal_area ul li{
	width: 30.7%;
	margin: 0 3.9% 24px 0;
}

.point_modal_area ul li:nth-child(3n + 3){
	margin-right: 0;
}

.point_modal_area ul li .modal_btn{
	cursor: pointer;
}

.point_modal_area ul li .modal_btn .image_box{
	transition: all .35s ease;
	transform: translateY(0);
}

.point_modal_area ul li .modal_btn:hover .image_box{
	transform: translateY(-15px);
}

.point_modal_area ul li .modal_btn .name_box{
	width: 182px;
	margin: 0 auto;
}

.modal_cont{
	position: fixed;
	inset: 0;
	z-index: 1000;
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease;
}

/* 開いた状態 */
.modal_cont.is-open{
	opacity: 1;
	pointer-events: auto;
}

/* 背景 */
.modal_cont .filter{
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.8);
}

/* 本体 */
.modal_data{
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	transition: transform .35s;
	width: min(92vmin, 600px);
	aspect-ratio: 1 / 1;
    padding: 0;
    box-sizing: border-box;
    container-type: size;
}

.modal_cont.is-open .modal_data{
	transform: translate(-50%, -50%);
}

/* 閉じるボタン */
.close_btn{
	cursor:pointer;
    position: absolute;
    right: 3%;
    top: 3%;
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    z-index: 10;
}

.modal_data .modal_data_wrapp{
}


.modal_data .link_btn{
	width: 74.33%;
	height: 9.33%;
	margin: 0 auto;
    position: absolute;
    bottom: 6.66%;
    left: 0;
    right: 0;
}

.modal_data .link_btn a{
	display: block;
	height: 100%;
	border-radius: 9999px;

	background: linear-gradient(90deg,rgba(236,97,164,1) 0%, rgba(240,146,191,1) 100%);
	box-shadow: 3px 3px 0 0 #8e878a;

	position: relative;
	transition: all .35s ease;
	transform: translate(0,0);
}

.modal_data .link_btn a:hover{
	opacity: 1;
	transform: translate(0, 3px);
	box-shadow: 0 0 0 0 #8e878a;
}

.modal_data .link_btn a::after{
	content: '';
	display: block;
	width: 2%;
	aspect-ratio: 12 / 21;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: contain;
	background-image: url('../img/iconlink_arrow01.png');
	position: absolute;
	top: 50%;
	right:7.33%;
	transform: translate(0, -50%);
	transition: all .35s ease;
}

.modal_data .link_btn a:hover::after{
	right:6.66%;
}


.point_modal_area .link_wrapp{
	padding: 38px 0 50px;
	margin: 0 -88px 0 -80px;
	background: #fff;
    border-radius: 0 0 40px 40px;
}

.point_modal_area .link_wrapp .link_btn{
	width: 670px;
	margin: 0 auto;
}

.point_modal_area .link_wrapp .link_btn a{
	display: block;
	height: 72px;
	border-radius: 72px;
	background: linear-gradient(90deg,rgba(236, 97, 164, 1) 0%, rgba(240, 146, 191, 1) 100%);
	box-shadow: 3px 3px 0 0 #8e878a;
	position: relative;
	transition: all .35s ease;
	transform: translate(0, 0);
}

.point_modal_area .link_wrapp .link_btn a:hover{
	opacity: 1;
	transform: translate(0, 3px);
	box-shadow: 0 0 0 0 #8e878a;
}

.point_modal_area .link_wrapp .link_btn a::after{
	content: '';
	display: inline-block;
	width: 19px;
	height: 34px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: contain;
	background-image: url('../img/iconlink_arrow01.png');
	position: absolute;
	top: 50%;
	right: 44px;
	transform: translate(0, -50%);
	transition: all .35s ease;
}

.point_modal_area .link_wrapp .link_btn a:hover::after{
	right: 40px;
}

.point_modal_area .link_wrapp .link_btn a strong{
	font-size: 34px;
	font-weight: bold;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    white-space: nowrap;
}



#tab2 .data_wrapp{
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	background-image: url('../img/tab2_bg01.png');
	background-color: #fffdcc;
	border-radius: 40px;
	padding: 46px 0 60px;
}

#tab2 .data_wrapp .head_area{
	width: 100%;
	position: relative;
}

#tab2 .data_wrapp .head_area .catch{
	width: 478px;
	margin: 0 auto;
}

#tab2 .data_wrapp .head_area .logo{
	width: 195px;
	position: absolute;
	top: 38px;
	left: 36px;
}

#tab2 .data_wrapp .head_area .chara{
	width: 197px;
	position: absolute;
	top: 8px;
	right: 26px;
	transform-origin: 50% 80%;
}

/* 発火時のみアニメーション */
#tab2.is-anim .data_wrapp .head_area .chara{
	animation: charaTilt 2.2s ease-out 1 forwards;
}

@keyframes charaTilt{

	/* ちょっと考える間 */
	0%{
		transform: rotate(0deg);
	}
	40%{
		transform: rotate(0deg);
	}

	/* 首かしげ */
	45%{
		transform: rotate(-8deg);
	}

	60%{
		transform: rotate(3deg);
	}

	75%{
		transform: rotate(-4deg);
	}

	90%{
		transform: rotate(1deg);
	}

	100%{
		transform: rotate(0deg);
	}
}

#tab2 .main_item_wrapp{
	height: 749px;
	margin: -80px 0 50px;
	position: relative;
}

#tab2 .main_item_wrapp .item_data{
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	transform: translate(-50%, -50%) rotate(0deg);
}

#tab2 .main_item_wrapp .item_data.item1{
	width: 541px;
	transform: translate(calc(-50% - 200px), -50%) rotate(0deg);
	z-index: 2;
}

#tab2 .main_item_wrapp .item_data.item2{
	width: 567px;
	top: 52%;
	transform: translate(calc(-50% + 215px), -50%) rotate(0deg);
}

#tab2 .main_item_wrapp.active .item1{
	animation: item1In 3.1s cubic-bezier(.22,1,.36,1) forwards;
}

#tab2 .main_item_wrapp.active .item2{
	animation: item2In 3.1s cubic-bezier(.22,1,.36,1) .2s forwards;
}

@keyframes item1In{
	0%{
		opacity:0;
		transform: translate(-50%, -50%) rotate(0deg);
	}
	60%{
		opacity:1;
		transform: translate(calc(-50% - 215px), -50%) rotate(-14deg);
	}
	100%{
		opacity:1;
		transform: translate(calc(-50% - 215px), -50%) rotate(0deg);
	}
}

@keyframes item2In{
	0%{
		opacity:0;
		transform: translate(-50%, -50%) rotate(0deg);
	}
	60%{
		opacity:1;
		transform: translate(calc(-50% + 200px), -50%) rotate(14deg);
	}
	100%{
		opacity:1;
		transform: translate(calc(-50% + 200px), -50%) rotate(0deg);
	}
}

#tab2 .point_title{
	width: 573px;
	margin: 0 auto 10px;
}

#tab2 .point_list_ul{
	width: 867px;
	margin: 0 auto 58px;
}

#tab2 .point_list_ul li{
	margin-bottom: 26px;
	opacity: 0;
	transform: scale(.85);
	filter: blur(6px);

	will-change: transform, opacity, filter;
}

#tab2 .point_list_ul li:last-child{
	margin-bottom: 0;
}

#tab2 .point_list_ul.active li{
	animation: pointPop 2.7s cubic-bezier(.22,1,.36,1) forwards;
}

#tab2 .point_list_ul.active li:nth-child(1){ animation-delay:0s; }
#tab2 .point_list_ul.active li:nth-child(2){ animation-delay:.15s; }
#tab2 .point_list_ul.active li:nth-child(3){ animation-delay:.30s; }
#tab2 .point_list_ul.active li:nth-child(4){ animation-delay:.45s; }

@keyframes pointPop{

	0%{
		opacity: 0;
		transform: scale(.85);
		filter: blur(6px);
	}

	60%{
		opacity: 1;
		transform: scale(1.0);
		filter: blur(0);
	}

	100%{
		opacity: 1;
		transform: scale(1);
		filter: blur(0);
	}
}

#tab2 .lineup_title{
	width: 698px;
	margin: 0 auto;
}

#tab2 .modal_ul{
	margin: -20px auto 25px;
	display: flex;
	justify-content: center;
    align-items: center;
    gap: 20px;
}

#tab2 .modal_ul li{
	width: 304px;
}

#tab2 .modal_ul li .modal_btn{
	cursor: pointer;
}

#tab2 .modal_ul li .modal_btn .image_box{
	transition: all .35s ease;
	transform: translateY(0);
}

#tab2 .modal_ul li .modal_btn:hover .image_box{
	transform: translateY(-15px);
}

#tab2 .modal_ul li .modal_btn .name_box{
	width: 140px;
	margin: 0 auto;
}

#tab2 .modal_data .link_btn a {
    background: linear-gradient(90deg, #00a2ef 0%, #00a2ef 100%);
}

#tab2 .chara_copyright{
	font-size: 17px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	margin-bottom: 28px;
}

#tab2 .link_wrapp .link_btn{
	width: 670px;
	margin: 0 auto;
}

#tab2 .link_wrapp .link_btn a{
	display: block;
	height: 72px;
	border-radius: 72px;
	background: #008feb;
	box-shadow: 3px 3px 0 0 #8e878a;
	position: relative;
	transition: all .35s ease;
	transform: translate(0, 0);
}

#tab2 .link_wrapp .link_btn a:hover{
	opacity: 1;
	transform: translate(0, 3px);
	box-shadow: 0 0 0 0 #8e878a;
}

#tab2 .link_wrapp .link_btn a::after{
	content: '';
	display: inline-block;
	width: 19px;
	height: 34px;
	background-repeat: repeat;
	background-position: 0 0;
	background-size: contain;
	background-image: url('../img/iconlink_arrow01.png');
	position: absolute;
	top: 50%;
	right: 44px;
	transform: translate(0, -50%);
	transition: all .35s ease;
}

#tab2 .link_wrapp .link_btn a:hover::after{
	right: 40px;
}

#tab2 .link_wrapp .link_btn a strong{
	font-size: 34px;
	font-weight: bold;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    white-space: nowrap;
}




@media (max-width: 1100px)  {

#catch_area{
	padding-top: 7.142857vw;
	background-size: 18.545455vw 18.545455vw;
}

/* #catch_area::before{
	height: 5.454545vw;
} */

#catch_area .first_area{

}

#catch_area .first_area .bg_block01{
	height: 26.727273vw;
}

#catch_area .first_area .bg_block01::after{
	height: 17.090909vw;
	background-size: 162.454545vw 17.090909vw;
	bottom: -17.000000vw;
}

#catch_area .first_area .cont_block{
	width: 90vw;
	height: 60.363636vw;
}

#catch_area .first_area .cont_block .catch_copy{
	width: 42.090909vw;
	top: 6.090909vw;
}

#catch_area .first_area .cont_block .caption_text{
	width: 30.454545vw;
	top: 30.181818vw;
}

#catch_area .first_area .cont_block .main_image{
	width: 59.454545vw;
	top: 6vw;
	right: -3.636364vw;
}


.tab_area{
	width: 90vw;
	padding: 30.818182vw 0 20.909091vw;
}

.tab_area .tab_nav{
	height: 7.909091vw;
}

.tab_area .tab_btn{
	width: 48.363636vw;
}

.tab_area .tab_panel{
	padding: 1.818182vw 1.272727vw;
	margin-top: -0.636364vw;
}

.tab_area .tab_panel.stan .data_wrapp{
	border-radius: 3.636364vw;
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp{
	padding: 5.090909vw 5vw 4.545455vw;
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_title{
	width: 27.181818vw;
	margin: 0 0 3.636364vw 4.545455vw;
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_data{
	height: 90.636364vw;
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_data .main_image{
	width: 24.727273vw;
	height: 39.363636vw;
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_data .data_ul li{
	width: 35.181818vw;
}


.point_modal_area{
	padding: 3.454545vw 8vw 0 7.272727vw;
	border-radius: 0 0 3.636364vw 3.636364vw;
	background-size: 18.545455vw 18.545455vw;
}

.point_modal_area .modal_title{
    margin-bottom: 2.545455vw;
}

.point_modal_area .modal_title .name{
	width: 26.363636vw;
	margin-right: 2.727273vw;
}

.point_modal_area .modal_title .copy{
	width: 34.363636vw;
}

.point_modal_area ul li{
	margin: 0 3.9% 2.181818vw 0;
}

.point_modal_area ul li .modal_btn:hover .image_box{
	transform: translateY(-1.363636vw);
}

.point_modal_area ul li .modal_btn .name_box{
	width: 16.545455vw;
}

.modal_data{

}

.close_btn{
    font-size: 2.181818vw;
}

.modal_data .modal_data_wrapp{

}




.point_modal_area .link_wrapp{
	padding: 3.454545vw 0 4.545455vw;
	margin: 0 -8vw 0 -7.272727vw;
    border-radius: 0 0 3.636364vw 3.636364vw;
}

.point_modal_area .link_wrapp .link_btn{
	width: 60.909091vw;
}

.point_modal_area .link_wrapp .link_btn a{
	height: 6.545455vw;
	border-radius: 6.545455vw;
	box-shadow: 0.272727vw 0.272727vw 0 0 #8e878a;
}

.point_modal_area .link_wrapp .link_btn a:hover{
	transform: translate(0, 0.272727vw);
}

.point_modal_area .link_wrapp .link_btn a::after{
	width: 1.727273vw;
	height: 3.090909vw;
	right: 4vw;
}

.point_modal_area .link_wrapp .link_btn a:hover::after{
	right: 3.636364vw;
}

.point_modal_area .link_wrapp .link_btn a strong{
	font-size: 3.090909vw;
}


#tab2 .data_wrapp{
	border-radius: 3.636364vw;
	padding: 4.181818vw 0 5.454545vw;
}

#tab2 .data_wrapp .head_area .catch{
	width: 43.454545vw;
}

#tab2 .data_wrapp .head_area .logo{
	width: 17.727273vw;
	top: 3.454545vw;
	left: 3.272727vw;
}

#tab2 .data_wrapp .head_area .chara{
	width: 17.909091vw;
	top: 0.727273vw;
	right: 2.363636vw;
}

#tab2 .main_item_wrapp{
	height: 68.090909vw;
	margin: -7.272727vw 0 4.545455vw;
}

#tab2 .main_item_wrapp .item_data.item1{
	width: 49.181818vw;
	transform: translate(calc(-50% - 18.181818vw), -50%) rotate(0deg);
}

#tab2 .main_item_wrapp .item_data.item2{
	width: 51.545455vw;
	transform: translate(calc(-50% + 19.545455vw), -50%) rotate(0deg);
}

@keyframes item1In{
	0%{
		opacity:0;
		transform: translate(-50%, -50%) rotate(0deg);
	}
	60%{
		opacity:1;
		transform: translate(calc(-50% - 19.545455vw), -50%) rotate(-14deg);
	}
	100%{
		opacity:1;
		transform: translate(calc(-50% - 19.545455vw), -50%) rotate(0deg);
	}
}

@keyframes item2In{
	0%{
		opacity:0;
		transform: translate(-50%, -50%) rotate(0deg);
	}
	60%{
		opacity:1;
		transform: translate(calc(-50% + 18.181818vw), -50%) rotate(14deg);
	}
	100%{
		opacity:1;
		transform: translate(calc(-50% + 18.181818vw), -50%) rotate(0deg);
	}
}

#tab2 .point_title{
	width: 52.090909vw;
	margin: 0 auto 0.909091vw;
}

#tab2 .point_list_ul{
	width: 78.818182vw;
	margin: 0 auto 5.272727vw;
}

#tab2 .point_list_ul li{
	margin-bottom: 2.363636vw;
	filter: blur(0.545455vw);
}

#tab2 .lineup_title{
	width: 63.454545vw;
}

#tab2 .modal_ul{
	margin: -1.818182vw auto 25px;
    gap: 1.818182vw;
}

#tab2 .modal_ul li{
	width: 27.636364vw;
}vw

#tab2 .modal_ul li .modal_btn:hover .image_box{
	transform: translateY(-1.363636vw);
}

#tab2 .modal_ul li .modal_btn .name_box{
	width: 12.727273vw;
}

#tab2 .chara_copyright{
	font-size: 1.545455vw;
	margin-bottom: 2.545455vw;
}

#tab2 .link_wrapp .link_btn{
	width: 60.909091vw;
}

#tab2 .link_wrapp .link_btn a{
	height: 6.545455vw;
	border-radius: 6.545455vw;
	box-shadow: 0.272727vw 0.272727vw 0 0 #8e878a;
}

#tab2 .link_wrapp .link_btn a:hover{
	transform: translate(0, 0.272727vw);
}

#tab2 .link_wrapp .link_btn a::after{
	width: 1.727273vw;
	height: 3.090909vw;
	right: 4vw;
}

#tab2 .link_wrapp .link_btn a:hover::after{
	right: 3.636364vw;
}

#tab2 .link_wrapp .link_btn a strong{
	font-size: 3.090909vw;
}






}

@media (max-width:600px){


#catch_area{
	/* padding-top: 6.666667vw; */
}

#catch_area::before{
	content: '';
	display: block;
	width: 100%;
	height: 6.666667vw;
	background-color: #fff2e2;
	position: absolute;
	top: 0;
	left: 0;
}

#catch_area .first_area{

}

#catch_area .first_area .bg_block01{
	height: auto;
	padding: 4.266667vw 6.666667vw 0;
}

#catch_area .first_area .bg_block01::after{
	height: 45.066667vw;
	background-size: cover;
	background-image: url('../img/catch_area_bg02_sp.png');
	bottom: -18.666667vw;
}

#catch_area .first_area .cont_block{
	width: auto;
	height: auto;
	margin: 0 auto;
}

#catch_area .first_area .cont_block .catch_copy{
	width: 35.733333vw;
	position: static;
}

#catch_area .first_area .cont_block .caption_text{
	width: 89.333333vw;
	top: 54.4vw;
}

#catch_area .first_area .cont_block .main_image{
	width: 56.8vw;
	top: 1.066667vw;
	right: -3.466667vw;
}

#catch_area .first_area .cont_block .catch_copy.fadeInUp{
	animation-delay: 0s;
}

#catch_area .first_area .cont_block .caption_text.fadeInUp{
	animation-delay: .25s;
}

#catch_area .first_area .cont_block .main_image.fadeInUp{
	animation-delay: .5s;
}



.tab_area{
	width: auto;
	margin: 0 6.133333vw;
	padding: 55.2vw 0 16vw;
}

.tab_area .tab_nav{
	height: 6.933333vw;
}

.tab_area .tab_btn{
	width: 42.666667vw;
}

.tab_area .tab_panel{
	display:none;
	padding: 1.333333vw;
	margin-top: -1px;
}

.tab_area .tab_panel.stan{
	background: #E54593;
	    background: linear-gradient(90deg, #eb64a5 0%, rgb(238 136 184) 55%);
}

.tab_area .tab_panel.chara{
	background: #38a1ee;
	background: linear-gradient(90deg, rgb(97 181 242) 0%, rgb(56 161 238) 55%);
}

.tab_area .tab_panel.stan .data_wrapp{
	background: #F9CEE2;
	background: linear-gradient(90deg,rgba(249, 206, 226, 1) 0%, rgba(250, 220, 234, 1) 100%);
	border-radius: 3.2vw;
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp{
	padding: 23.733333vw 0 6.933333vw;
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_title{
	width: 26.133333vw;
	margin: 0 0 14.933333vw 7.733333vw;
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_data{
	height: auto;
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_data .main_image{
	width: 21.066667vw;
	height: 33.6vw;
	top: -37.333333vw;
	left: 48vw;
	transform: translate(0, 0);
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_data .data_ul li{
	width: auto;
	margin: 0 5.333333vw 2.666667vw;
	position: static;
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_data .data_ul li:last-child{
	margin-bottom: 0;
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_data .data_ul li.li01{
	--start: translate(0, 4vw);
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_data .data_ul li.li02{
	--start: translate(0, 4vw);
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_data .data_ul li.li03{
	--start: translate(0, 4vw);
}

.tab_area .tab_panel.stan .data_wrapp .point_wrapp .point_data .data_ul li.li04{
	--start: translate(0, 4vw);
}


.point_modal_area{
	padding: 4.533333vw 4.533333vw 0;
	border-radius: 0 0 3.2vw 3.2vw;
}

.point_modal_area .modal_title{
    margin-bottom: 2.666667vw;
}

.point_modal_area .modal_title .name{
	width: 26.133333vw;
	margin-right: 4vw;
}

.point_modal_area .modal_title .copy{
	width: 33.333333vw;
}

.point_modal_area ul{
	justify-content: space-between;
}

.point_modal_area ul li{
	width: 46%;
	margin: 0 0 3.466667vw;
}

.point_modal_area ul li .modal_btn:hover .image_box{
	transform: translateY(0);
}

.point_modal_area ul li .modal_btn .name_box{
	width: 21.6vw%;
}

.modal_cont{
	position: fixed;
	inset: 0;
	z-index: 999;
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease;
}

/* 開いた状態 */
.modal_cont.is-open{
	opacity: 1;
	pointer-events: auto;
}

/* 背景 */
.modal_cont .filter{
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.8);
}

/* 本体 */
.modal_data{
	width: 90vw;
    padding: 0;
}

/* 閉じるボタン */
.close_btn{
        right: 0%;
        top: 0%;
        font-size: 5.333333vw;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        display: block;
}

.modal_data .modal_data_wrapp{
	width: auto;
	margin: 0 auto;
}

.modal_data .link_btn{
	width: 66.933333vw;
	bottom: 8.8vw;
}

.modal_data .link_btn a{
	height: 8vw;
	border-radius: 12.8vw;
	box-shadow: none;
}

.modal_data .link_btn a:hover{
	transform: translate(0, 0);
	box-shadow: none;
}

.modal_data .link_btn a::after{
	width: 2.4vw;
	height: 2.933333vw;
	right: 5.333333vw;
}

.modal_data .link_btn a:hover::after{
	right: 5.333333vw;
}


.point_modal_area .link_wrapp{
	padding: 3.733333vw 0 4.533333vw;
	margin: 0 ;
    border-radius: 0 0 3.2vw 3.2vw;
}

.point_modal_area .link_wrapp .link_btn{
	width: 62.4vw;
}

.point_modal_area .link_wrapp .link_btn a{
	height: 7.466667vw;
	border-radius: 7.466667vw;
	box-shadow: none;
}

.point_modal_area .link_wrapp .link_btn a:hover{
	opacity: 1;
	transform: translate(0, 0);
	box-shadow: none;
}

.point_modal_area .link_wrapp .link_btn a::after{
	width: 1.333333vw;
	height: 2.4vw;
	right: 2.666667vw;
}

.point_modal_area .link_wrapp .link_btn a:hover::after{
	right: 2.666667vw;
}

.point_modal_area .link_wrapp .link_btn a strong{
	font-size: 3.733333vw;
}



#tab2 .data_wrapp{
	background-repeat: no-repeat, no-repeat;
    background-position: 0 0, bottom -14.933333vw left 0;
    background-size: 100% auto, 100% auto;
	background-image: url('../img/tab2_bg01_sp01.png'), url('../img/tab2_bg01_sp03.png');
	border-radius: 3.2vw;
	padding: 3.733333vw 0 5.866667vw;
}

#tab2 .data_wrapp .head_area{
	width: 100%;
	position: relative;
}

#tab2 .data_wrapp .head_area .catch{
	width: 39.2vw;
}

#tab2 .data_wrapp .head_area .logo{
	width: 18.133333vw;
	top: 2.666667vw;
	left: 2.933333vw;
}

#tab2 .data_wrapp .head_area .chara{
	width: 18.933333vw;
	top: -0.8vw;
	right: 2.133333vw;
}

#tab2 .main_item_wrapp{
	height: 63.733333vw;
	margin: -2.4vw 0 3.2vw;
}

#tab2 .main_item_wrapp .item_data{
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	transform: translate(-50%, -50%) rotate(0deg);
}

#tab2 .main_item_wrapp .item_data.item1{
	width: 50.666667vw;
	transform: translate(calc(-50% - 17.066667vw), -50%) rotate(0deg);
	z-index: 2;
}

#tab2 .main_item_wrapp .item_data.item2{
	width: 50.666667vw;
	top: 49.7%;
	transform: translate(calc(-50% + 18.666667vw), -50%) rotate(0deg);
}

#tab2 .main_item_wrapp.active .item1{
	animation: item1In 3.1s cubic-bezier(.22,1,.36,1) forwards;
}

#tab2 .main_item_wrapp.active .item2{
	animation: item2In 3.1s cubic-bezier(.22,1,.36,1) .2s forwards;
}

@keyframes item1In{
	0%{
		opacity:0;
		transform: translate(-50%, -50%) rotate(0deg);
	}
	60%{
		opacity:1;
		transform: translate(calc(-50% - 17.066667vw), -50%) rotate(-14deg);
	}
	100%{
		opacity:1;
		transform: translate(calc(-50% - 17.066667vw), -50%) rotate(-3deg);
	}
}

@keyframes item2In{
	0%{
		opacity:0;
		transform: translate(-50%, -50%) rotate(0deg);
	}
	60%{
		opacity:1;
		transform: translate(calc(-50% + 18.666667vw), -50%) rotate(14deg);
	}
	100%{
		opacity:1;
		transform: translate(calc(-50% + 18.666667vw), -50%) rotate(-2deg);
	}
}

#tab2 .point_title{
	width: 50.666667vw;
	margin: 0 auto 2.133333vw;
}

#tab2 .point_list_ul{
	width: 70.4vw;
	margin: 0 auto 6.666667vw;
}

#tab2 .point_list_ul li{
	margin-bottom: 3.2vw;
	filter: blur(1.6vw);
}

#tab2 .lineup_title{
	width: 62.4vw;
	margin: 0 auto;
}

#tab2 .modal_ul{
	margin: 0 auto 0.533333vw;
    gap: 1.6vw;
}

#tab2 .modal_ul li{
	width: 31.466667vw;
}

#tab2 .modal_ul li .modal_btn:hover .image_box{
	transform: translateY(0);
}

#tab2 .modal_ul li .modal_btn .name_box{
	width: 13.066667vw;
}


#tab2 .chara_copyright{
	font-size: 1.333333vw;
	margin-bottom: 1.6vw;
}

#tab2 .link_wrapp .link_btn{
	width: 62.4vw;
}

#tab2 .link_wrapp .link_btn a{
	height: 7.466667vw;
	border-radius: 7.466667vw;
	box-shadow: none;
}

#tab2 .link_wrapp .link_btn a:hover{
	transform: translate(0, 0);
	box-shadow: none;
}

#tab2 .link_wrapp .link_btn a::after{
	width: 1.333333vw;
	height: 2.4vw;
	right: 2.666667vw;
}

#tab2 .link_wrapp .link_btn a:hover::after{
	right: 2.666667vw;
}

#tab2 .link_wrapp .link_btn a strong{
	font-size: 3.733333vw;
}






}



#sec2{
	width: 100%;
	padding: 150px 0 366px;
    margin: -147px 0 -133px;
    position: relative;
    z-index: 2;
}

#sec2::after{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: repeat;
	background-position: 0 0;
	background-size: 100% 100%;
	background-image: url('../img/sec2_bg.png');
	position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: -1;
}

#sec2 .cont_wrapp{
	width: 1200px;
	margin: 0 auto;
	position: relative;
}

#sec2 h2{
	width: 962px;
	margin: 0 auto 28px;
	opacity: 0;
}

#sec2 .c_name{
	width: 914px;
	margin: 0 auto 34px;
}

#sec2 .list_ul{
	margin: 0 auto 30px;
}

#sec2 .list_ul li{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: -88px 0 0 134px;
	opacity: 0;
}

#sec2 .list_ul li:first-child{
	margin-top: 0;
}

#sec2 .list_ul li:nth-child(2){
	margin-top: -60px;
}

#sec2 .list_ul li:nth-child(3){
	margin-top: -60px;
}

#sec2 .list_ul li:nth-child(even){
	flex-direction: row-reverse;
	margin-right: 126px;
}

#sec2 .list_ul li:nth-child(odd){
	justify-content: flex-start
}

#sec2 .list_ul li .image{
	width: 388px;
}

#sec2 .list_ul li .text{
	width: 565px;
}

#sec2 .list_ul li:nth-child(odd) .text{
	margin-left: 18px;
}

#sec2 .note_wrapp{
	width: 869px;
	margin: 0 auto;
}

.s_icon{
	position: absolute;
}

.s_icon.i01{
	width: 95px;
	top: -105px;
    left: 330px;
    transform: rotate(18deg);
}

.s_icon.i02{
    width: 72px;
    top: 166px;
    left: 70px;
    transform: rotate(0deg);
}

.s_icon.i03{
	width: 46px;
    top: 185px;
    right: 179px;
    transform: rotate(-15deg);
}

.s_icon.i04{
    width: 32px;
    top: 143px;
    right: 74px;
    transform: rotate(7deg);
}

.s_icon.i05{
    width: 66px;
    top: 421px;
    right: 224px;
    transform: rotate(11deg);
}

.s_icon.i06{
    width: 72px;
    top: 691px;
    left: 76px;
    transform: rotate(5deg);
}

.s_icon.i07{
    width: 41px;
    top: 707px;
    left: 570px;
    transform: rotate(5deg);
}

.s_icon.i08{
    width: 92px;
    top: 657px;
    right: 80px;
    transform: rotate(1deg);
}

.s_icon.i09{
    width: 40px;
    top: 1124px;
    right: 216px;
    transform: rotate(-36deg);
}

.s_icon.i10{
	width: 69px;
    top: 1313px;
    left: 62px;
    transform: rotate(0deg);
}

.s_icon.i11{
    width: 66px;
    top: 1339px;
    right: 92px;
    transform: rotate(28deg);
}

.s_icon.i12{
    width: 40px;
    top: 1619px;
    left: 495px;
    transform: rotate(5deg);
}



@media (max-width: 1200px)  {

#sec2{
	padding: 12.5vw 0 30.5vw;
    margin: -12.25vw 0 -11.083333vw;
}

#sec2::after{
	background-image: url('../img/sec2_bg_pc02.png');
}

#sec2 .cont_wrapp{
	width: 100vw;
}

#sec2 h2{
	width: 80.166667vw;
	margin: 0 auto 2.333333vw;
}

#sec2 .c_name{
	width: 76.166667vw;
	margin: 0 auto 2.833333vw;
}

#sec2 .list_ul{

}

#sec2 .list_ul li{
	margin: -7.333333vw 0 0 11.166667vw;
}

#sec2 .list_ul li:nth-child(2){
	margin-top: -5vw;
}

#sec2 .list_ul li:nth-child(3){
	margin-top: -5vw;
}

#sec2 .list_ul li:nth-child(even){
	margin-right: 10.5vw;
}

#sec2 .list_ul li .image{
	width: 32.333333vw;
}

#sec2 .list_ul li .text{
	width: 47.083333vw;
}

#sec2 .list_ul li:nth-child(odd) .text{
	margin-left: 1.5vw;
}

#sec2 .note_wrapp{
	width: 72.416667vw;
}

.s_icon.i01{
	width: 7.916667vw;
	top: -8.75vw;
    left: 27.5vw;
}

.s_icon.i02{
    width: 6vw;
    top: 13.833333vw;
    left: 5.833333vw;
}

.s_icon.i03{
	width: 3.833333vw;
    top: 15.416667vw;
    right: 14.916667vw;
}

.s_icon.i04{
    width: 2.666667vw;
    top: 11.916667vw;
    right: 6.166667vw;
}

.s_icon.i05{
    width: 5.5vw;
    top: 35.083333vw;
    right: 18.666667vw;
}

.s_icon.i06{
    width: 6vw;
    top: 57.583333vw;
    left: 6.333333vw;
}

.s_icon.i07{
    width: 3.416667vw;
    top: 58.916667vw;
    left: 47.5vw;
}

.s_icon.i08{
    width: 7.666667vw;
    top: 54.75vw;
    right: 6.666667vw;
}

.s_icon.i09{
    width: 3.333333vw;
    top: 93.666667vw;
    right: 18vw;
}

.s_icon.i10{
	width: 5.75vw;
    top: 109.416667vw;
    left: 5.166667vw;
}

.s_icon.i11{
    width: 5.5vw;
    top: 111.583333vw;
    right: 7.666667vw;
}

.s_icon.i12{
    width: 3.333333vw;
    top: 134.916667vw;
    left: 41.25vw;
}





}


@media (max-width:600px){


#sec2{
	padding: 12.533333vw 0 28.266667vw;
    margin: -10.933333vw 0 -17.333333vw;
}

#sec2::after{
	background-image: url('../img/sec2_bg_sp.png');
}

#sec2 .cont_wrapp{
	width: auto;
	margin: 0 auto;
	position: relative;
}

#sec2 h2{
	width: 81.6vw;
	margin: 0 auto 6.666667vw;
	opacity: 0;
}

#sec2 .c_name{
	width: 78.666667vw;
	margin: 0 auto 3.2vw;
}

#sec2 .list_ul{
	margin: 0 6.133333vw 2.666667vw;
}

#sec2 .list_ul li{
	margin: 0;
}

#sec2 .list_ul li:first-child{
	margin-top: 0;
}

#sec2 .list_ul li:nth-child(2){
	margin-top: 0;
}

#sec2 .list_ul li:nth-child(3){
	margin-top: 0;
}

#sec2 .list_ul li:nth-child(even){
	flex-direction: row-reverse;
	margin-right: 0;
}

#sec2 .list_ul li:nth-child(odd){
	justify-content: space-between;
}

#sec2 .list_ul li .image{
	width: 27.466667vw;
}

#sec2 .list_ul li .text{
	width: 54.666667vw;
}

#sec2 .list_ul li:nth-child(odd) .text{
	margin-left: 4.8vw;
}

#sec2 .note_wrapp{
	width: 86vw;
}

.s_icon{
	display: none;
}


}




#sec3{
	width: 100%;
	background-repeat: repeat;
	background-position: 0 0;
	background-size: cover;
	background-image: url('../img/sec3_bg.png');
	padding: 176px 0 0;
	position: relative;
}

#sec3::after{
	content: '';
	display: block;
	width: 100%;
	height: 25px;
	background: #fff;
	position: absolute;
	bottom: 40px;
	left: 0;
}

#sec3 .cont_wrapp{
	width: 1200px;
	margin: 0 auto;
}

#sec3 .cont_wrapp h2{
	width: 964px;
	margin: 0 0 30px 86px;
	opacity: 0;
}

#sec3 .cont_wrapp .card_ul{
	display: flex;
	justify-content: center;
	position: relative;
    z-index: 5;
}

#sec3 .cont_wrapp .card_ul li{
	position: relative;
	opacity: 0;
	transform: translateY(60px);
	filter: blur(6px);
	will-change: transform, opacity, filter;
	opacity: 0;
}

#sec3 .cont_wrapp .card_ul.active li{
	animation: cardFadeUp .8s cubic-bezier(.22,1,.36,1) forwards;
}

#sec3 .cont_wrapp .card_ul li.li01{
	width: 409px;
	top: 55px;
	right:	-47px;
	z-index: 3;
}

#sec3 .cont_wrapp .card_ul li.li02{
	width: 392px;
	z-index: 2;
}

#sec3 .cont_wrapp .card_ul li.li03{
	width: 439px;
	top: 53px;
	left: -85px;
}

#sec3 .cont_wrapp .card_ul.active .li01{ animation-delay: 0.5s; }
#sec3 .cont_wrapp .card_ul.active .li02{ animation-delay: 0.8s; }
#sec3 .cont_wrapp .card_ul.active .li03{ animation-delay: 1.1s; }

@keyframes cardFadeUp{

	0%{
		opacity: 0;
		transform: translateY(60px);
		filter: blur(6px);
	}

	60%{
		opacity: 1;
		transform: translateY(-6px);
		filter: blur(0);
	}

	100%{
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}

@media (max-width: 1200px)  {

#sec3{
	padding: 14.666667vw 0 0;
}

#sec3::after{
	height: 2.083333vw;
	bottom: 3.333333vw;
}

#sec3 .cont_wrapp{
	width: 100vw;
}

#sec3 .cont_wrapp h2{
	width: 80.333333vw;
	margin: 0 0 2.5vw 7.166667vw;
}

#sec3 .cont_wrapp .card_ul li{
	transform: translateY(5vw);
	filter: blur(0.5vw);
}

#sec3 .cont_wrapp .card_ul li.li01{
	width: 34.083333vw;
	top: 4.583333vw;
	right:	-3.916667vw;
}

#sec3 .cont_wrapp .card_ul li.li02{
	width: 32.666667vw;
}

#sec3 .cont_wrapp .card_ul li.li03{
	width: 36.583333vw;
	top: 4.416667vw;
	left: -7.083333vw;
}




}


@media (max-width:600px){

#sec3{
	width: 100%;
	height: 149.333333vw;
	background-repeat: repeat;
	background-position: 0 0;
	background-size: cover;
	background-image: url('../img/sec3_bg.png');
	padding: 21.333333vw 0 0;
}

#sec3::after{
	content: none;
}

#sec3 .cont_wrapp{
	width: auto;
}

#sec3 .cont_wrapp h2{
	width: 82.933333vw;
	margin: 0 0 1.6vw 5.333333vw;
}

#sec3 .cont_wrapp .card_ul{
	display: block;
}

#sec3 .cont_wrapp .card_ul li{
	position: absolute;
	opacity: 0;
	transform: translateY(8vw);
	filter: blur(1.6vw);
}

#sec3 .cont_wrapp .card_ul.active li{
	animation: cardFadeUp 4s cubic-bezier(.22,1,.36,1) forwards;
}

#sec3 .cont_wrapp .card_ul li.li01{
	width: 47.2vw;
	top: 9.333333vw;
	left: 5.066667vw;
	right:	unset;
	z-index: 2;
}

#sec3 .cont_wrapp .card_ul li.li02{
	width: 44.266667vw;
	top: 0;
	right: 7.2vw;
	z-index: 3;
}

#sec3 .cont_wrapp .card_ul li.li03{
	width: 50.133333vw;
	top: 41.866667vw;
	left: unset;
	right: 16.8vw;
}

#sec3 .cont_wrapp .card_ul.active .li01{ animation-delay: 0.5s; }
#sec3 .cont_wrapp .card_ul.active .li02{ animation-delay: 0.8s; }
#sec3 .cont_wrapp .card_ul.active .li03{ animation-delay: 1.1s; }

@keyframes cardFadeUp{

	0%{
		opacity: 0;
		transform: translateY(8vw);
		filter: blur(1.6vw);
	}

	60%{
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}

	100%{
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}


}



#sec4 {
	width: 100%;
	background-repeat: repeat;
	background-position: 0 0;
	background-size: cover;
	background-image: url('../img/sec3_bg.png');
	padding: 125px 0 115px;
}

#sec4 h2 {
	width: 254px;
	margin: 0 auto 50px;
}

.movie_area {
	width: 990px;
  margin: 0 auto;
}

.movie_ul {
	display: flex;
  flex-wrap: wrap;
	gap: 20px;
}

.movie_ul li {
	width: calc((100% - 40px) / 3);
}

.movie_ul .modal_btn {
	cursor: pointer;
}

.movie_ul li .name_box {
	margin-top: 20px;
	line-height: 1;
}

.movie_ul li .name_box img {
	width: auto;
	height: 16px;
	display: inline-block;
}

.movie_thumb .image_box {
	position: relative;
}

.movie_thumb .image_box::before {
	content: "";
	width: 100%;
	height: 100%;
	background-color: #df408a;
	position: absolute;
	top: 3px;
	left: 3px;
}

.movie_thumb .image_box_inner {
	position: relative;
	overflow: hidden;
}

.movie_thumb.modal_btn .image_box_inner img {
	transition: transform .3s ease-out;
}

.movie_thumb.modal_btn:hover .image_box_inner img {
	transform: scale(1.05);
}

.movie_thumb .arrow {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #df408a;
	border: 2px solid #df408a;
	position: absolute;
	bottom: 5px;
	left: 8px;
	z-index: 1;
	transition: all 0.2s;
}

.movie_thumb .arrow::before {
	content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 16px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 50%;
	transform: translateY(-50%);
	right: 6px;
	transition: all 0.2s;
}

.movie_thumb.modal_btn:hover .arrow {
	left: 16px;
}

.movie_wrapper {
  overflow: hidden;
  padding-top: 56.25%;
  max-width: 100%;
  width: 100%;
  height: 0;
  position: relative;
}

.movie_item {
	width: 100%;
	height: 100%;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.modal_data_l {
	width: 990px;
	max-width: 90vw;
	max-height: 80vh;
	overflow-y: auto;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}

.movie_area .close_btn {
	font-size: 30px;
	background-color: #fff;
	top: 0;
	right: 0;
}


@media (max-width: 1200px)  {
	#sec4 {
		padding: 10.416666vw 0 9.583333vw;
	}

	#sec4 h2 {
		width: 21.166666vw;
		margin: 0 auto 4.166666vw;
	}

	.movie_area {
		width: 82.5vw;
	}

	.movie_ul {
		gap: 1.5vw;
	}

	.movie_ul li {
		width: calc((100% - 3.333333vw) / 3);
	}

	.movie_ul li .name_box {
		margin-top: 1.666666vw;
	}

	.movie_ul li .name_box img {
		height: 1.333333vw;
	}

	.movie_thumb .image_box::before {
		top: 3px;
		left: 3px;
	}

	.movie_thumb .arrow {
		width: 3vw;
		height: 3vw;
		bottom: 0.416666vw;
		left: 0.666666vw;
	}

	.movie_thumb .arrow::before {
		border-width: 0.75vw 0 0.75vw 1.333333vw;
		right: 0.5vw;
	}

	.movie_thumb.modal_btn:hover .arrow {
		left: 1.333333vw;
	}

	.movie_area .close_btn {
		font-size: 2.5vw;
	}
}

@media (max-width:600px){
	#sec4 {
		padding: 6.428571vw 0 10.714286vw;
	}

	#sec4 h2 {
		width: 36vw;
		margin: 0 auto 8.571428vw;
	}

	.movie_area {
		width: 100%;
		max-width: 90%;
	}

	.movie_ul {
		width: 67.142857vw;
		gap: 7.142857vw;
		margin: 0 auto;
	}

	.movie_ul li {
		width: 100%;
	}

	.movie_ul li .name_box {
		margin-top: 4.285714vw;
	}

	.movie_ul li .name_box img {
		height: 3.428571vw;
	}

	.movie_thumb .arrow {
		width: 7.714285vw;
		height: 7.714285vw;
		bottom: 0.714285vw;
		left: 1.714285vw;
	}

	.movie_thumb .arrow::before {
		border-width: 2vw 0 2vw 3.428571vw;
		right: 1.571428vw;
	}

	.movie_thumb.modal_btn:hover .arrow {
		left: 2.285714vw;
	}

	.movie_area .close_btn {
		font-size: 8vw;
	}
}