@charset "Shift_JIS";

@keyframes hero {
	  0% { opacity: 0; transform: translateY(100%); }
	100% { opacity: 1; transform: translateY(0%);  }
}
@keyframes curtain {
	  0% { opacity: 1; }
	100% { opacity: 0; }
}

.splotCurtain {
	position: absolute;
	top: 230px;
	left: 0;
	width: 100%;
	height: calc(100% - 410px);
	background: white;
	z-index: 2;
	user-select: none;
	pointer-events: none;
	animation: curtain .5s ease 1.0s 1 normal forwards;
}

.splotIntroGreeting { margin-top: 100px; }
.splotIntroFeature  { margin-top: 100px; }
.splotIntroCase1    { margin-top: 100px; }
.splotIntroCase2    { margin-top: 120px; }
.splotIntroCase3    { margin-top: 120px; }
.splotIntroEnding   { margin-top: 100px; }

.splotIntro h2 {
	font-size: 18px;
	display: inline-block;
	border: none;
	margin: 0 0 20px;
	padding: 6px 20px;
	border-radius: 30px;
}
.splotIntroGreeting h2 { background-color: #a9def9; }
.splotIntroFeature  h2 { background-color: #d0f4de; }
.splotIntroCase1    h2 { background-color: #fcf6bd; }
.splotIntroCase2    h2 { background-color: #e4c1f9; }
.splotIntroCase3    h2 { background-color: #ff99c8; }

.splotIntro h3 {
	font-size: 18px;
	font-weight: normal;
	display: inline-block;
	color: #000000;
	margin: 0 0 30px;
	padding-left: 10px;
}

.splotIntroHero {
	top: 0;
	left: 0;
	text-align: center;
	font-family: "MS PMincho", "Hiragino Mincho ProN";
	font-weight: bold;
	margin: 20px 0 0;
}
.splotIntroHero span {
	display: block;
	font-size: min(6.0vw, 36px);
	opacity: 0;
	line-height: 1.8em;
}
.splotIntroHero span:first-child  { animation: hero .7s ease .1s 1 normal forwards; }
.splotIntroHero span:nth-child(2) { animation: hero .7s ease .2s 1 normal forwards; }
.splotIntroHero span:nth-child(3) { animation: hero .7s ease .3s 1 normal forwards; }

.splotIntroGreeting {
	display: grid;
	grid-template-columns: 1fr 500px;
	grid-template-rows: 4;
	grid-template-areas:
		"AAA BBB"
		"CCC BBB"
		"CCC BBB"
		"CCC BBB";
	gap: 0 20px;
}
.splotIntroGreetingTitle {
	grid-area: AAA;
}
.splotIntroGreetingText {
	grid-area: CCC;
	margin: 0 20px;
}
.splotIntroGreetingImg {
	grid-area: BBB;
}

.splotIntroFeature {
	text-align: center;
}
.splotIntroFeature table {
	margin: auto;
}
.splotIntroFeature th {
	text-align: right;
	padding: 0 15px 15px 25px;
	white-space: nowrap;
	position: relative;
}
.splotIntroFeature th::after {
  content: '';
  display: block;
  position: absolute;
  top: 0.2em;
  left: -0.5em;
  width: 20px;
  height: 10px;
  border-left: 2px solid #25AF01;
  border-bottom: 2px solid #25AF01;
  transform: rotate(-45deg);
}
.splotIntroFeature td {
	text-align: left;
}

.splotIntroStepTable {
	margin: 20px 20px 0;
}
.splotIntroStepTable td {
	padding: 10px 5px;
}

.splotIntroCase2 {
	text-align: right;
}

.splotIntroCase1Content,
.splotIntroCase2Content,
.splotIntroCase3Content {
	display: grid;
	grid-template-rows: 10;
	gap: 0 20px;
}
.splotIntroCase1Content,
.splotIntroCase3Content {
	grid-template-columns: 0 300px 1fr;
	grid-template-areas:
		". AAA BBB"
		". CCC BBB"
		". CCC BBB"
		". CCC BBB"
		". CCC BBB"
		". CCC BBB"
		". CCC BBB"
		". CCC BBB"
		". CCC BBB"
		". CCC BBB";
}
.splotIntroCase2Content {
	grid-template-columns: 1fr 0 300px;
	grid-template-areas:
		"BBB . AAA"
		"BBB . CCC"
		"BBB . CCC"
		"BBB . CCC"
		"BBB . CCC"
		"BBB . CCC"
		"BBB . CCC"
		"BBB . CCC"
		"BBB . CCC"
		"BBB . CCC";
}
.splotIntroCaseContentDesc {
	grid-area: AAA;
	text-align: left;
}
.splotIntroCaseContentImg {
	grid-area: BBB;
}
.splotIntroCaseContentSummary {
	grid-area: CCC;
	text-align: left;
}

@media screen and (max-width:959px) {
	.splotIntro {
		margin: 0 15px;
	}
	.splotIntroGreeting {
		gap: 20px;
		grid-template-columns: 1fr;
		grid-template-rows: 3;
		grid-template-areas:
			"AAA"
			"BBB"
			"CCC";
	}
	.splotIntroGreetingTitle,
	.splotIntroGreetingImg {
		text-align: center;
	}
	.splotIntroGreetingText {
		margin: 0 10px;
	}
	.splotIntroCase1,
	.splotIntroCase2,
	.splotIntroCase3 {
		text-align: center;
	}
	.splotIntroCase1Content,
	.splotIntroCase2Content,
	.splotIntroCase3Content {
		grid-template-columns: 1fr;
		grid-template-rows: 3;
		grid-template-areas:
			"AAA"
			"BBB"
			"CCC";
		gap: 20px 0;
	}
}