@charset 'utf-8';

/* ----------------------------------------
  / step_procamera / css / index.css
-------------------------------------------
* ステップエスコート プロカメラマン撮影 ページ
-------------------------------------------
* （フォーマットの接頭辞は「STAR-」（data属性は「star-」））
* インナーページの接頭辞は「starPage_」（data属性は「starpage-」）とする
---------------------------------------- */



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

/* STAR-main-uniqueCnt__leadBox
---------------------------------------- */
	.STAR-main-uniqueCnt__leadBox .leadIllustration {
		text-align: center;
		/*margin-top: 40px;*/
		margin: 30px 0 -0.75em;
	}
@media print, screen and ( min-width: 768px ) {
	.STAR-main-uniqueCnt__leadBox .leadBoxInner {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.STAR-main-uniqueCnt__leadBox .leadText {
		width: 890px;
	}
	.STAR-main-uniqueCnt__leadBox .leadIllustration {
		width: 230px;
		margin-top: 0;
	}
}





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

/* starPage_keyPointBox
---------------------------------------- */
	.starPage_pageTheme_stepscortDetail .starPage_keyPointBox {
		color: #82136e;
		border-color: #82136e;
	}
/*	.starPage_pageTheme_stepscortDetail .starPage_keyPointIllustration {
		text-align: center;
		margin-top: 25px;
	}
@media print, screen and ( min-width: 768px ) {
	.starPage_pageTheme_stepscortDetail .starPage_keyPointBoxInner {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.starPage_pageTheme_stepscortDetail .starPage_keyPointText {
		flex: 1 1;
		text-align: left;
		padding-right: 1.5em;
	}
	.starPage_pageTheme_stepscortDetail .starPage_keyPointIllustration {
		width: 150px;
		margin: -0.75em 0;
	}
}*/


/* 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: 54.545%;
	}
	.starPage_pageTheme_stepscortDetail .starPage_exampleUnit__body .beforePh .arrow {
		position: relative;
		width: 100%;
		height: 60px;
	}
	.starPage_pageTheme_stepscortDetail .starPage_exampleUnit__body .beforePh .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%);
	}
	.starPage_pageTheme_stepscortDetail .starPage_exampleUnit__body .afterPh {
		position: relative;
		width: 100%;
	}
	/*.starPage_pageTheme_stepscortDetail .starPage_exampleUnit__body .afterPh .illust {
		position: absolute;
		bottom: 83%;
		right: 0;
		width: 29%;
		transform: scale(-1, 1);
	}*/
@media print, screen and ( min-width: 768px ) {
	.starPage_pageTheme_stepscortDetail .starPage_exampleUnit__body {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-end;
	}
	.starPage_pageTheme_stepscortDetail .starPage_exampleUnit__body .beforePh {
		position: relative;
		width: 29.46429%;
	}
	.starPage_pageTheme_stepscortDetail .starPage_exampleUnit__body .beforePh .arrow {
		position: static;
		width: auto;
		height: auto;
	}
	.starPage_pageTheme_stepscortDetail .starPage_exampleUnit__body .beforePh .arrow::after {
		top: 54%;
		left: calc(100% + 38px);
		width: 0;
		height: 0;
		border-width: 17px 0 17px 17px;
		border-color: transparent transparent transparent #82136e;
	}
	.starPage_pageTheme_stepscortDetail .starPage_exampleUnit__body .afterPh {
		/*width: 54.01786%;*/
		width: 63.839286%;
	}
	/*.starPage_pageTheme_stepscortDetail .starPage_exampleUnit__body .afterPh .illust {
		bottom: 0;
		right: auto;
		left: -110px;
		width: 29.091%;
		transform: scale(1, 1);
	}*/
}


/* starPage_3Point
---------------------------------------- */
	.starPage_pageTheme_stepscortDetail .starPage_3Point {
		text-align: center;
	}
	.starPage_pageTheme_stepscortDetail .starPage_3Point .pointList {
		background: #000950;
		margin-top: 10px;
		padding: 35px 5vw;
	}
	.starPage_pageTheme_stepscortDetail .starPage_3Point .pointList li {
		width: 100%;
		line-height: 1.5;
		color: #000950;
		font-family: 'Noto Sans JP', sans-serif;
		font-size: calc(1.8rem + 2.2vw);
		font-weight: bold;
		letter-spacing: .12em;
		background: #fff;
		padding: 1em .6em;
		border-radius: 10px;
	}
	.starPage_pageTheme_stepscortDetail .starPage_3Point .pointList li:nth-of-type(n+2) {
		margin-top: 15px;
	}
	.starPage_pageTheme_stepscortDetail .starPage_3Point .pointList em {
		background: linear-gradient(to top, #ffde00 11px, rgba(0, 0, 0, 0) 11px);
	}
	.starPage_pageTheme_stepscortDetail .starPage_3Point .pointList .exclamationMark {
		display: inline-block;
		margin: 0 -.45em 0 -.15em;
	}
@media print, screen and ( min-width: 768px ) {
	.starPage_pageTheme_stepscortDetail .starPage_3Point .pointList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 25px 13px;
	}
	.starPage_pageTheme_stepscortDetail .starPage_3Point .pointList li {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		width: 28.3364%;
		font-size: 3.3rem;
	}
	.starPage_pageTheme_stepscortDetail .starPage_3Point .pointList li:nth-of-type(n) {
		margin-top: 0;
	}
}