@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_menu {
	display: flex;
	justify-content: center;
	padding:0 40px;
	gap:20px;
	margin:40px auto 0;
	max-width:1280px;
}
@media screen and (max-width: 640px) {
	.square_cp .multi-angle_menu {
		flex-direction: column;
		padding:0 20px;
		gap:10px;
	}
}
.square_cp .multi-angle_menu li{
	max-width:calc((100% - 40px) / 2);
	width:100%;
	font-weight: bold;
}
@media screen and (max-width: 640px) {
	.square_cp .multi-angle_menu li{
		max-width:none;
	}
}
.square_cp .btn-multi-angle_menu {
	color:#fff;
	margin-top:40px;
	max-height:80px;
	text-align:center;
	line-height:1.4em;
	min-height:44px;
}
.square_cp .btn-multi-angle_menu-hana {
	background: linear-gradient(to right bottom, #C77997, #882A49);
}
.square_cp .btn-multi-angle_menu-tsuki {
	background: linear-gradient(to right bottom, #B7A351, #65633C);
}
.square_cp .btn-multi-angle_menu-yuki {
	background: linear-gradient(to right bottom, #4A998C, #106268);
}
.square_cp .btn-multi-angle_menu-hoshi {
	background: linear-gradient(to right bottom, #5588B7, #294C6E);
}
.square_cp .btn-multi-angle_menu-sora {
	background: linear-gradient(to right bottom, #906DB4, #674777);
}
.square_cp .btn-multi-angle_menu::after {
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
	transform: rotate(135deg);
}
.square_cp .multi-angle_anc {
	display: flex;
	justify-content: center;
	padding:0 40px;
	gap:20px;
	margin-top:40px;
}
@media screen and (max-width: 640px) {
	.square_cp .multi-angle_anc {
		gap:10px;
		padding:0 20px;
	}
}
.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;
	text-align:center;
	line-height:1.4em;
	min-height:44px;
}
@media screen and (max-width: 640px) {
	.square_cp .btn-multi-angle_anc {
		max-height:44px;
	}
}
.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 .box_detail_notice {
	margin:15px 0 20px;
	display:block;
	text-align:center;
	font-size:0.875em;
	line-height:1.5em;
}
.square_cp .box_detail_attention li{
	padding-left:1em;
	text-indent:-1em;
}
.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 .howto_sample {
	margin-top:40px;
}
.square_cp .credit {
	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;
}
}
.square_cp .btn-off-fin::before {
	content:"配信は終了いたしました。";
}
/*----------------------------------------
                キャンペーン
-----------------------------------------*/
.square_cp .multi-angle_box_campaign {
	border-radius:20px;
	background-image: -moz-linear-gradient( 45deg, rgb(233,241,251) 0%, rgb(239,233,251) 100%);
  background-image: -webkit-linear-gradient( 45deg, rgb(233,241,251) 0%, rgb(239,233,251) 100%);
  background-image: -ms-linear-gradient( 45deg, rgb(233,241,251) 0%, rgb(239,233,251) 100%);
	padding:40px;
	margin-top:60px;
	display:block;
}


@media screen and (max-width: 640px) {
	.square_cp .multi-angle_box_campaign {
		padding:30px 20px;
	}
}
.square_cp .multi-angle_box_campaign_title {
	border-bottom: 1px solid #bdb4e3;
    padding-bottom: 20px;
	margin:0 auto 30px;
	position:relative;
	text-align:center;
}
@media screen and (max-width: 640px) {
	.square_cp .multi-angle_box_campaign_title {
		margin:0 auto 20px;
	}
}
.square_cp .multi-angle_box_campaign_title img {
	max-width:100%;
	display:block;
	margin:auto;
}
.square_cp .multi-angle_box_campaign_title_sub {
	position:absolute;
	left:30px;
	top:-58px;
}
@media screen and (max-width: 640px) {
	.square_cp .multi-angle_box_campaign_title img.multi-angle_box_campaign_title_sub {
		position:static;
		margin-bottom:10px;
		width:85%;
	}
}
@media screen and (max-width: 640px) {
	.square_cp .multi-angle_box_campaign_title .multi-angle_box_campaign_title_img {
		max-width: none;
        margin: 0 calc(50% - 42vw);
        width: 84vw;
	}
}
.square_cp .multi-angle_box_campaign_detail {
	margin-top:0;
	padding-top:0;
	display: block;
}
.square_cp .multi-angle_box_campaign_detail dt{
	width: 100%;
    display: block;
    margin: 30px 0 0 0;
}
@media screen and (max-width: 640px) {
	.square_cp .multi-angle_box_campaign_detail dt{
		margin: 20px 0 0 0;
	}
}
.square_cp .multi-angle_box_campaign_detail dd:first-of-type{
	font-weight: normal;
	font-size:1rem;
	margin-top:20px;
	padding-top:0;
}
@media screen and (max-width: 640px) {
	.square_cp .multi-angle_box_campaign_detail dd:first-of-type{
		margin-top:10px;
	}
}
.square_cp .multi-angle_box_campaign_detail dd {
	font-weight: normal;
	font-size:1rem;
	margin-top:20px;
	padding-top:0;
	width:100%;
}
@media screen and (max-width: 640px) {
	.square_cp .multi-angle_box_campaign_detail dd{
		margin-top:10px;
	}
}
.square_cp .multi-angle_box_campaign_detail .box_detail_head {
	background:#304079;
}
.square_cp .marker {
	font-weight: bold;
	font-size:1.125em;
	background:linear-gradient(transparent 60%, #c3e2f6 20%);
}
/*▼----RRR----▼*/
.square_cp .multi-angle_box_campaign-rrr {
	background-image: -moz-linear-gradient( 45deg, rgb(251,244,233) 0%, rgb(255,226,207) 98%);
  background-image: -webkit-linear-gradient( 45deg, rgb(251,244,233) 0%, rgb(255,226,207) 98%);
  background-image: -ms-linear-gradient( 45deg, rgb(251,244,233) 0%, rgb(255,226,207) 98%);
}
.square_cp .multi-angle_box_campaign-rrr .multi-angle_box_campaign_detail .box_detail_head {
    background: #d40905;
}
.square_cp .multi-angle_box_campaign-rrr .marker {
	background:linear-gradient(transparent 60%, #ffc293 20%);
}
/*▲----RRR----▲*/

/*サンプル動画*/
.square_cp .src-components-caption-3y3F p {
	line-height:1em;
}

/*fin*/
.square_cp .text-fin {
	font-size: 1.2rem;
	line-height: 1.6rem;
	display: inline-block;
	color: #e80039;
	font-weight: 500;
	border: 2px solid;
	padding: 5px 20px;
	margin-top: 10px;
	margin-left:auto;
	margin-right:auto;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.4);
}
@media screen and (max-width: 640px) {
	.square_cp .text-fin {
		font-size: 1rem;
		line-height: 1.4rem;
		margin-top: 10px;
		padding: 5px 10px;
	}
}