@charset "UTF-8";
/* CSS Document */
/*--------------------------
      multi-angle
----------------------------*/
.square_cp.multi-angle {
    background: linear-gradient(to bottom, #3B4F94, #11162E, #11162E 1075px, #11162E);
	color: #fff;
}
.square_cp.multi-angle .contents {
    background: url(../img/bg_pattern_pale.png) repeat-x center top -554px / 2136px;
	position: relative;
}
.square_cp.multi-angle .contents::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 871px;
    background: url(../img/bg_pattern.png) repeat center top / 2136px;
    /* background-attachment: fixed; */
	z-index: -1;
}
.multi-angle .section-coloed {
	background: #384C86 url(../img/bg_pattern.png) repeat center top -179px;
}
.square_cp .contents_title {
	margin-bottom:40px;
}
@media screen and (max-width: 640px) {
	.square_cp .contents_title {
		line-height:1.2em;
		margin-bottom:20px;
	}
}
.square_cp.multi-angle h3{
	display: block;
    font-size: 1.375rem;
    font-weight: 700;
    position: relative;
    width: 100%;
    padding: 0 0 46px 0;
}
@media screen and (max-width: 640px) {
	.square_cp.multi-angle h3{
		padding:0 0 20px 0;
		font-size: 1rem;
	}
}
.square_cp .contents_title_catch {
	display:block;
	font-size: 2rem;
	line-height:1.4em;
	margin-bottom:20px;
}
@media screen and (max-width: 640px) {
	.square_cp .contents_title_catch {
		font-size:1rem;
		margin-bottom:10px;
	}
}
.square_cp .multi-angle_lead {
	text-shadow: #823bff 1px 0 10px,#823bff 1px 0 10px;
	text-align:center;
	padding:0 40px;
	font-weight: 500;
	font-size:1.25rem;
	line-height:1.6em;
	margin-bottom: 100px;
}
@media screen and (max-width: 640px) {
	.square_cp .multi-angle_lead {
		margin-bottom:60px;
		font-size:1rem;
		line-height:1.6em;
	}
}
.square_cp .multi-angle_lead span{
	font-size:1.6rem;
	font-weight: 700;
}
@media screen and (max-width: 640px) {
	.square_cp .multi-angle_lead span{
		font-size:1.2rem;
	}
}
.square_cp .multi-angle_anc {
	display: flex;
	justify-content: center;
	padding:0 40px;
	gap:40px;
	margin-top:40px;
}
.square_cp .multi-angle_anc li{
	max-width:380px;
	width:100%;
}
.square_cp .btn-multi-angle_anc {
	 background: linear-gradient(to right top, #C0BEF0, #D9E9FE);
	color:#0D3582;
	margin-top:40px;
	max-height:64px;
}
.square_cp .btn-base {
	margin:0 auto;
}
.square_cp .box_inner .btn-base + .btn-base{
	margin:30px auto 0;
}
.square_cp .box_detail + .btn-base {
	margin:40px auto 0;
}
.square_cp .btn-multi-angle_anc::after {
    border-top: 3px solid #0D3582;
    border-right: 3px solid #0D3582;
	transform: rotate(135deg);
}
.square_cp .multi-angle_box {
    color: #181818;
}
.square_cp .multi-angle_box + .multi-angle_box{
	margin-top:60px;
}
@media screen and (max-width: 640px) {
	.square_cp .multi-angle_box + .multi-angle_box{
		margin-top:30px;
	}
}
.square_cp .box_inner {
    border-radius: 30px 30px 30px 30px;
	background:#fff;
	overflow:hidden;
}
@media screen and (max-width: 640px) {
	.square_cp .box_inner-nocorner {
		border-radius: 0 30px 30px 30px;
	}
}
.square_cp .multi-angle_box_head {
	background: linear-gradient(to right bottom, #5A3C8F, #3D58A3);
	display: flex;
	align-items: center;
}
.square_cp .multi-angle_box_head-hana {
	background: linear-gradient(to right bottom, #C77997, #882A49);
	display: flex;
	align-items: center;
}
.square_cp .multi-angle_box_head-tsuki {
	background: linear-gradient(to right bottom, #B7A351, #65633C);
	display: flex;
	align-items: center;
}
.square_cp .multi-angle_box_head-yuki {
	background: linear-gradient(to right bottom, #4A998C, #106268);
	display: flex;
	align-items: center;
}
.square_cp .multi-angle_box_head-hoshi {
	background: linear-gradient(to right bottom, #5588B7, #294C6E);
	display: flex;
	align-items: center;
}
.square_cp .multi-angle_box_head-sora {
	background: linear-gradient(to right bottom, #906DB4, #674777);
	display: flex;
	align-items: center;
}
.square_cp .multi-angle_box_head_img {
	background:rgba(30, 30, 30, 0.4);
	display:flex;
	justify-content: center;
	width:31.916%;
	min-width:31.916%;
}
.square_cp .multi-angle_box_head_info {
	color:#fff;
	padding:0 60px;
	font-weight: bold;
}
@media screen and (max-width: 640px) {
	.square_cp .multi-angle_box_head_info {
		padding:10px 15px;
	}
}
.square_cp .multi-angle_box_head_troupe {
	font-size:1.25rem;
	line-height:1.2em;
	margin-bottom:10px;
}
@media screen and (max-width: 640px) {
	.square_cp .multi-angle_box_head_troupe {
		font-size:0.875rem;
		margin-bottom:2px;
	}
}
.square_cp .multi-angle_box_head_stage {
	font-size:2rem;
	line-height:1.4em;
	text-indent:-0.5em;
	margin-bottom:10px;
}
@media screen and (max-width: 640px) {
	.square_cp .multi-angle_box_head_stage {
		margin-bottom:5px;
		line-height:1.3em;
		font-size: clamp(0.8rem, 4.5vw, 1.125rem);
	}
}
.square_cp .multi-angle_box_head_date {
	font-size:1.25rem;
	line-height:1.4em;
}
@media screen and (max-width: 640px) {
	.square_cp .multi-angle_box_head_date {
		font-size:1rem;
	}
}
.square_cp .multi-angle_box_head_date span{
	font-size:1.25rem;
	line-height:1.4em;
}
@media screen and (max-width: 640px) {
	.square_cp .multi-angle_box_head_date span{
		font-size:0.875rem;
	}
}
.square_cp .multi-angle_box_head_place {
	font-size:1.25rem;
	line-height:1.4em;
}
@media screen and (max-width: 640px) {
	.square_cp .multi-angle_box_head_place {
		font-size:0.875rem;
	}
}
.square_cp .multi-angle_box_contents {
	padding: 60px 100px 60px;
}
@media screen and (max-width: 640px) {
	.square_cp .multi-angle_box_contents {
		padding: 40px 24px 40px;
	}
}
.square_cp .box_detail {
    text-align: left;
	display:flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap:0 20px;
}
@media screen and (max-width: 640px) {
	.square_cp .box_detail {
		flex-direction: column;
	}
}
.square_cp .box_detail_head {
    color: #fff;
    background: #000;
    border-radius: 50px 50px 0 50px;
    padding: 5px 10px;
    text-align: center;
}
.square_cp .box_detail dt {
	width:100%;
    max-width: 186px;
    margin-top: 20px;
}
.square_cp .box_detail dt:first-of-type {
	margin-top:0;
}
.square_cp .box_detail dd {
    margin: 0;
    padding: 0;
    margin-top: 20px;
	width:calc(100% - 206px);
	padding-top:5px;
	font-size:1.25rem;
	font-weight: bold;
	line-height:1.5em;
}
@media screen and (max-width: 640px) {
	.square_cp .box_detail dd {
		font-size:1rem;
		line-height:1.6em;
	}
}
.square_cp .box_detail_small {
	font-size:1rem;
	line-height:1.4em;
	display:block;
	margin-top:5px;
}
@media screen and (max-width: 640px) {
	.square_cp .box_detail_small {
		font-size: 0.875rem;
		line-height:1.4em;
	}
}
.square_cp .box_detail dd:first-of-type {
	margin-top:0;
}
@media screen and (max-width: 640px) {
	.square_cp .box_detail dd {
		width:100%;
		margin-top:10px;
	}
}
.square_cp .box_detail_date {
	font-size:1.625rem;
	font-weight: bold;
}
@media screen and (max-width: 640px) {
	.square_cp .box_detail_date {
		font-size:1.25rem;
	}
}
.square_cp .box_detail_date span{
	font-size:1.25rem;
}
@media screen and (max-width: 640px) {
	.square_cp .box_detail_date span{
		font-size:1rem;
	}
}
.square_cp .comingsoon {
	font-size:1.5rem;
	text-align:center;
	margin:20px auto;
	font-weight: bold;
	color:#CE297B;
}
@media screen and (max-width: 640px) {
	.square_cp .comingsoon {
		font-size:1rem;
	}
}
.square_cp .steps {
	margin:0 auto 100px;
	text-align: center;
	max-width:1200px;
}
@media screen and (max-width: 640px) {
	.square_cp .steps {
		margin:0 auto 60px;
		padding:0 20px;
	}
}
.square_cp .steps_inner {
	display: flex;
	gap:68px;
	margin:0 auto 60px;
	align-items:stretch;
}
@media screen and (max-width: 640px) {
	.square_cp .steps_inner {
		flex-direction: column;
		gap:40px;
		margin:0 auto 30px;
	}
}
.square_cp .steps_item{
	width:calc((100% - 68px) / 3);
	display:block;
}
@media screen and (max-width: 640px) {
	.square_cp .steps_item{
		width:100%;
		position:relative;
	}
}
.square_cp .steps_item_inner{
	border-radius:30px;
	/*filter: drop-shadow(0 0 49px rgba(0,0,0,0.29));*/
	background: rgba(255,255,255,0.9);
	padding:50px 30px 40px;
	text-align:center;
	position: relative;
	transition: 0.3s;
	min-height:353px;
}
@media screen and (max-width: 640px) {
	.square_cp .steps_item_inner{
		padding:40px 30px 20px;
		min-height:0;
	}
}
.square_cp .steps_num {
	background:linear-gradient(-45deg, #F7C9DD, #D7E3F0, #89DCF7);
	border-radius:22px 0 22px 0;
	color:#0D3582;
	display:inline-block;
	padding:4px 20px;
	position:absolute;
	left:0;
	right:0;
	margin:auto;
	max-width:140px;
	top:-0.5em;
}
.square_cp .num_inner {
	font-size:1.25em;
}
@media screen and (max-width: 640px) {
	.square_cp .steps_column {
		display:flex;
		gap:15px;
		align-items:center;
		color:#181818;
	}
}
.square_cp .steps_arrow{
	width:44px;
	height:44px;
	position: absolute;
	transform:rotate(-45deg);
	top:0;
	bottom:0;
	margin:auto;
	right:-42px;
}
@media screen and (max-width: 640px) {
	.square_cp .steps_arrow{
		width:32px;
		height:32px;
		transform:rotate(45deg);
		left:0;
		right:0;
		top:auto;
		bottom:-23px;
	}
}
.square_cp .steps_arrow_inner{
	display:block;
	position:relative;
	width:100%;
	height:100%;
}
.square_cp .steps_arrow_inner::after,.square_cp .steps_arrow_inner::before{
	content:"";
	display:block;
	border-radius:10px;
	background:#fff;
	position:absolute;
}
.square_cp .steps_arrow_inner::after {
	height:100%;
	width:6px;
	right:0;
	top:0;
}
.square_cp .steps_arrow_inner::before {
	width:100%;
	height:6px;
	bottom:0;
	left:0;
}
.square_cp .steps_head {
	font-size:1.25em;
	font-weight: 700;
	margin-bottom:20px;
	color: #181818;
}
@media screen and (max-width: 640px) {
	.square_cp .steps_head {
		margin-bottom:5px;
	}
}
.square_cp .steps_image {
	margin-bottom:10px;
}
@media screen and (max-width: 640px) {
	.square_cp .steps_image {
		width:28%;
		margin-bottom:0;
	}
}
.square_cp .steps_text {
	color: #181818;
}
@media screen and (max-width: 640px) {
	.square_cp .steps_text {
		text-align: left;
		
	}
}
.square_cp .steps_text_small {
	font-size:0.75em;
	display:inline-block;
	margin-bottom:2px;
}
.square_cp .charm {
	padding-left:22px;
	display:inline-block;
	position: relative;
}
.square_cp .charm::before {
	content:"";
	display:block;
	width:18px;
	height:17px;
	background: url("../../img/charm_kira.svg") no-repeat center / contain;
	top:0;
	bottom:0;
	left:0;
	margin:auto;
	position:absolute;
}
.square_cp .howto_attention {
	font-weight: 700;
	text-align: center;
	margin-bottom:20px;
}
.square_cp .howto_item_head {
    color: #0D3582;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: inline-block;
    padding-left: 15px;
    position: relative;
    text-indent: -15px;
    vertical-align: middle;
}
.square_cp .howto_item_head:not(:first-child) {
	margin-top:40px;
}
.square_cp .howto_item_head::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 20px;
    background: #0D3582;
    margin-right: 5px;
    vertical-align: middle;
    margin-bottom: 0.25em;
}
.square_cp .credit {
	margin-top:60px;
	color:#fff;
}
@media screen and (max-width: 640px) {
	.square_cp .credit {
	}
}
.square_cp .btn-off-1031::before {
	content:"販売開始日 10/31までお待ちください。";
}
@media screen and (max-width: 640px) {
	.square_cp .btn-off-1031::before {
	content:"販売開始日 10/31まで\Aお待ちください。";
	white-space:pre;
		text-align:center;
}
}
.square_cp .btn-off-0830::before {
	content:"販売開始日 8/30までお待ちください。";
}
@media screen and (max-width: 640px) {
	.square_cp .btn-off-0830::before {
	content:"販売開始日 8/30まで\Aお待ちください。";
	white-space:pre;
		text-align:center;
}
}