@charset "UTF-8";

@media all {
	.section-header-lead {
		font-weight: bold;
		color: #3B4C85;
		text-align: justify;
	}
	.section-presen-content {
		position: relative;
	}
	.phase-list {
		counter-reset: num;
	}
	.phase-item {
		counter-increment: num;
		position: relative;
	}
	.phase-no {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		background: #3B4C85;
		color: #fff;
	}
	.phase-no::before {
		content: 'Phase' counter(num);
		display: block;
	}
	.phase-item:not(:last-child) .phase-no::after {
		content: '';
		position: absolute;
		left: 0;
		width: 100%;
		background: top center / contain no-repeat url(../img/service/presen/next-bg.svg);
	}
	.phase-ttl {
		font-weight: bold;
		color: #3B4C85;
	}
	.phase-inner-list::after {
		content: '';
		display: block;
		clear: both;
	}
	.phase-inner-list li {
		float: left;
		display: flex;
		align-items: center;
		margin-top: .75em;
		margin-right: .5em;
		padding: .5em 1.25em;
		border-radius: 1.5em;
		font-weight: bold;
		color: #3B4C85;
		line-height: 1;
	}


	.border-line {
		position: absolute;
		background: #9DA5C2;
		height: 0;
		z-index: 1;
	}
	.phase-item::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: -.5em;
		display: block;
		width: 1em;
		height: 1em;
		border-radius: .5em;
		background: #fff;
		z-index: 2;
	}
}
/* sp */
@media only screen and (max-width: 767px) {
	.section-header-lead {
		position: relative;
		padding-bottom: 2em;
		font-size: var(--sp-vw-16px);
		font-feature-settings: "palt";
		z-index: 3;
	}
	.section-presen-content {
		margin-top: var(--sp-vw-40px);
		padding: 0 var(--sp-vw-16px);
	}
	.phase-item {
		padding-bottom: var(--sp-vw-32px);
	}
	.phase-no {
		border-radius: var(--sp-vw-16px);
	}
	.phase-item:not(:last-child) .phase-no {
		margin-bottom: 18.5vw;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	.phase-no::after {
		bottom: calc(-18.5vw + 1px);
		height: 18.5vw;
	}
	.phase-item:not(:last-child) .phase-no::after {
		background: center / cover no-repeat url(../img/service/presen/next-bg-sp.svg);
	}
	.phase-no::before {
		padding: .75em;
		font-size: var(--sp-vw-32px);
		line-height: 1;
	}
	.phase-no img {
		width: 25vw;
	}
	.phase-item:last-child .phase-no img {
		padding-bottom: .5em;
		font-size: var(--sp-vw-32px);
		transform: translateY(-.25em);
	}

	.phase-dl {
		padding-left: 12%;
	}
	.phase-ttl {
		padding-top: .5em;
		font-size: var(--sp-vw-18px);
	}
	.phase-text {
		margin-top: .5em;
	}
	.phase-inner-list li {
		border: var(--sp-vw-02px) solid #3B4C85;
		font-size: var(--sp-vw-10px);
	}
	.phase-item::before {
		top: 9vw;
		left: calc(8% - var(--sp-vw-12px) / 2 );
		font-size: var(--sp-vw-12px);
	}
	.border-line {
		top: 9vw;
		left: 8%;
		width: var(--sp-vw-01px);
	}
	.dummy-timeline .timeline {
		height: 28vw;
	}
	.phase-item:last-child {
		margin-bottom: 45vw;
		padding-bottom: 0;
	}
	.contact-section {
		margin-top: 0;
	}
}
/* tab & pc */
@media print,
(min-width: 768px) {
	.section-header-lead {
		font-size: 24px;
	}
	.section-header-lead span {
		font-feature-settings: "palt";
	}
	.phase-list {
		margin: 0 auto 0;
		padding: 0 20px;
		max-width: 1040px;
	}
	.phase-item {
		position: relative;
		display: flex;
		justify-content: space-between;
		padding-bottom: 36px;
	}
	.phase-no {
		margin-bottom: 116px;
		padding-top: 50px;
		width: 47%;
		height: 258px;
		border-radius: 20px;
	}
	.phase-item:not(:last-child) .phase-no {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	.phase-item:last-child .phase-no {
		margin-bottom: 0;
		padding-bottom: 50px;
		height: 330px;
	}
	.phase-no::before {
		padding-bottom: 10px;
		font-size: 47px;
		line-height: 1;
	}
	.phase-item:not(:last-child) .phase-no::after {
		bottom: -115px;
		height: 116px;
	}
	.phase-no.mail {
		padding-bottom: 25px;
	}
	.phase-no.talk {
		padding-bottom: 15px;
	}
	.phase-no.eye {
		padding-bottom: 20px;
	}

	.phase-dl {
		width: 47%;
		padding-top: 40px;
	}
	.phase-ttl {
		font-size: 24px;
	}
	.phase-text {
		margin-top: 10px;
	}
	.phase-inner-list li {
		border: 2px solid #3B4C85;
		font-size: 14px;
	}

	.border-line {
		top: 70px;
		left: 10%;
	}
	.phase-item::before {
		top: 70px;
		left: calc(10% - 7.5px);
		font-size: 15px;
	}
	.phase-item:last-child .border-line {
		display: none;
	}
}

/* tab */
@media (min-width: 768px) and (max-width: 1024px) {
	.section-header-lead {
		width: 500px;
	}
	.section-header-lead span {
		font-feature-settings: normal;
	}
}