@charset 'utf-8';

/* ----------------------------------------
  / step_vrstaging / css / index.css
-------------------------------------------
* ステップエスコート バーチャルステージング ページ
-------------------------------------------
* （フォーマットの接頭辞は「STAR-」（data属性は「star-」））
* インナーページの接頭辞は「starPage_」（data属性は「starpage-」）とする
---------------------------------------- */



/* ==================================================
	BASE
================================================== */




/* ==================================================
	STYLE
================================================== */

/* starPage_keyPointBox
---------------------------------------- */
	.starPage_pageTheme_stepscortDetail .starPage_keyPointBox {
		color: #82136e;
		border-color: #82136e;
	}


/* starPage_vsCntWrap
---------------------------------------- */
	.starPage_pageTheme_stepscortDetail .starPage_vsCntWrap {
		position: relative;
	}

/* starPage_exampleUnit
--------------------------------- */
	.starPage_pageTheme_stepscortDetail .starPage_exampleUnit__body {}
	.starPage_pageTheme_stepscortDetail .starPage_exampleUnit__body img {
		width: 100%;
	}
	.starPage_pageTheme_stepscortDetail .starPage_exampleUnit__body .beforePh {
		width: 65%;
	}
	.starPage_pageTheme_stepscortDetail .starPage_exampleUnit__body .beforePh .arrow,
	.starPage_pageTheme_stepscortDetail .starPage_exampleUnit__body .afterPh_1 .arrow {
		position: relative;
		width: 100%;
		height: 60px;
	}
	.starPage_pageTheme_stepscortDetail .starPage_exampleUnit__body .beforePh .arrow::after,
	.starPage_pageTheme_stepscortDetail .starPage_exampleUnit__body .afterPh_1 .arrow::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 34px;
		height: 17px;
		border-style: solid;
		border-width: 17px 17px 0 17px;
		border-color: #82136e transparent transparent transparent;
		transform: translate(-50%, -50%);
	}
@media print, screen and ( min-width: 768px ) {
	.starPage_pageTheme_stepscortDetail .starPage_exampleUnit__body::after {
		content: "";
		display: block;
		clear: both;
	}
	.starPage_pageTheme_stepscortDetail .starPage_exampleUnit__body .beforePh {
		width: 330px;
	}
	.starPage_pageTheme_stepscortDetail .starPage_exampleUnit__body .afterPh_1 {
		position: relative;
		float: left;
		width: 540px;
	}
	.starPage_pageTheme_stepscortDetail .starPage_exampleUnit__body .afterPh_2 {
		float: right;
		width: 540px;
	}
	.starPage_pageTheme_stepscortDetail .starPage_exampleUnit__body .afterPh_1 .arrow {
		position: static;
		height: auto;
	}
	.starPage_pageTheme_stepscortDetail .starPage_exampleUnit__body .afterPh_1 .arrow::after {
		top: 50%;
		left: calc(100% + 20px);
		width: 17px;
		height: 34px;
		border-width: 17px 0 17px 17px;
		border-color: transparent transparent transparent #82136e;
		transform: translate(-50%, 50%);
	}
}

/* starPage_flowWrap
--------------------------------- */
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap {
		background: rgba(130, 19, 110, .1);
		margin-top: 60px;
		padding: 10px 10px 25px;
	}
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap__header {
		width: 100%;
		line-height: 1.5;
		color: #82136e;
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 1.9rem;
		margin-bottom: -10px;		/* 微調整 */
	}
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap__body {
	}
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap__body .flowList {
		counter-reset: count 0;
		font-family: 'Noto Sans JP', sans-serif;
	}
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap__body li {
		position: relative;
		margin-top: 40px;
	}
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap__body li:nth-of-type(n+2)::before {
		content: "";
		display: block;
		position: absolute;
		top: calc(-40px / 2);
		left: 50%;
		width: 34px;
		height: 17px;
		border-style: solid;
		border-width: 17px 17px 0 17px;
		border-color: #82136e transparent transparent transparent;
		transform: translate(-17%, -50%);		/* translateXが -50% でないのは調整のため */
	}
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap__body li .itemBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		text-align: center;
		background: #fff;
		border: 1px solid #82136e;
	}
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap__body li .num {
		min-width: .725em;
		line-height: 1.15;
		color: rgba(130, 19, 110, .3);
		font-family: 'Cabin', 'Noto Sans JP', sans-serif;
		font-size: 6rem;
	}
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap__body li .num::before {
		content: counter(count) "";
		counter-increment: count 1;
	}
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap__body li .text {
		flex: 1 1;
		line-height: 1.6;
		padding: .25em 1.35em .25em .35em;
	}
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap__body li .text small {
		font-size: .77778em;
	}
@media print, screen and ( min-width: 480px ) {
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap__body li .text {
		font-size: 1.125em;
	}
}
@media print, screen and ( min-width: 660px ) {
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap__body li .text br {
		display: none;
	}
}
@media print, screen and ( min-width: 768px ) {
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap {
		position: absolute;
		top: 0;
		right: 0;
		width: 735px;
		margin-top: 0;
	}
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap__header {
		font-size: 2.2rem;
		margin-bottom: 20px;
	}
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap__body .flowList {
		display: flex;
		flex-wrap: wrap;
	}
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap__body li {
		display: flex;
		flex-wrap: wrap;
		margin-top: 15px;
	}
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap__body li:nth-of-type(n+2) {
		padding-left: 36px;
	}
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap__body li:nth-of-type(n+2)::before {
		top: 50%;
		left: calc(36px / 2);
		width: 0;
		height: 0;
		border-width: 10px 0 10px 10px;
		border-color: transparent transparent transparent #82136e;
		transform: translate(-50%, -50%);
	}
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap__body li:nth-of-type(2)::after {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		left: calc(100% + (36px / 2));
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 10px 0 10px 10px;
		border-color: transparent transparent transparent #82136e;
		transform: translate(-50%, -50%);
	}
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap__body li:nth-of-type(3) {
		margin-left: auto;		/* 右寄せ */
	}
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap__body li .itemBox {
		width: 317px;
		min-height: 95px;
	}
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap__body li .num {
		min-width: 0;
		font-size: 6.8rem;
		text-align: left;
	}
	.starPage_pageTheme_stepscortDetail .starPage_flowWrap__body li .text br {
		display: inline;
	}
}